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. [码海拾贝 之Perl]在字符串数组中查找特定的字符串是否存在

    前言 检索一个字符串是否存在于一个数组中, 最主要的想法应该就是对数组进行循环, 逐个推断数组的每一个元素值和给定的值是否相等. (在Java语言还能够把数组转成 List , 在 list 中直接有 ...

  2. 详细的obs操作教程(windows/mac)图解

    直播推流软件obs操作配置教程包含支持mac和windows配置 1 2 3 4 5 6 7 8 9

  3. swift - 实现类似今日头条顶部标签和底部内容的动态解决方案

    TYPageView TYPageView 类似今日头条 的标签导航解决方案,支持多种样式选择,基于swift3.0,支持文字颜色动态变化,底部选中线的动态变化 配图: 使用方法: let title ...

  4. iOS8的autolayout和size class

    前一阵子看到几篇不错的布局教程,Mark下. 初探iOS8中的size class 自适应布局(Adaptive Layout)教程1 自适应布局(Adaptive Layout)教程2 为iPhon ...

  5. C++11 并发指南三(Lock 详解)(转载)

    multithreading 多线程 C++11 C++11多线程基本使用 C++11 并发指南三(Lock 详解) 在 <C++11 并发指南三(std::mutex 详解)>一文中我们 ...

  6. k8s调度-指定node

    1.给node加标签 kubectl label nodes k8s-slave2 slave= 2.查看标签 [root@k8s_master centos7]# kubectl describe ...

  7. ubunut jdk 配置

    sudo mv jdk1.7.0_10 /usr/lib/jvm/ sudo gedit /etc/profile 在profile中加入下面内容: export JAVA_HOME=/usr/lib ...

  8. iphone开发技术要学习的内容

    一.iOS基础 1 开发环境搭建以及IOS组件.框架的概要介绍. 2 mac操作系统与iOS操作系统 3 xcode IDE开发环境的初始 二.C语言基础 1数据类型.表达式与控制流程语句 2数组.函 ...

  9. 怎样去掉a标签的蓝框

    直接上代码 *{-webkit-tap-highlight-color:rgba(255,0,0,0);} 我是直接给每一个都加了这个属性   其实没有必要 因为 只有a 标签 input 标签 和t ...

  10. centos7.0安装redis扩展

    1.下载 下载地址:https://github.com/phpredis/phpredis/ 文件名:phpredis-develop.zip 文件下载成功后,上传至/usr/local 2.安装 ...