Jquery实现超酷的时间轴特效
Timeline时间轴Jquery特效是一款现在互联网上非常流行的一种布局结构,结合了瀑布流布局,最近很多网友问到这种特效,网站上有网友们分享过一款,功能虽然实现,但样式不太好看,今天就把它整理出来分享给大家,网友们好好利用哦。。。。
页面使用代码如下:
<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实现超酷的时间轴特效的更多相关文章
- 超炫的时间轴jquery插件Timeline Portfolio
Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.T ...
- 基于jQuery发展历程时间轴特效代码
分享一款基于jQuery发展历程时间轴特效代码,带左右箭头,数字时间轴选项卡切换特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="time ...
- 发展简史jQuery时间轴特效
发展简史jQuery时间轴特效.这是一款鼠标滚动到一定的高度动画显示企业发展时间轴特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="wr ...
- 一款基于jQuery的超酷动画幻灯片
今天给大家带来一款仿步步高vivo手机网站的一款首页焦点幻灯展示特效,带有超酷炫的动画特效,动态效果丝毫不逊色于flash动画,具有很强的视觉冲击力,推荐下载学习! 提示:兼容360.FireFox. ...
- jQuery鼠标滑过横向时间轴效果
jQuery鼠标滑过横向时间轴效果---效果图: jQuery鼠标滑过横向时间轴效果---全部代码: <!DOCTYPE html> <html> <head> & ...
- 炫酷CSS3垂直时间轴特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [JQuery代码]超酷鼠标滑过背景高亮效果
1.效果及功能说明 鼠标滑过悬停特效,div css制作产品列表图片布局通过鼠标滑过产品图片背景高亮闪烁显示,产品标题滑动显示或隐藏 2.实现原理 首先定义好一个重复实现效果的方法,然后定义光带出现速 ...
- Android 超仿Path时间轴和扇形菜单的效果
网上看到的 ,仅此记录一下,用到的时候便于查找 效果如下: 源码下载地址 : http://download.csdn.net/detail/abc13939746593/7251933
- 超酷的JavaScript叙事性时间轴(Timeline)类库
在线演示 Timeline 是我见过的最酷的展示事件随时间发展的javascript实现.你可以基于时间使用讲故事的方式来创建时间轴特效,整个时间轴以幻灯的方式来展示,你可以穿插图片,视频或者是网站, ...
随机推荐
- poj 2553 The Bottom of a Graph(强连通、缩点、出入度)
题意:给出一个有向图G,寻找所有的sink点.“sink”的定义为:{v∈V|∀w∈V:(v→w)⇒(w→v)},对于一个点v,所有能到达的所有节点w,都能够回到v,这样的点v称为sink. 分析:由 ...
- sudo保持环境变量
编译Linux内核的最后是make modules_install install,这两个一般都需要root权限,即sudo,而一般我交叉编译内核时都是在.bashrc中export ARCH=arm ...
- 系统服务-----NotificationManager
熟悉api事例笔记: package com.test; import com.example.test.R; import android.app.Activity; import android. ...
- openWRT自学计划安排
目标:充分理解openwrt的框架构成,能够在openwrt框架下实现:开发新程序,修改现有程序,修改内核,修改boot.为此,制定如下计划: 一.如何在openwrt上做开发 1.编译出一个BRCM ...
- linux centos apache开启gzip的方法
开启gzip压缩的方法很简单,连接服务器并打开配置文件“httpd.conf”,找到下面这两句,去掉前面的“#” 代码如下 1 LoadModule deflate_module modules/m ...
- HTML DOM节点的增删改查
上篇博客中,我们已经初步接触了DOM基础,可是我们学习是为了可以更好地应用,今天我们就来看看DOM节点的增删改查. 无论在哪里,我们想要操作一个东西,总是应该先去获得它.那么我们怎么获得呢? HTML ...
- 【Python+selenium Wendriver API】之操作警告和弹出框
参考文章: <Python+Selenium笔记(九):操作警告和弹出框>
- html5小趣味知识点系列(一)required
都知道这个属性是检查你 是否填写了字段也就是说咱们不用判断输入的数值是否为空的情况了 但是这个属性一定要和form配合在一起使用单独的使用是不可以实现的 <!DOCTYPE html> & ...
- We7的区县站点群建设策略
一.解决门户和委办局.乡镇的互动 构建以区县政府门户为主站,各委办局.乡镇为子站的站点群体系: 基于统一的信息体系,实现分级授权.统一管理的功能.各网站能够有独立的页面展现和管理后台,同一时候网站之间 ...
- 素数定理 nefu 117
素数定理: 随着x的增长,P(x) ≍x/ln(x) ,P(x)表示(1,x)内的素数的个数. 这个定理,说明在1-x中,当x大到一定程度时,素数分布的概率为ln(x) 竟然还有一道题目. 素数个数的 ...