Timeline时间轴Jquery特效是一款现在互联网上非常流行的一种布局结构,结合了瀑布流布局,最近很多网友问到这种特效,网站上有网友们分享过一款,功能虽然实现,但样式不太好看,今天就把它整理出来分享给大家,网友们好好利用哦。。。。

时间轴特效:​http://www.huiyi8.com/shijianzhou/​
页面使用代码如下:

<script type="text/javascript">
$(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();
});
</script>

Jquery实现超酷的时间轴特效的更多相关文章

  1. 超炫的时间轴jquery插件Timeline Portfolio

    Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.T ...

  2. 基于jQuery发展历程时间轴特效代码

    分享一款基于jQuery发展历程时间轴特效代码,带左右箭头,数字时间轴选项卡切换特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="time ...

  3. 发展简史jQuery时间轴特效

    发展简史jQuery时间轴特效.这是一款鼠标滚动到一定的高度动画显示企业发展时间轴特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wr ...

  4. 一款基于jQuery的超酷动画幻灯片

    今天给大家带来一款仿步步高vivo手机网站的一款首页焦点幻灯展示特效,带有超酷炫的动画特效,动态效果丝毫不逊色于flash动画,具有很强的视觉冲击力,推荐下载学习! 提示:兼容360.FireFox. ...

  5. jQuery鼠标滑过横向时间轴效果

    jQuery鼠标滑过横向时间轴效果---效果图: jQuery鼠标滑过横向时间轴效果---全部代码: <!DOCTYPE html> <html> <head> & ...

  6. 炫酷CSS3垂直时间轴特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. [JQuery代码]超酷鼠标滑过背景高亮效果

    1.效果及功能说明 鼠标滑过悬停特效,div css制作产品列表图片布局通过鼠标滑过产品图片背景高亮闪烁显示,产品标题滑动显示或隐藏 2.实现原理 首先定义好一个重复实现效果的方法,然后定义光带出现速 ...

  8. Android 超仿Path时间轴和扇形菜单的效果

    网上看到的  ,仅此记录一下,用到的时候便于查找 效果如下: 源码下载地址 :  http://download.csdn.net/detail/abc13939746593/7251933

  9. 超酷的JavaScript叙事性时间轴(Timeline)类库

    在线演示 Timeline 是我见过的最酷的展示事件随时间发展的javascript实现.你可以基于时间使用讲故事的方式来创建时间轴特效,整个时间轴以幻灯的方式来展示,你可以穿插图片,视频或者是网站, ...

随机推荐

  1. 还在用系统自带的?那你那就OUT了!

    相信如今的APP10个里面有九个是有Tabbar的,可是非常多人甚是非常多公司都在用系统自带的tabbar.当然这也不是不能够,并且项目中就那几行代码.效果又一样. 可是,别忘了另一个可是.然并卵.这 ...

  2. eclipse maven 依赖jar下载失败解决办法

    针对PC与Maven私服之间网络传输问题 打开.m2本地仓库所在目录, 通过win文件夹的搜索功能,查找 *.lastUpdated ,然后将找到的文件全部删除 重新 Maven Update Pro ...

  3. Educational Codeforces Round 27 F. Guards In The Storehouse

    F. Guards In The Storehouse time limit per test 1.5 seconds memory limit per test 512 megabytes inpu ...

  4. Auto Layout之创建布局约束

    上篇文章给大家介绍了AutoLayout 的由来及OC中关于AutoLayout 的类.这篇文章将向大家介绍,在iOS 编程中怎样使用Auto Layout 构建布局约束. 创建布局约束 创建布局约束 ...

  5. git入门五(分支合并冲突和衍合)

    分支合并冲突的处理   合并分支的冲突时在不同的分支中修改了同一个文件的同一部分,程序无法把两份有差异的文件合并,这时候需要人为的干预解决冲突.当前处于master 分支,当dev 分支和master ...

  6. NSIS 变量

    $PROGRAMFILES 程序文件目录(通常为 C:\Program Files 但是运行时会检测). $COMMONFILES 公用文件目录.这是应用程序共享组件的目录(通常为 C:\Progra ...

  7. Android 禁止状态栏下拉

    同学项目用到Android 禁止状态栏下拉,我也迷茫,网上很多资料都不行,最终找到了下面一篇博客,感觉很不错,说的比较详细,供大家参考了 http://blog.csdn.net/u011913612 ...

  8. Java 学习 day07

    01-面向对象(继承-概述).avi package myFirstCode; /* 将学生和工人的共性描述提取出来,单独进行描述, 只要让学生和工人与单独描述的这个类有关系,就可以了. 继承: 1. ...

  9. 电路分析三------KCL,KVL,VCR方程

    1.2b方程 2.举例 举例2

  10. ABAP内表数据做层次XML输出

      *&---------------------------------------------------------------------**& Report  Z_BARRY ...