戏剧 taobao

来源：互联网发布：php redis缓存周期编辑：程序博客网时间：2024/04/30 20:15
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../jquery-1.11.1/jquery-1.11.1.js"></script>    <style>        .wrap{            width: 660px;            height: 620px;            background: #000000;            margin: 0 auto;            padding: 2px;        }        li{            float: left;            list-style: none;            margin: 2px;        }    </style>    <script>        $(document).ready(function () {            $("li").mouseenter(function () {                $(this).css("opacity",1).siblings().css("opacity",0.8);            })            //给div添加离开的事件            $("div").mouseleave(function () {                $(this).children("ul").eq(0).children("li").css("opacity",1);            })        })    </script></head><body><div class="wrap">    <ul>        <li>            <img src="images/01.jpg">        </li>        <li>            <img src="images/02.jpg">        </li>        <li>            <img src="images/03.jpg">        </li>        <li>            <img src="images/04.jpg">        </li>        <li>            <img src="images/05.jpg">        </li>        <li>            <img src="images/06.jpg">        </li>        <li>            <img src="images/07.jpeg" style="width: 200px; height: 186px">        </li>        <li>            <img src="images/08.jpeg" style="width: 200px; height: 186px">        </li>        <li>            <img src="images/09.jpg" style="width: 200px; height: 186px">        </li>    </ul></div></body></html>淘宝<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        * {            margin: 0;            padding: 0;            font-size: 12px;        }        ul {            list-style: none;        }        a {            text-decoration: none;        }        .wrapper {            width: 300px;            height: 248px;            margin: 100px auto 0;            border: 1px solid pink;            overflow: hidden;        }        #left, #center, #right {            float: left;        }        #left li, #right li {            background: url(img/lili.jpg) repeat-x;        }        #left li a, #right li a {            display: block;            width: 48px;            height: 27px;            border-bottom: 1px solid pink;            line-height: 27px;            text-align: center;            color: black;        }        #left li a:hover, #right li a:hover {            background-image: url(img/abg.gif);        }        #center {            border-left: 1px solid pink;            border-right: 1px solid pink;        }    </style>    <script src="../jquery-1.11.1/jquery-1.11.1.min.js"></script>    <script>        jQuery(function () {            //需求：鼠标放入两侧的li中，让中间的ul中对应索引值的li显示出来，其他的隐藏。（右侧的li要+9）            //左侧先绑。获取绑mouseenter            $("#left li").mouseenter(function () {                //显示对应索引值的中间的li                //alert($(this).index());  获取索引值                $("#center li").eq($(this).index()).show().siblings("li").hide();            });            //右侧            $("#right li").mouseenter(function () {                //显示对应索引值的中间的li                //alert($(this).index());  获取索引值                $("#center li:eq("+($(this).index()+9)+")").show().siblings("li").hide();            });        });    </script></head><body><div class="wrapper">    <ul id="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 id="center">        <li><a href="#"><img src="img/女靴.jpg" width="200" height="250"/></a></li>        <li><a href="#"><img src="img/雪地靴.jpg" width="200" height="250"/></a></li>        <li><a href="#"><img src="img/冬裙.jpg" width="200" height="250"/></a></li>        <li><a href="#"><img src="img/呢大衣.jpg" width="200" height="250"/></a></li>        <li><a href="#"><img src="img/毛衣.jpg" width="200" height="250"/></a></li>        <li><a href="#"><img src="img/棉服.jpg" width="200" height="250"/></a></li>        <li><a href="#"><img src="img/女裤.jpg" width="200" height="250"/></a></li>        <li><a href="#"><img src="img/羽绒服.jpg" width="200" height="250"/></a></li>        <li><a href="#"><img src="img/牛仔裤.jpg" width="200" height="250"/></a></li>        <li><a href="#"><img src="img/女包.jpg" width="200" height="250"/></a></li>        <li><a href="#"><img src="img/男包.jpg" width="200" height="250"/></a></li>        <li><a href="#"><img src="img/登山鞋.jpg" width="200" height="250"/></a></li>        <li><a href="#"><img src="img/皮带.jpg" width="200" height="250"/></a></li>        <li><a href="#"><img src="img/围巾.jpg" width="200" height="250"/></a></li>        <li><a href="#"><img src="img/皮衣.jpg" width="200" height="250"/></a></li>        <li><a href="#"><img src="img/男毛衣.jpg" width="200" height="250"/></a></li>        <li><a href="#"><img src="img/男棉服.jpg" width="200" height="250"/></a></li>        <li><a href="#"><img src="img/男靴.jpg" width="200" height="250"/></a></li>    </ul>    <ul id="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></html>
阅读全文
0 0