Sun11118 2023-06-13 09:27 采纳率: 0%
浏览 22

实在想不出来怎么做，求思路

Javascript考试内容是做一个网页，具体要求：1.主题及内容自定，但要健康、积极向上；2、布局要合理，内容要丰富，样式要美观；3、要充分利用提现本学期所学JavaScript知识实现网页动态效果和交互效果等（比如图片轮播、折叠菜单、图片放大镜、DOM动态操作网页，动态生成表格，事件驱动、表单操作，Ajax操作）。

  • 写回答

2条回答 默认 最新

  • java入门选手 2023-06-13 09:42
    关注

    基于new bing部分指引作答：
    以下是一个简单示例：

    HTML 代码：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript 动态效果示例</title>
    <style>
        /* 样式美化 */
        ul {
            list-style: none;
        }
        li {
            display: inline-block;
            margin: 5px;
        }
        img {
            width: 150px;
            height: 150px;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <!-- 图片轮播 -->
    <div>
        <img id="slideImg" src="img/1.jpg">
    </div>
    <!-- 折叠菜单 -->
    <ul>
        <li onclick="toggleItem('item1')">菜单1</li>
        <li onclick="toggleItem('item2')">菜单2</li>
    </ul>
    <div id="item1">折叠菜单1</div>
    <div id="item2">折叠菜单2</div>
    <!-- 图片放大镜 -->
    <div>
        <img id="zoomImg" src="img/2.jpg">
    </div>
    <!-- 动态生成表格 -->
    <table id="myTable">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </table>
    <script type="text/javascript">
// 图片轮播
var slideIndex = 1;
showSlide(slideIndex);
setInterval(function() {
    showSlide(++slideIndex);
}, 2000);

function showSlide(n) {
    var slideImg = document.getElementById("slideImg");
    if (n > 2) {
        slideIndex = 1;
    } else if (n < 1) {
        slideIndex = 2;
    }
    slideImg.src = "img/" + slideIndex + ".jpg";
}

// 折叠菜单
function toggleItem(itemID) {
    var item = document.getElementById(itemID);
    if (item.style.display === "none") {
        item.style.display = "block";
    } else {
        item.style.display = "none";
    }
}

// 图片放大镜
var zoomImg = document.getElementById("zoomImg");
zoomImg.onmousemove = function(e) {
    var xPos = e.offsetX / this.offsetWidth;
    var yPos = e.offsetY / this.offsetHeight;
    this.style.transformOrigin = xPos * 100 + "% " + yPos * 100 + "%";
    this.style.transform = "scale(2)";
};
zoomImg.onmouseleave = function() {
    this.style.transformOrigin = "center center";
    this.style.transform = "none";
};

// 动态生成表格
var people = [
    {name: "John", age: 28, city: "New York"},
    {name: "Emma", age: 24, city: "London"},
    {name: "Mike", age: 32, city: "Paris"}
];
var table = document.getElementById("myTable");
for(var i = 0; i < people.length; i++) {
    var row = table.insertRow(-1);
    var nameCell = row.insertCell(0);
    var ageCell = row.insertCell(1);
    var cityCell = row.insertCell(2);
    nameCell.innerHTML = people[i].name;
    ageCell.innerHTML = people[i].age;
    cityCell.innerHTML = people[i].city;
}

</script>
</body>
</html>

    此示例实现了图片轮播、折叠菜单、图片放大镜、动态生成表格等效果，仅供参考。

    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 6月13日