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

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

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. /*时间轴*/
  4. $('#Container').masonry({itemSelector : '.item'});
  5. function Arrow_Points(){
  6. var s = $("#Container").find(".item");
  7. $.each(s,function(i,obj){
  8. var posLeft = $(obj).css("left");
  9. if(posLeft == "0px"){
  10. html = "<span class='rightCorner'></span>";
  11. $(obj).prepend(html);
  12. } else {
  13. html = "<span class='leftCorner'></span>";
  14. $(obj).prepend(html);
  15. }
  16. });
  17. }
  18. Arrow_Points();
  19. });
  20. </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. HTML5 2D平台游戏开发#8指令技

    一般在动作游戏中,玩家可以通过对输入设备输入一系列的指令让角色完成某个或多个特定的动作.以格斗游戏<拳皇>为例,键入↓↘→↘↓↙← + A or C可以触发IORI的必杀技八稚女: 通过一 ...

  2. Winform 动态 画图 不闪

    一.问题:解决winform动态画图闪的问题,网上搜的方法,大部分都是: “this.SetStyle(ControlStyles.OptimizedDoubleBuffer | ControlSty ...

  3. HDFS源码分析数据块复制监控线程ReplicationMonitor(二)

    HDFS源码分析数据块复制监控线程ReplicationMonitor(二)

  4. 通过Lock对象以及Condition对象实现多线程同步

    通过Lock对象以及Condition对象实现多线程同步: 在之前的学习中,无论是通过synchronized建立同步代码块,还是通过synchronized建立同步函数,都是把对象看成一把锁来实现同 ...

  5. systemctl使用说明

    # systemctl #输出已激活单元 # systemctl list-units #输出已激活单元 # systemctl --failed #输出运行失败的单元 # systemctl lis ...

  6. iOS_3_图片浏览

    终于效果图: BeyondViewController.h // // BeyondViewController.h // 03_图片浏览 // // Created by beyond on 14- ...

  7. win10中如何成功安装lxml

    lxml官网地址:http://lxml.de/index.html 问题: 在学习lxm的时候,发现在win10下总是安装失败,如下: 在网上搜索了半天也没找到具体的解决方案,就FQgoogle下, ...

  8. 做完task1-21的阶段总结

    [说明]这是自注册修真院的第七天,也是第七篇日报,觉得是一个好的时机总结一下. 因为任务一虽然看起来仅仅是“完成学员报名的DB设计并读写数据库”,但是做了几天之后就发现在任务“搭建自己的服务器”之前的 ...

  9. 【BZOJ2728】[HNOI2012]与非 并查集+数位DP

    [BZOJ2728][HNOI2012]与非 Description Input 输入文件第一行是用空格隔开的四个正整数N,K,L和R,接下来的一行是N个非负整数A1,A2……AN,其含义如上所述.  ...

  10. POJ 2031 Building a Space Station【经典最小生成树】

    链接: http://poj.org/problem?id=2031 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=22013#probl ...