分享一款基于jQuery发展历程时间轴特效代码,带左右箭头,数字时间轴选项卡切换特效下载。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

<div id="timeline">
<ul id="issues">
<li id="1900">
<img src="data:images/img4.jpg" width="436" height="300" />
</li>
<li id="1944">
<img src="data:images/img4.jpg" width="436" height="300" />
</li>
<li id="1950">
<img src="data:images/img4.jpg" width="436" height="300" />
</li>
<li id="1971">
<img src="data:images/img4.jpg" width="436" height="300" />
</li>
<li id="1999">
<img src="data:images/img4.jpg" width="436" height="300" />
</li>
<li id="2001">
<img src="data:images/img4.jpg" width="436" height="300" />
</li>
<li id="2011">
<img src="data:images/img4.jpg" width="436" height="300" />
</li>
</ul>
<ul id="dates">
<li><a href="#1900">1900</a></li>
<li><a href="#1944">1944</a></li>
<li><a href="#1950">1950</a></li>
<li><a href="#1971">1971</a></li>
<li><a href="#1999">1999</a></li>
<li><a href="#2001">2001</a></li>
<li><a href="#2011">2011</a></li>
</ul>
<a href="#" id="next">></a>
<a href="#" id="prev"><</a>
</div>

via:http://www.w2bc.com/article/52995

基于jQuery发展历程时间轴特效代码的更多相关文章

  1. 基于jQuery图片弹出翻转特效代码

    分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代 ...

  2. 基于jQuery的美食时间轴焦点图插件

    这是一款非常炫酷的jQuery焦点图插件,这款jQuery焦点图的特点是有一个时间轴,点击切换按钮时,时间轴会逐渐移动,时间轴上的图片也会逐渐切换.另外,在图片上方也可以放置自定义样式的文字. 在线预 ...

  3. 发展简史jQuery时间轴特效

    发展简史jQuery时间轴特效.这是一款鼠标滚动到一定的高度动画显示企业发展时间轴特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wr ...

  4. Jquery实现超酷的时间轴特效

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

  5. 基于jQuery左侧大图右侧小图切换代码

    基于jQuery左侧大图右侧小图切换代码是一款带右侧缩略图选项卡的jQuery图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  6. 基于jQuery HTML5人物介绍卡片特效

    基于jQuery HTML5人物介绍卡片特效.这是一款基于jquery.material-cards插件实现的人物介绍卡片形式特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码 ...

  7. jquery实现多条件筛选特效代码分享

    本文实例讲述了jquery实现多条件筛选特效.分享给大家供大家参考.具体如下:jquery实现的多条件搜索表单带日期选择表格表单效果源码,是一段实现了多个条件筛选搜索的特效代码,多条件拥有时间.地点. ...

  8. 基于jQuery扁平多颜色选项卡切换代码

    基于jQuery扁平多颜色选项卡切换代码,支持自动轮播切换,鼠标滑过切换的jQuery特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  9. 基于jQuery仿去哪儿城市选择代码

    基于jQuery仿去哪儿城市选择代码.这是一款使用的jQuery城市选择特效代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="lin ...

随机推荐

  1. JavaScript中本地对象、内置对象和宿主对象(转)

    首先解释下宿主环境:一般宿主环境由外壳程序创建与维护,只要能提供js引擎执行的环境都可称之为外壳程序.如:web浏览器,一些桌面应用系统等.即由web浏览器或是这些桌面应用系统早就的环境即宿主环境. ...

  2. PHP的json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案

    PHP5.4才支持JSON_UNESCAPED_UNICODE这个参数,此参数是让中文字符在json_encode的时候不用转义,减少数据传输量.但在PHP5.3中,就得自己写个函数来实现,以下就是解 ...

  3. 潭州课堂25班:Ph201805201 django 项目 第三十二课 后台站点管理(课堂笔记)

    一.后台站点模版抽取 1.获取静态站点模版 可以使用git clone到本地 git clone https://github.com/almasaeed2010/AdminLTE.git 也可以在g ...

  4. node加密

    var crypto = require('crypto'); //md5加密 exports.md5 = function (str) { var md5sum = crypto.createHas ...

  5. 初窥Java--1(下载JADK,搭建环境变量)

    window系统安装java 首先我们需要下载java开发工具包JDK,下载地址:http://www.oracle.com/technetwork/java/javase/downloads/ind ...

  6. 学不动了,ECMAScript2018都来了

    原文:ECMAScript regular expressions are getting better! 作者: Mathias Bynens: Google V8引擎开发者 译者:Fundebug ...

  7. .net 4.0 中的特性总结(一):dynamic

    在新版本的C#中,dynamic关键词是一个很重要的新特性,现在你可以创建动态对象并在运行时再决定它的类型.而且.net 4.0为CLR加入了一组为动态语言服务的运行时环境,称为DLR(Dynamic ...

  8. PHP中new self()和new static()的区别

    1.new static()是在PHP5.3版本中引入的新特性. 2.无论是new static()还是new self(),都是new了一个新的对象. 3.这两个方法new出来的对象有什么区别呢,说 ...

  9. Java 动态代理 Demo

    相比于静态代理,动态代理避免了开发者编写各个繁锁的静态代理类,只需指定一组接口及目标类对象就能动态地获取代理对象. 使用动态代理的六大步骤: 1 通过实现InvocationHandler接口来自定义 ...

  10. react native webview 不能滑动页面

    用RN 写Android的时候,webview点击正常,但是不能滑动,或者滑动很艰难.调试不报错,inspect一切正常. 遍查网络无良方, 最后发现其他同事在最外层套了个这东西: Touchable ...