分享一款基于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. 在notepad++中修改换行符

    在notepad++中编辑时,将按tab键设置为插入4个空格而不是tab字符

  2. List自定义排序(可多条件)

    1:先建需要排序的属性Model package com.msqsoft.app.queuing.util; public class ListOrderByModel { private Strin ...

  3. BZOJ.1095.[ZJOI2007]捉迷藏(线段树 括号序列)

    BZOJ 洛谷 对树DFS得到括号序列.比如这样一个括号序列:[A[B[E][F[H][I]]][C][D[G]]]. 那比如\(D,E\)间的最短距离,就是将\(D,E\)间的括号序列取出:][[] ...

  4. Lucene入门实例-CRUD

    1.导入jar包 lucene-analyzers-common-7.6.0.jar lucene-analyzers-smartcn-7.6.0.jar lucene-core-7.6.0.jar ...

  5. 2017-9-7-Linux Mint TFTP服务安装开启

    Linux Mint端安装tftp软件 sudo apt-get install tftpd-hpa // tftpd-hpa是服务器端 sudo apt-get install tftp-hpa / ...

  6. php 获取读取文件内容

    /*     * 获取文件内容     *      */    public function getLocalFileContents($file)    {        $handle = @ ...

  7. jenkins部署node项目

    docker run -d --name jenkins -p 8081:8080 -v /home/jenkins_home:/home/jenkins_home jenkins

  8. MySql中drop、truncate、delete的区别

    1.drop:能对table和view 用法:  drop table [is exists] 表1,表2,表3....: ①drop是DDL中删除表的操作,会删除表结构和所有数据,并释放空间. ②并 ...

  9. yii去掉自动排序功能

    Yii去掉自动排序功能并自定义排序 public function search($params) { $query = SvnManage::find()->addOrderBy([ 'cre ...

  10. 移动游戏ui设计(二)--游戏世界的基本法则

    游戏世界的基本法则游戏体验的层次感很重要,制作一款趣味性强,宗旨明确的游戏并不简单. l  风格统一性:要先明白游戏的game genres,因为游戏类型与风格密切联系.常见游戏类型有:动作类.冒险类 ...