几个网页手风琴效果分析

代码都来自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属性都去掉。

mpr0xy

发布了24 篇原创文章 · 获赞 3 · 访问量 4万+

私信关注

几个网页手风琴效果分析

猜你喜欢