javaScript项目案例

Myth丶恋晨 2022-05-19 00:12 197阅读 0赞

### 文章目录 ###

*  javaScript项目案例
 *   *  1.Dom操作
     *   *  创建节点
         *  获取节点
         *  常用的节点方法
         *  设置节点内容
         *  设置style属性
     *  2.项目案例
     *   *  2.1用js在网页上写一个hello world
         *  2.2模态框案例
         *  2.3点击有惊喜
         *  2.4制作一个简易留言板
         *  2.5制作选项卡
         *  2.6淘宝搜索框制作
         *  2.7动态时间制作
         *  2.8匀速运动
         *  2.9设置五秒关闭广告
         *  2.10设置五秒关闭广告(升级版)
         *  2.11小米滚动
         *  2.12无缝轮播图

# javaScript项目案例 #

储备知识，感觉玩dom主要是玩document这个类

## 1.Dom操作 ##

在js中所有标签都属于节点。dom是一个倒着的树，树根为html标签

### 创建节点 ###

`createElement()`:传入标签类型,创建一个结点  
示例：`var oP = document.createElement('p');`

### 获取节点 ###

这些都是位于document的方法

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>getElementById()</td> 
   <td>通过标签id获得节点</td> 
  </tr> 
  <tr> 
   <td>getElementByClassName()</td> 
   <td>通过标签class名获得节点(注意：获得的class数组)</td> 
  </tr> 
  <tr> 
   <td>getElementByTagName()</td> 
   <td>通过标签类型获得节点(注意：获得的是标签数组)</td> 
  </tr> 
 </tbody> 
</table>

### 常用的节点方法 ###

这个都是节点的方法

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th>功能</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>appendChile()</td> 
   <td>将传入节点加入到标签中</td> 
   <td><code>oDiv.appendChile('oP');</code></td> 
  </tr> 
  <tr> 
   <td>getAttribute()</td> 
   <td>获取标签属性</td> 
   <td><code>oA.getAttribute('href');</code></td> 
  </tr> 
  <tr> 
   <td>setAttribute()</td> 
   <td>设置标签属性</td> 
   <td><code>oA.setAttribute('href','https://www.baidu.com');</code></td> 
  </tr> 
  <tr> 
   <td>removeAttribute()</td> 
   <td>删除标签属性</td> 
   <td><code>oA.removeAttribute('href');</code></td> 
  </tr> 
  <tr> 
   <td>removeChild()</td> 
   <td>删除节点下的标签</td> 
   <td><code>oDiv.removeChild(oP);</code></td> 
  </tr> 
 </tbody> 
</table>

### 设置节点内容 ###

`innerHTML`:将内容解析HTML脚本写入标签内  
示例：`oP.innerHTML = i <strong>love</strong> you`

`innerText`:将内容以文本的形式写入标签内  
示例：`oP.innerHTML = i love you`

注意：`innerHTML`可以解析标签，`innerText`将内容原封不动的填入标签内

设置元素id:`oP.id='op1';`  
设置类名class:`oP.className='para1';`

### 设置style属性 ###

示例：`oP.style.backgroundColor = 'blue';`  
注意：style属性内的用-表示的，在js中全部变为驼峰式写法，而且设置属性要用引号引起来

例如设置字体大小  
在css中：`font-size = 16px;`  
在js中：`oP.style.fontSize = '16px';`

## 2.项目案例 ##

### 2.1用js在网页上写一个hello world ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>写一个hello world</title>
    </head>
    <body>
    
    </body>
    <script type="text/javascript">
        var oP = document.createElement('p');
        var body = document.getElementsByTagName('body');
        oP.innerHTML = 'hello world';
        body[0].appendChild(oP);
    </script>
    </html>

### 2.2模态框案例 ###

其实，就是运用`btn.onclick`将单击事件的函数改为新的匿名函数。单击一次，就调用一次对象下面的`onclick`方法

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模态框案例</title>
        <style type="text/css">
            *{
                padding: 0;
                margin:0;
            }
            html,body{
                height: 100%;
            }
            #wrapper{
                width:100%;
                height: 100%;
                background-color: rgba(0,0,0,.3);
            }
            #p1{
                position: relative;
                top:150px;
                width:400px;
                height: 200px;
    
    
                text-align: center;
                line-height: 200px;
    
                margin:auto;
                background-color: white;
            }
            #span1{
                position: absolute;
                right: 0;
                top:0;
    
                width: 30px;
                height: 30px;
    
                font-size: 20px;
                line-height: 30px;
                text-align: center;
    
                color: #ffffff;
                background-color: red;
    
            }
        </style>
    </head>
    <body>
    
            <button id="btn">点我一下</button>
    </body>
    <script type="text/javascript">
        /*思路：
        * 1.创建一个div盒子，设置好属性
        * 2.添加p标签和span标签，分别设置好位置，分别插入到div标签里
        * 3.定义button单击事件
        * */
    
    
        var oDiv = document.createElement('div'); //创建一个盒子
        var oP = document.createElement('p');
        var oSpan = document.createElement('span');
        var btn = document.getElementById('btn');
        var body = document.getElementsByTagName('body');
    
        btn.onclick = function () {
    
    
            oP.innerText = 'This is True music';
            oSpan.innerText = 'X';
    
            oDiv.appendChild(oP);
            oP.appendChild(oSpan);
    
            oDiv.id = 'wrapper';
            oP.id = 'p1';
            oSpan.id = 'span1';
    
            body[0].insertBefore(oDiv,btn);
        }
    
        oSpan.onclick = function(){
            body[0].removeChild(oDiv);
        }
    
    
    </script>
    </html>

### 2.3点击有惊喜 ###

这个例子，主要就是用计数器记录点击次数，每点击一次标签，就会调用一次该函数，计数器加1，从而控制标签颜色和文字。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>点击有惊喜呦</title>
        <style type="text/css">
            *{
                padding:0;
                margin: 0;
            }
            #surprised{
                width:400px;
                height: 200px;
    
                font-size: 30px;
                text-align: center;
                line-height: 200px;
    
                margin: 20px auto;
                color: white;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id="surprised">
            点击有惊喜呦！！！
        </div>
    </body>
    <script type="text/javascript">
        var oDiv = document.getElementById('surprised');
        var clickTimer = 0;
        oDiv.onclick = function () {
            switch(clickTimer % 4){
                case 1:
                    this.style.backgroundColor = 'green'; //this在这里就是指当点击事件的对象oDiv
                    this.innerText = '再次点击试试';
                    break;
                case 2:
                    this.style.backgroundColor = 'orange';
                    this.innerText = '哈哈，骗你的';
                    break;
                case 3:
                    this.style.backgroundColor = 'red';
                    this.innerText = '真的没了！！！';
                    break;
                default:
                    this.style.backgroundColor = 'blue';
                    this.innerText = '点击有惊喜呦！！！';
            }
            clickTimer++;
        }
    </script>
    </html>

### 2.4制作一个简易留言板 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>留言板</title>
        <style type="text/css">
        </style>
    
    </head>
    <body>
    <h1>简易留言板</h1>
    <div class="wrapper">
        <ul id="words"></ul>
    </div>
    <textarea id="msg"></textarea>
    <button id="btn1">留言</button>
    <button id="btn2" onclick="sum()">统计</button>
    </body>
    <script type="text/javascript">
        //ul 是用来存储留言记录
        var ul = document.getElementById('words');
        var msg = document.getElementById('msg');
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');
        var liCount = 0; //用来记录留言数目的
        btn1.onclick = function () {
            if(!msg.value){
                alert('留言板里没有内容')
            }else{
                /*将留言插入顶部的具体方法
                *1.判断ul中有无元素，没有则使用append，有则使用insertbefore
                * 2.插入信息同时插入一个span标签，用来设置关闭按钮
                * */
                var li = document.createElement('li');
                li.innerHTML = msg.value + '  <span>X</span>';
                if(liCount == 0)
                {
                    ul.appendChild(li);
                    liCount++;
                }else{
                    ul.insertBefore(li,ul.childNodes[0]);
                    liCount++;
                }
                msg.value = '';
            }
            oSpans = document.getElementsByTagName('span');
            for(var i = 0;i < oSpans.length;i++){
                oSpans[i].onclick = function(){
                    ul.removeChild(this.parentNode);
                    liCount--;
                }
            }
    
        };
        function sum() {
            alert('一共有'+liCount+'条信息');
        }
    
    
    </script>
    </html>

通过这个简易留言板例子，  
第一，不要取消margin，padding，否则h1标题没有内边距，很难看；  
第二，设置span标签点击事件必须在btn1按钮内，因为js里面代码是从上向下执行的，btn.onclick就是添加调用方法；如果直接把span这段代码放在下面，因为刚开始没有spans标签，也就没有执行这段代码。要是放在btn的onclick里面，每次调用时，就会自动给每个span添加一个调用方法

### 2.5制作选项卡 ###

这个例子主要是用了，将三个p标签隐藏起来，只显示含active类的标签，通过js点击事件，切换p标签之间的显隐达到目的。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>选项卡</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            body{
                height: 100%;
            }
            .wrapper{
                width: 600px;
                border: 1px solid red;
                margin: 30px auto;
            }
            ul{
                list-style: none;
                overflow: hidden;   /*注意要清除浮动*/
            }
            ul a{
                display: block;
                text-decoration: none;
    
                width:200px;
                height: 50px;
    
                text-align: center;
                line-height: 50px;
    
                color: black;
            }
            ul li{
                float: left;
                background-color: rgba(0,0,0,.3);
            }
            p{
                width: 600px;
                height: 150px;
                line-height: 150px;
                text-align: center;
                display: none;
            }
            ul li.active{
                background-color: #ffffff;
            }
            p.active{
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <ul>
                <li class="active"><a href="#" >首页</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">热卖</a></li>
            </ul>
            <p id="home" class="active">首页内容</p>
            <p id="news">新闻内容</p>
            <p id="hotPurchase">热卖内容</p>
        </div>
    </body>
    <script type="text/javascript">
        var lis = document.getElementsByTagName('li');
        var ps = document.getElementsByTagName('p');
        for(var i = 0;i < lis.length;i++){
            lis[i].index = i;   //这个用来记录每个标签的遍历位置，不用this，这里this指代的应该是window
            lis[i].onclick = function () {
                /*思路
                * 1.清除所有标签上的active
                * 2.将单击的li和p标签都添加active属性
                * */
                //清空class
                for(var j = 0;j < lis.length;j++){
                    lis[j].className = '';
                    ps[j].className = '';
                }
                //注意：这有个坑，不能跳！！！不能用遍历的i，要用this下的属性index
                this.className = 'active';
                ps[this.index].className = 'active';
            }
        }
    </script>
    </html>

这里要注意，在378行不能用i来代表标签的索引，(因为i的值在不断变化,遍历结束时，这里i最终值为4，即当触发单击事件时，获取的i的值为4，而不是当初遍历中i的值)。他们得到i都是引用哦，不是一个纯数字。

### 2.6淘宝搜索框制作 ###

这个例子主要用到了`input`和`label`两个标签，以及js的`oninput`来实现的

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>淘宝搜索框</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                width: 800px;
                margin: 30px auto;
            }
            ul{
                list-style: none;
                overflow: hidden;
            }
            ul li{
                float: left;
                width: 150px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                background-color: #fff;
            }
            li a{
                text-decoration: none;
                color: red;
            }
            li.active{
                background-color: red;
    
            }
            li.active a{
                color: #ffffff;
            }
    
            .search{
                margin: 20px 0;
                position: relative;
            }
            #txt{
                display: block;
                outline: none;
                width: 800px;
                height: 50px;
                position: absolute;
                border:3px solid orange;
                border-radius: 10px;
            }
            #lab{
                display: block;
                position: absolute;
                top:15px;
                left:30px;
                font-size: 20px;
                color: rgba(0,0,0,.5);
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <ul>
                <li class="active"><a href="#">宝贝</a></li>
                <li><a href="#">天猫</a></li>
                <li><a href="#">店铺</a></li>
            </ul>
            <div class="search">
                <input type="text" id="txt">
                <label for="txt" id="lab">请输入要购买的商品</label>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var lis = document.getElementsByTagName('li');
        for(var i = 0;i < lis.length;i++){
            lis[i].onclick = function () {
                for(var j = 0;j < lis.length;j++){
                    lis[j].className = '';
                }
                this.className = 'active';
    
            }
        }
        
        var txt = document.getElementById('txt');
        var lab = document.getElementById('lab');
        //oninput函数功能是，当点击输入框时触发的事件
        txt.oninput = function () {
            if(this.value == ''){  //这里this指代的是txt
                lab.style.display = 'block';
            }
            else
            {
                lab.style.display = 'none';
            }
        }
    
    </script>
    </html>

刚开始，测试时候，发现输入框无法输入；后来仔细检查了一遍，发现his.value == ''写成了his.value = ‘’，导致每次输入时，都会给输入框自动赋值空字符

### 2.7动态时间制作 ###

这里主要用了`setInterval`定时器函数,每隔一秒执行一次函数，这个函数作用是获得最新时间，写入`p`标签中

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动态时间制作</title>
    </head>
    <body>
    
    </body>
    <script type="text/javascript">
        var oP = document.createElement('p');
        var body = document.getElementsByTagName('body');
        body[0].appendChild(oP);
        //创建一个时间对象，得到年月日，时分秒
    
        setInterval(function(){
            var myDate = new Date();
            var y = myDate.getFullYear();
            var m = myDate.getMonth();
            var d = myDate.getDay();
    
            var h = myDate.getHours();
            var minu =myDate.getMinutes();
            var s = myDate.getSeconds();
            oP.innerHTML = '今天是 '+ y +'年 '+m+'月 '+d+'日  '+h+':'+twoNum(minu)+':'+twoNum(s);
        },1000);
    
        function twoNum(n){
            return n > 9  ? n:'0'+n;
        }
        
    </script>
    </html>

注意：获得时间的操作必须写在函数内，否则该变量的值不会更新，只会一直重复写入相同的值  
三元表达式  
`return n > 9 ? n:'0'+n;`  
等同于

if(n < 9)
    {
        return '0'+ n;
    }
    else {
        return n;
    }

### 2.8匀速运动 ###

通过定时器函数`setInterval`函数和清除定时器函数`clearInterval`。两个函数实现的，主要思想时，每执行一次定时器，改变一次`left`数字达到看上去小方块在移动的效果

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>匀速运动案例</title>
        <style type="text/css">
            #diamond{
                width:100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0px;
                top:50px;
                }
    
        </style>
    </head>
    <body>
    <button id="btn">运动吧！小方块</button>
    <div id="diamond"></div>
    </body>
    <script type="text/javascript">
        var btn = document.getElementById('btn');
        var dia = document.getElementById('diamond');
        var count = 0;
        btn.onclick = function () {
            time = setInterval(function(){
                //注意这里要带单位px
                count += 10;
                if(count % 800 == 0){
                    count = 0;
                    clearInterval(time);  //运动到800px关闭定时器
                }
                dia.style.left = count + 'px';
        },10)
        };
    </script>
    </html>

注意：`clearInterval`清除定时器函数必须要接受一个值，这个值正是定时器返回的值，`count += 10`这行代码可以通过改变右值改变小方块运动速度。

### 2.9设置五秒关闭广告 ###

这个例子主要用了定时器，和固定定位相关的知识，5s秒后自动关闭广告。`window.onload`这个函数的功能是，加载页面时自动运行相应的函数

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>设置5s关闭广告</title>
        <style type="text/css">
            img{
               width: 200px;
                height: 800px;
                position: fixed;
                top: 0;
            }
            #pict1{
                right: 0;
            }
            #pict2{
                left: 0;
            }
            p{
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <img src="ad-one.jpg" alt=""  id="pict1">
            <img src="ad-two.jpg" alt=""  id="pict2">
        </div>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            var imgs = document.getElementsByTagName('img');
            setTimeout(function () {
                imgs[0].style.display = 'none';
                imgs[1].style.display = 'none';
            },5000)
        };
    
    </script>
    </html>

难度不大，之后写了个升级版

### 2.10设置五秒关闭广告(升级版) ###

设置一个定时器，在网页上显示倒计时后，再显示关闭x，设定单击事件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>设置5s关闭广告</title>
        <style type="text/css">
            img{
               width: 200px;
                height: 800px;
                position: fixed;
                top: 0;
            }
            /*.pict{*/
                /*position: relative;*/
            /*}*/
            .pict1{
                top: 0;
                left: 0;
            }
            .pict2{
                top: 0;
                right: 0;
            }
            p{
                text-align: center;
                font-size: 30px;
            }
            span{
                position: fixed;
                display: block;
                width: 50px;
                height: 50px;
                text-align: center;
                ;line-height: 50px;
                background-color:rgba(0,0,0,.5);
                z-index: 10;
                color: #ffffff;
            }
            .span2{
                top:750px;
                right: 150px;
            }
            .span1{
                top:750px;
                left: 150px;
            }
        </style>
    </head>
    <body>
            <div class="pict">
                <span class="span1"></span>
                <img class="pict1" src="ad-one.jpg" alt="">
            </div>
            <div class="pict">
                <span class="span2"></span>
                <img class="pict2" src="ad-two.jpg" alt="">
            </div>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
            <p>性感美女，在线发牌</p>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            var picts = document.getElementsByClassName('pict');
            var spans = document.getElementsByTagName('span');
            var count = 5;
            time = setInterval(function(){
                if(count == 0){
                    for(var i = 0;i < spans.length;i++)
                    {
                        spans[i].index = i;
                        spans[i].innerText = 'X';
                        spans[i].onclick = function(){
                            picts[this.index].style.display = 'none';
                        };
                    }
                    clearInterval(time);
                }
                else{
                    spans[0].innerText = count;
                    spans[1].innerText = count;
                    count -= 1;
                }
    
            },1000);
        };
    
    </script>
    </html>

这里主要注意的地方是，在`for`循环中如果要设置单击事件，不要用`i`做索引,所有单击事件中的`i`是`for`循环后的值，而不是每次循环的值。

### 2.11小米滚动 ###

这里主要用`overflow`用来隐藏图片超过盒子部分。然后通过定位，控制`top`坐标数值，使其在盒子里垂直移动

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米滚动</title>
        <style type="text/css">
            #box{
                position: relative;
                margin: 50px auto;
                width: 890px;
                height: 400px;
                overflow: hidden;
            }
            img{
                position: absolute;
            }
            span{
                position: absolute;
                display: block;
                width: 890px;
                height: 200px;
                background-color: transparent;
            }
            #upSpan{
                top:0;
            }
            #downSpan{
                bottom:0;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <img src="ad-one.jpg" alt="" id="img1">
            <span id="upSpan"></span>
            <span id="downSpan"></span>
        </div>
    </body>
    <script type="text/javascript">
        var downSpan = document.getElementById('downSpan');
        var upSpan = document.getElementById('upSpan');
        var img = document.getElementById('img1');
        var count = 0;
        var time = null;  //注意time要声明变量
        //这个upSpan标签在图片上，让图片向上滚动，top越来越小
        upSpan.onmouseover = function(){
                clearInterval(time);
                time = setInterval(
                 function(){
                     count -= 3;//  1334-400  top比最低端的-934px大，就可以继续减小，直到底部
                     count >= -934 ? img.style.top = count + 'px':clearInterval(time);
                 }
                ,30)
        };
        //这个downSpan标签在图片下面，让图片向下滚动，top越来越大
        downSpan.onmouseover = function(){
            clearInterval(time);    //注意，这里必须要清空定时器，否则两个定时器一起运行会引起冲突
            time = setInterval(
             function(){
                 count += 3;
                 //向下滚，top数值越来越大，直到最顶端0
                 count < 0 ? img.style.top = count + 'px':clearInterval(time);
             }
            ,30)
        };
    
    </script>
    </html>

这里注意的地方是，每次调用`onmouseover`时，要清除之前的定时器，防止干扰下次操作。而且图片移动到顶端和低端，要注意好终止坐标的位置。

### 2.12无缝轮播图 ###

这个案例主要运用盒子和`ul`之间定位，通过定时器，让标签`left`坐标不断减小，达到`ul`向左移动的效果

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>无缝轮播图</title>
        <style type="text/css">
            *{
                padding:0;
                margin: 0;
            }
            .wrapper{
                position: relative;
                width: 800px;
                height: 300px;
                margin:40px auto;
                background-color: red;
                overflow: hidden;
            }
            ul{
                width: 200%;
                position: absolute;
                top:0;
                left: 0;
                list-style: none;
            }
            ul li{
                float: left;
            }
            img{
                height: 300px;
                width: 400px;
            }
        </style>
    </head>
    <body>
    <div class="wrapper">
        <ul id="picts">
            <li><img src="ad-one.jpg" alt=""></li>
            <li><img src="ad-two.jpg" alt=""></li>
            <li><img src="ad-three.jpg" alt=""></li>
            <li><img src="ad-four.jpg" alt=""></li>
        </ul>
    </div>
    </body>
    <script type="text/javascript">
        var ul = document.getElementById('picts');
        var count = 0;
        var time = null;
        function pictureMove(){
            count -= 1;
            if(count <= -800){
                count = 0;
            }
            ul.style.left = count + 'px';
        }
        time = setInterval(pictureMove,10);
    
        ul.onmousemove = function(){
            clearInterval(time);
        };
        ul.onmouseout = function () {
            time = setInterval(pictureMove,10);
        }
    </script>
    </html>

这里有几个注意点是，`ul`标签宽度肯定要比盒子宽，这样可以使里面所有`li`标签浮动时，不会有`li`标签被挤到下一层去。`onmousemove`效果是鼠标移动到标签上执行的函数，`onmouseout`效果是鼠标移除标签时执行的函数。这里还要注意一点是，标签移到最右端要有个判断，让其坐标归0，从头开始再次移动