jQuery垂直时间轴特效插件下载
2015-07-15 12:50:41  By: dwtedx

本Demo是一个发展简史的特效、其实也可叫jQuery时间轴特效、当我们鼠标滚动到一定的高度动画显示发展时间轴、这个要显示的内容可自定义的哦、大家可以改为自己的发展过程、或则企业的历程、运行效果如下

jquery 时间轴


Html代码

<div class="history_right">
	<p class="history_R year211">
		<span class="history_2005_span yellow">2012</span>
		<b class="history_2005_b yellow_R">
			<span class="history_r_month">10<br/>月</span>
			<span class="history_r_text">
				CC视频荣获“清科集团中国
				<br/>最具投资价值50强”荣誉
			</span>
		</b>
	</p>
	<p class="history_R yearalmostr">
		<span class="history_2005_span yellow">2014</span>
		<b class="history_2005_b yellow_R">
			<span class="history_r_month">10<br/>月</span>
			<span class="history_r_text">
				CC视频荣获<br/>
				“最佳教育技术提供商”荣誉
			</span>
		</b>
	</p>
</div>
<div class="clear"></div>


JQuery代码

$(window).scroll(function(){
    var msg = $(".history-img");
    var item = $(".history_L");
    var items = $(".history_R");
    var windowHeight = $(window).height();
    var Scroll = $(document).scrollTop();
    if((msg.offset().top - Scroll -windowHeight)<=0){
        msg.fadeIn(1500);
    }
    for(var i=0;i<item.length;i  ){
        if(($(item[i]).offset().top - Scroll - windowHeight)<= -100){
            $(item[i]).animate({marginRight:´0px´},´50´,´swing´);
        }
    }
    for(var i=0;i<items.length;i  ){
        if(($(items[i]).offset().top - Scroll - windowHeight)<= -100){
            $(items[i]).animate({marginLeft:´0px´},´50´,´swing´);
        }
    }
});


若资源对你有帮助、扫描下方的二维码、关注DD博客微信公众号(ddblogs)吧

最后给贴上Demo的源代码、希望对大家有用、有兴趣的哥们可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1eQ6hjs2 密码: kk9i

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+