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实现.你可以基于时间使用讲故事的方式来创建时间轴特效,整个时间轴以幻灯的方式来展示,你可以穿插图片,视频或者是网站, ...
随机推荐
- stage3D基础三------什么是AGAL(转)
原文链接 http://www.adobe.com/cn/devnet/flashplayer/articles/hello-triangle.html 在本文中,你将研究一个能够正常运行的基于Sta ...
- JavaScript的split()
JavaScript split() 方法 JavaScript String 对象 定义和用法 split() 方法用于把一个字符串分割成字符串数组. 语法 stringObject.split(s ...
- [转]const指针与指向const的指针
经常忘记,保存一下.. #include <iostream> using namespace std; int main(int argc, char *argv[]) { ; int ...
- telnet命令的使用
telnet是啥? Telnet协议是TCP/IP协议族中的一员,是Internet远程登陆服务的标准协议和主要方式.它为用户提供了在本地计算机上完成远程主机工作的能力.在终端使用者的电脑上使用tel ...
- CIA 读书笔记
对此书的评价只有八个字:粗制滥造,到处粘贴. 对于通过表情识别人情绪的教程,最好要有图,图很重要,也最好有案例.
- 内核源码之Kconfig和Makefile
转自:http://www.cnblogs.com/image-eye/archive/2011/08/28/2156005.html 内核源码之Kconfig和Makefile Linux内核源码树 ...
- Unity Editor Inspector编辑模板
效果图: using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEdito ...
- OpenCV玩耍(一)批量resize一个文件夹里的所有图像
鉴于用caffe做实验的时候,里面牵扯到一个问题是必须将训练集和测试集都转成256*256的图像,而官网给出的代码又不会用,所以我用opencv转了.其实opencv只转一幅图会很简单,关键在于“批量 ...
- 怎样查看电脑登录过的wifi密码?
https://jingyan.baidu.com/album/fcb5aff770f7e6edaa4a71d9.html?picindex=7
- Ax=λx=λIx