jQuery代码实现发展历程时间轴特效


Posted in Javascript onJuly 30, 2015

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

jQuery代码实现发展历程时间轴特效

html代码:

<div id="timeline">
  <ul id="issues">
   <li id="1900">
    <img src="images/img4.jpg" width="436" height="300" />
   </li>
   <li id="1944">
    <img src="images/img4.jpg" width="436" height="300" />
   </li>
   <li id="1950">
    <img src="images/img4.jpg" width="436" height="300" />
   </li>
   <li id="1971">
    <img src="images/img4.jpg" width="436" height="300" />
   </li>
   <li id="1999">
    <img src="images/img4.jpg" width="436" height="300" />
   </li>
   <li id="2001">
    <img src="images/img4.jpg" width="436" height="300" />
   </li>
   <li id="2011">
    <img src="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>

以上代码内容就是用jQuery代码实现发展历程时间轴的全部内容,希望对大家有所帮助。

Javascript 相关文章推荐
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
使用js复制链接中的部分文字的方法
Jul 30 #Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 #Javascript
js代码实现随机颜色的小方块
Jul 30 #Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 #Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 #Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 #Javascript
javascript中if和switch,==和===详解
Jul 30 #Javascript
You might like
php文件上传类的分享
2017/07/06 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
javascript+xml技术实现分页浏览
2008/07/27 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
上海中网科技笔试题
2012/02/19 面试题
几个判断型的面试题
2012/07/03 面试题
房屋租赁意向书
2014/04/01 职场文书
学生偷窃检讨书
2014/09/25 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
公司庆典主持词
2015/07/04 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
导游词之河北邯郸
2019/09/12 职场文书
python b站视频下载的五种版本
2021/05/27 Python