织梦二次开发,二次开发,李丕长,网站php二次开发,做网站,模板设计,jquery效果,jquery特效

当前位置: 主页 > 网友推荐 >

时光轴的制作

时间:2013-09-15 12:46作者:露馨儿 点击:
用HTML+CSS+Javascript来实现facebook和人人网的时光轴效果。运用瀑布流js来实现两侧平铺效果,使用定位来使时光轴标志按时间显示。

HTML代码: 

<div class="honourlist"> 

          <!-- TimeLine导航 -->
          <div class="timeline_container">
            <div class="timeline">
              <div class="plus"></div>
            </div>
          </div>
          <div class="item">
            <div class="inner">
              <h2>校园歌舞大赛喜获一等奖</h2>
              <strong>经过一个月的辛苦排练,7月26日在烟台市芝罘区举行的校园歌舞大赛
              中,我班级李冬梅,张萌等同学经过自身不懈的努力,克服重重困难,萌等同学经过自身不懈的努力,克服重萌等同学经过自身不懈的努力,克服重
              最终获得市级一等奖,为学校赢得荣誉。他们是最棒的!!!</strong> <span class="footer">韩舒婷发表于2013年7月27日</span> </div>
          </div>
          <div class="item">
            <div class="inner">
              <ul class="img_list">
                <li><img width="64" height="84" /><span>周美华</span></li>
                <li><img width="64" height="84" /><span>周美华</span></li>
                <li><img width="64" height="84" /><span>周美华</span></li>
                <li><img width="64" height="84" /><span>周美华</span></li>
                <li><img width="64" height="84" /><span>周美华</span></li>
                <div class="clearfix"></div>
              </ul>
              <h2>校园歌舞大赛喜获一等奖</h2>
              <strong>经过一个月的辛苦排练,7月26日在烟台市芝罘区举行的校园歌舞大赛
              中,我班级李冬梅,张萌等同学经过自身不懈的努力,克服重重困难,
              最终获得市级一等奖,为学校赢得荣誉。他们是最棒的!!!</strong> <span class="footer">韩舒婷发表于2013年7月27日</span> </div>
          </div>
          <div class="item">
            <div class="inner">
              <h2>校园歌舞大赛喜获一等奖</h2>
              <strong>经过一个月的辛苦排练,7月26日在烟台市芝罘区举行的校园歌舞大赛
              中,我班级李冬梅,张萌等同学经过自身不懈的努力,克服重重困难,
              最终获得市级一等奖,为学校赢得荣誉。他们是最棒的!!!</strong> <span class="footer">韩舒婷发表于2013年7月27日</span> </div>
          </div>
          <div class="item">
            <div class="inner">
              <h2>校园歌舞大赛喜获一等奖</h2>
              <strong>经过一个月的辛苦排练,7月26日在烟台市芝罘区举行的校园歌舞大赛
              中,我班级李冬梅,张萌等同学经过自身不懈的努力,克服重重困难,
              最终获得市级一等奖,为学校赢得荣誉。他们是最棒的!!!</strong> <span class="footer">韩舒婷发表于2013年7月27日</span> </div>
          </div>
          <div class="item">
            <div class="inner">
              <h2>校园歌舞大赛喜获一等奖</h2>
              <strong>经过一个月的辛苦排练,7月26日在烟台市芝罘区举行的校园歌舞大赛
              中,我班级李冬梅,张萌等同学经过自身不懈的努力,克服重重困难,
              最终获得市级一等奖,为学校赢得荣誉。他们是最棒的!!!</strong> <span class="footer">韩舒婷发表于2013年7月27日</span> </div>
          </div>
          <div class="item">
            <div class="inner">
              <h2>校园歌舞大赛喜获一等奖</h2>
              <strong>经过一个月的辛苦排练,7月26日在烟台市芝罘区举行的校园歌舞大赛
              中,我班级李冬梅,张萌等同学经过自身不懈的努力,克服重重困难,
              最终获得市级一等奖,为学校赢得荣誉。他们是最棒的!!!</strong> <span class="footer">韩舒婷发表于2013年7月27日</span> </div>
          </div>
        </div>
CSS代码:
 
@charset "utf-8";
/* CSS Document */
.honourlist {
margin:0 auto;
}
.item {
position: relative;
float: left;
margin: 0 29px 20px;
border: 1px solid #d7d6d6;
background: url(../images/left_quote.png) 8px 10px no-repeat, url(../images/right_quote.png) right bottom no-repeat;
}
.inner {
margin: 10px 0;
padding: 30px 45px 45px;
width: 340px;
}
.inner h2 {
font-weight:bold;
}
.inner strong {
color:#8e8b8b;
}
/*timeline navigatior css*/
.timeline_container {
width: 16px;
text-align: center;
margin: 0 auto;
cursor: pointer;
display: block;
}
.timeline {
margin: 0 auto;
background-color: #ff7878;
display: block;
float: left;
height: 100%;
left: 489px;
position: absolute;
width: 4px;
}
.timeline div.plus {
width: 14px;
height: 14px;
position: relative;
left: -6px;
}
.rightCorner {
content: '';
position: absolute;
left: -37px;
top: 10px;
width:42px;
height:35px;
background:url(../images/right_jiao.png) no-repeat;
}
.leftCorner {
content: '';
position: absolute;
right: -38px;
top: 10px;
width:42px;
height:35px;
background:url(../images/left_jiao.png) no-repeat;
}
span.footer {
position:absolute;
left:0;
bottom:0;
width:431px;
height:30px;
line-height:30px;
text-indent:20px;
color:#fff;
background:#4582c5;
z-index:10;
font-size:12px;
}
.img_list li {
float:left;
margin:0 10px 10px 0;
}
.img_list li img {
width:64px;
height:84px;
}
.img_list li span {
display:block;
width:64px;
text-align:center;
}
 
Javascript代码:
 
引用瀑布流Javascript:
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript" >
$(function(){
// masonry plugin call
$('.honourlist').masonry({itemSelector : '.item',});
function Arrow_Points(){
var s = $(".honourlist").find(".item");
$.each(s,function(i,obj){
 var posLeft = $(obj).css("left");
 if(posLeft == "0px"){
html = "<span class='leftCorner'></span>";
$(obj).prepend(html);
 } else {
html = "<span class='rightCorner'></span>";
$(obj).prepend(html);
 }
});
  }
Arrow_Points();
});
</script>
 

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
露馨儿 查看详细资料 发送留言 加为好友 用户等级:高级会员 注册时间:2013-06-08 09:06 最后登录:2014-02-20 15:02
无觅相关文章插件,快速提升流量