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实现.你可以基于时间使用讲故事的方式来创建时间轴特效,整个时间轴以幻灯的方式来展示,你可以穿插图片,视频或者是网站, ...
随机推荐
- 还在用系统自带的?那你那就OUT了!
相信如今的APP10个里面有九个是有Tabbar的,可是非常多人甚是非常多公司都在用系统自带的tabbar.当然这也不是不能够,并且项目中就那几行代码.效果又一样. 可是,别忘了另一个可是.然并卵.这 ...
- eclipse maven 依赖jar下载失败解决办法
针对PC与Maven私服之间网络传输问题 打开.m2本地仓库所在目录, 通过win文件夹的搜索功能,查找 *.lastUpdated ,然后将找到的文件全部删除 重新 Maven Update Pro ...
- 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 ...
- Auto Layout之创建布局约束
上篇文章给大家介绍了AutoLayout 的由来及OC中关于AutoLayout 的类.这篇文章将向大家介绍,在iOS 编程中怎样使用Auto Layout 构建布局约束. 创建布局约束 创建布局约束 ...
- git入门五(分支合并冲突和衍合)
分支合并冲突的处理 合并分支的冲突时在不同的分支中修改了同一个文件的同一部分,程序无法把两份有差异的文件合并,这时候需要人为的干预解决冲突.当前处于master 分支,当dev 分支和master ...
- NSIS 变量
$PROGRAMFILES 程序文件目录(通常为 C:\Program Files 但是运行时会检测). $COMMONFILES 公用文件目录.这是应用程序共享组件的目录(通常为 C:\Progra ...
- Android 禁止状态栏下拉
同学项目用到Android 禁止状态栏下拉,我也迷茫,网上很多资料都不行,最终找到了下面一篇博客,感觉很不错,说的比较详细,供大家参考了 http://blog.csdn.net/u011913612 ...
- Java 学习 day07
01-面向对象(继承-概述).avi package myFirstCode; /* 将学生和工人的共性描述提取出来,单独进行描述, 只要让学生和工人与单独描述的这个类有关系,就可以了. 继承: 1. ...
- 电路分析三------KCL,KVL,VCR方程
1.2b方程 2.举例 举例2
- ABAP内表数据做层次XML输出
*&---------------------------------------------------------------------**& Report Z_BARRY ...