几个网页手风琴效果分析

来源：互联网发布：人工智能机器人取代编辑：程序博客网时间：2024/06/07 18:33

代码都来自w3cfuns

第一个，#号后为注释代码

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>jQuery+Css3实现手风琴</title><style>body{padding:0;margin:0;font:normal 14px/24px "\5FAE\8F6F\96C5\9ED1";color:#333;}  # 设置body得样式ul,li{padding:0;margin:0}     # ul li的外边距和内边距为0，防止浏览器加载默认样式img{border:none;vertical-align:top;} # 设置img得样式为没有边框，向上对齐li{list-style:none;}          # 设置li得属性.box{width:600px;height:360px;margin:20px auto;position:relative;overflow:hidden;} # box的高度360px,宽度600px, 外边距上下20px，居中，相对定位，隐藏掉溢出.box ul li{width:400px;height:360px;display:block;position:absolute;top:0;transition:left .5s ease-out;} # box里得ul和li的属性，关键是transition这个css3得属性带来得宽度得渐变效果.box ul li:nth-child(1){left:0;background:#AAA;}   # 给li的父元素得子元素设置左边距离和背景.box ul li:nth-child(2){left:100px;background:#BBB;}.box ul li:nth-child(3){left:200px;background:#CCC;}.box ul li:nth-child(4){left:300px;background:#DDD;}.box ul li:nth-child(5){left:400px;background:#EEE;}.box ul li:nth-child(6){left:500px;background:#F3F3F3;}</style></head><body><div class="box" id="box">    <ul>        <li c="0" d="0"></li>        <li c="50px" d="350px"></li>  # 这里得c和d是用来当鼠标移入区域，li left的值        <li c="100px" d="400px"></li> # 因为要实现渐变效果，区域收缩或者扩大时，宽度时由left控制的        <li c="150px" d="450px"></li> # c是往前收缩宽度，d是往后收缩得宽度        <li c="200px" d="500px"></li>        <li c="250px" d="550px"></li>    </ul></div></body></html><script src='http://static.w3cfuns.com/js/jQuery/library/jquery-1.7.2.min.js?v=20121228'></script><script>var adMarquee;$(function(){        Marquee()        $("#box").mouseout(function(){                $("#box ul li").each(function(){                        $(this).attr("style","")                })        })})function Marquee(){        $("#box li").mouseover(function(){         # 当鼠标移入li区域时，li区域后面得li都根据d值往后收缩                $(this).nextAll("li").each(function() {                        $(this).css("left",$(this).attr("d"))        });                $(this).prevAll("li").each(function() { # li区域前面的li都根据c值往前收缩            $(this).css("left",$(this).attr("c"))        });                $(this).css("left",$(this).attr("c"))   # 当前li区域也根据C值往钱收缩。        })}</script>

这个实现主要是定义了一排li，宽度都是400px。但是因为设置了绝对定位和left得值，使得后面的li覆盖了前面的li300px。又因为设置了溢出隐藏，所以最后一个li的300px我们看不到。

第二个

<!DOCTYPE html><html> <head>   <meta http-equiv="content-type" content="text/html;charset=utf-8" />  <meta name="author" content="" />  <meta name="keywords" content="" />  <meta name="description" content="" />  <title> new document </title>  <style>    .accordion{width:300px;height:360px;font-size:14px;line-height:2.2em;margin:30px auto;padding:10px;list-style-type:none;border:1px solid #CCC;cursor:default;}    .accordion h3{margin:0 0 10px;font-size:16px;text-indent:2em;background-color:#F2F2F2;}    .accordion li div{height:0;padding:0 20px;overflow:hidden;-moz-transition:height 0.5s ease;-webkit-transition:height 0.5s ease;transition:height 0.5s ease;}  # 使用transition属性在改变时有动画效果    .accordion:hover li:first-child div{height:0;} # 当鼠标移入accordion时让第一个li的高度变成0    .accordion li:first-child div,          .accordion li:first-child:hover div,    .accordion li:hover div{    # 默认第一个li或者鼠标移入了一个li时把里面得div高度设置为200px       height:200px;           }  </style>   </head> <body>  <ul class="accordion">        <li>            <h3>寄李儋元锡</h3>            <div>              去年花里逢君别，今日花开已一年。 <br />              世事茫茫难自料，春愁黯黯独成眠。 <br />              身多疾病思田里，邑有流亡愧俸钱。 <br />              闻道欲来相问讯，西楼望月几回圆。 <br />            </div>        </li>        <li>            <h3>虞美人</h3>            <div>                 春花秋月何时了，往事知多少。小楼昨夜又东风，故国不堪回首月明中。<br />                 雕栏玉砌应犹在，只是朱颜改。问君能有几多愁，恰似一江春水向东流。            </div>        </li>        <li>            <h3>小重山</h3>            <div>                昨夜寒蛩不住鸣。惊回千里梦，已三更。起来独自绕阶行。人悄悄，帘外月胧明。<br />　　            白首为功名。旧山松竹老，阻归程。欲将心事付瑶琴。知音少，弦断有谁听？            </div>        </li>        <li>            <h3>江城子</h3>            <div>                十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。<br />　　            夜来幽梦忽还乡，小轩窗，正梳妆。相顾无言，惟有泪千行。料得年年肠断处，明月夜，短松冈。            </div>        </li>    </ul> </body></html>

这个代码实现全部基于CSS，算是很简介的了，原理时利用鼠标悬停，默认全部得高度都是0，除了第一个。当有鼠标去悬停时，全部得高度变为0，然后鼠标在那个li上悬停，就把那个高度改成200px。

第三个

<!DOCTYPE html><html> <head>   <meta http-equiv="content-type" content="text/html;charset=utf-8" />  <meta name="author" content="" />  <meta name="keywords" content="" />  <meta name="description" content="" />  <title> new document </title>  <style>    .accordion{width:300px;height:360px;font-size:14px;line-height:2.2em;margin:30px auto;padding:10px;list-style-type:none;border:1px solid #CCC;cursor:default;}    .accordion h3{margin:0 0 10px;font-size:16px;text-indent:2em;background-color:#F2F2F2;}    .accordion li div{height:0;padding:0 20px;overflow:hidden;-moz-transition:height 0.5s ease;-webkit-transition:height 0.5s ease;transition:height 0.5s ease;}      .accordion .now div{       height:200px;           }  </style>  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <body>  <ul class="accordion">        <li  class="now">            <h3>寄李儋元锡</h3>            <div>              去年花里逢君别，今日花开已一年。 <br />              世事茫茫难自料，春愁黯黯独成眠。 <br />              身多疾病思田里，邑有流亡愧俸钱。 <br />              闻道欲来相问讯，西楼望月几回圆。 <br />            </div>        </li>        <li>            <h3>虞美人</h3>            <div>                 春花秋月何时了，往事知多少。小楼昨夜又东风，故国不堪回首月明中。<br />                 雕栏玉砌应犹在，只是朱颜改。问君能有几多愁，恰似一江春水向东流。            </div>        </li>        <li>            <h3>小重山</h3>            <div>                昨夜寒蛩不住鸣。惊回千里梦，已三更。起来独自绕阶行。人悄悄，帘外月胧明。<br />　　            白首为功名。旧山松竹老，阻归程。欲将心事付瑶琴。知音少，弦断有谁听？            </div>        </li>        <li>            <h3>江城子</h3>            <div>                十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。<br />　　            夜来幽梦忽还乡，小轩窗，正梳妆。相顾无言，惟有泪千行。料得年年肠断处，明月夜，短松冈。            </div>        </li>    </ul>    <script type="text/javascript">      $('.accordion').on('mouseenter', 'li', function(event) {          $(this).addClass('now').siblings('.now').removeClass('now')      });    </script> </body></html>

这个代码就是把第二个得悬停触发改成了jquery来写。当鼠标悬停时，给鼠标悬停得li加上now属性，然后把其他带有now属性的元素的得now属性都去掉。

0 0