淘宝滑动界面

来源：互联网发布：java 打印byte数组编辑：程序博客网时间：2024/06/14 13:00
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        *{            padding: 0;            margin: 0;            margin: 0 auto;        }        .dd{            width: 350px;            height: 220px;            margin-top: 100px;            border: 1px pink solid;            overflow: hidden;/*图片隐藏*/        }        a{            color: #000;            text-decoration: none;        }        .center img{            width: 250px;            height: 220px;        }        ul{            float: left;            list-style: none;        }        .left li, .right li{            background: url(img/lili.jpg) repeat-x;            border: 1px red solid;        }        .left li a:hover, .right li a:hover{            background: url(img/abg.gif) repeat-x;        }        .center{            border-left: 1px pink solid;            border-right: 1px pink solid;        }    </style>    <script src="js/jquery-1.11.1.min.js"></script>    <script>        jQuery(function(){            //获取绑mouseenter            $(".left li").mouseenter(function(){                //鼠标放入两侧的li中，让中间的ul中对应索引值的li显示出来，其他的隐藏。（右侧的li要+9）                $(".center li").eq($(this).index()).show().siblings("li").hide();            });            $(".right li").mouseenter(function(){                $(".center li:eq("+($(this).index()+9)+")").show().siblings("li").hide();            });        });    </script></head><body>    <div class="dd">        <ul class="left">            <li><a href="#">女靴</a></li>            <li><a href="#">雪地靴</a></li>            <li><a href="#">冬裙</a></li>            <li><a href="#">呢大衣</a></li>            <li><a href="#">毛衣</a></li>            <li><a href="#">棉服</a></li>            <li><a href="#">女裤</a></li>            <li><a href="#">羽绒服</a></li>            <li><a href="#">牛仔裤</a></li>        </ul>        <ul class="center" id="center">            <li><a href="#"><img src="img/女靴.jpg"/></a></li>            <li><a href="#"><img src="img/雪地靴.jpg"/></a></li>            <li><a href="#"><img src="img/冬裙.jpg"/></a></li>            <li><a href="#"><img src="img/呢大衣.jpg"/></a></li>            <li><a href="#"><img src="img/毛衣.jpg"/></a></li>            <li><a href="#"><img src="img/棉服.jpg"/></a></li>            <li><a href="#"><img src="img/女裤.jpg"/></a></li>            <li><a href="#"><img src="img/羽绒服.jpg"/></a></li>            <li><a href="#"><img src="img/牛仔裤.jpg"/></a></li>            <li><a href="#"><img src="img/女包.jpg"/></a></li>            <li><a href="#"><img src="img/男包.jpg"/></a></li>            <li><a href="#"><img src="img/登山鞋.jpg"/></a></li>            <li><a href="#"><img src="img/皮带.jpg"/></a></li>            <li><a href="#"><img src="img/围巾.jpg"/></a></li>            <li><a href="#"><img src="img/皮衣.jpg"/></a></li>            <li><a href="#"><img src="img/男毛衣.jpg"/></a></li>            <li><a href="#"><img src="img/男棉服.jpg"/></a></li>            <li><a href="#"><img src="img/男靴.jpg"/></a></li>        </ul>        <ul class="right">            <li><a href="#">女包</a></li>            <li><a href="#">男包</a></li>            <li><a href="#">登山鞋</a></li>            <li><a href="#">皮带</a></li>            <li><a href="#">围巾</a></li>            <li><a href="#">皮衣</a></li>            <li><a href="#">男毛衣</a></li>            <li><a href="#">男棉服</a></li>            <li><a href="#">男靴</a></li>        </ul>    </div></body>
阅读全文
0 0