素材牛VIP会员

基于jQuery超酷的时间轴特效代码

 所属分类:网页特效-UI/布局/瀑布流,时间日期

 浏览:2067次  评论:1次  更新时间:2016-09-13
牛币素材VIP可免积分下载
基于jQuery超酷的时间轴特效代码兼容IE6
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:Timeline时间轴结合了瀑布流布局,这款时间轴样式非常好看,今天就把它整理出来分享给大家。

详细介绍

使用方法:

引入CSS样式

<link href="Css/style.css" type="text/css" rel="stylesheet">

引入jQuery库文件

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/blog.plug.js"></script>

插件初始化、参数配置

$(document).ready(function() {
  /*时间轴*/
  $('#Container').masonry({itemSelector : '.item'});
	function Arrow_Points(){
	  var s = $("#Container").find(".item");
	  $.each(s,function(i,obj){
		var posLeft = $(obj).css("left");
		if(posLeft == "0px"){
		  html = "<span class='rightCorner'></span>";
		  $(obj).prepend(html);
		} else {
		  html = "<span class='leftCorner'></span>";
		  $(obj).prepend(html);
		}
	  });
	}
	Arrow_Points();
});

HTML结构

<!--ShowMsg-->
<div id="Container">
  <div class="timeline_container">
    <div class="timeline">
      <div class="plus"></div>
      <div class="plus2"></div>
    </div>
  </div>
  <div class="item">
    <h3> <span class="fl">柳州一通网</span> <span class="fr">IP:221.7.207***&nbsp;&nbsp;&nbsp;&nbsp;2013-02-21 08:46:29</span> </h3>
    <p class="con">帮我做的网站很好,很满意<br />支持一下下。。。</p>
    <h4><b>Reply:</b>管理员尚未回复</h4>
  </div>
  <div class="item">
    <h3> <span class="fl">柳州</span> <span class="fr">IP:221.7.207***&nbsp;&nbsp;&nbsp;&nbsp;2013-02-21 08:39:32</span> </h3>
    <p class="con">很有创意</p>
    <h4><b>Reply:</b>管理员尚未回复</h4>
  </div>
  <div class="item">
    <h3> <span class="fl">伪装的心</span> <span class="fr">IP:218.56.32***&nbsp;&nbsp;&nbsp;&nbsp;2013-02-21 08:07:48</span> </h3>
    <p class="con">很不错的页面啊<br />支持一下下。。。</p>
    <h4><b>Reply:</b>管理员尚未回复</h4>
  </div>
  <div class="item">
    <h3> <span class="fl">千里</span> <span class="fr">IP:111.11.189.***&nbsp;&nbsp;&nbsp;&nbsp;2013-02-20 23:52:25</span> </h3>
    <p class="con">给你留言</p>
    <h4><b>Reply:</b>管理员尚未回复</h4>
  </div>
  <div class="item">
    <h3> <span class="fl">漫画之迷</span> <span class="fr">IP:119.137.61.***&nbsp;&nbsp;&nbsp;&nbsp;2013-02-20 23:00:25</span> </h3>
    <p class="con">网站真不错啊,漫画情不自禁地在此留了个言,哈哈。。。</p>
    <h4><b>Reply:</b>管理员尚未回复</h4>
  </div>
  <div class="item">
    <h3> <span class="fl">水墨寒</span> <span class="fr">IP:27.224.56***&nbsp;&nbsp;&nbsp;&nbsp;2013-02-20 22:42:43</span> </h3>
    <p class="con">自己先把沙发坐了!水墨寒个人官网(<a href="http://www.smohan.net/" target="_blank">http://www.smohan.net/</a>)正式开通!欢迎大家留意</p>
    <h4><b>Reply:</b>管理员尚未回复</h4>
  </div>
</div>
<!--/ShowMsg-->

相关素材 - UI/布局/瀑布流,时间日期

讨论这个素材(1)回答他人问题或分享使用心得会奖励牛币

华***n  
2017年12月27日

样式是非常好看感谢分享

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)