jquery时间轴幻灯展示源代码

查看效果:http://hovertree.com/texiao/jquery/75/源代码下载:http://hovertree.com/h/bjaf/8jlpc2wu.htm效果图如下:代码如下:

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

查看效果:
http://hovertree.com/texiao/jquery/75/

源代码下载:
http://hovertree.com/h/bjaf/8jlpc2wu.htm

效果图如下:
jquery时间轴幻灯展示源代码

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery时间轴幻灯展示特效 - 何问起</title>
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/75/css/styles.css" />
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.4.2.min.js"></script>
<script src="http://hovertree.com/texiao/jquery/75/jquery.timelinr-0.9.4.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(function(){
$().timelinr()
});
</script>
</head>
<body id="introduction">
<div id="page">
<div class="demotips"><a href="index.html">演示一</a><a href="demo2.html">演示二</a><a href="demo3.html">演示三</a></div>
<div id="container" class="content clearfix">
<div id="timeline">
<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>
<ul id="issues">
<li id="1900">
<img src="http://hovertree.com/texiao/jquery/75/images/1.png" width="256" height="256" />
<h1>1900</h1>
<p>这是一个时间轴展示幻灯片,支持自动播放,手动切换,可以竖向也可以横向,可以放图片和文本。适合网站,企业等历史的介绍。by 何问起
</p>
</li>
<li id="1944">
<img src="http://hovertree.com/texiao/jquery/75/images/3.png" width="256" height="256" />
<h1>1944</h1>
<p>
受到网店的影响,服装店的生意逐渐有所下降,老板找何问起去谈,大概是准备跟上网购潮流,让何问起准备一下,要在网上开网店,要为服装店建立网站。何问起也没说自己经验不足,只说会积极准备。于是抓紧时间查找资料,学习练习。毕竟还是有功底的,过不多久就在本地搭建了一个网站,实现了一些企业网站的基本功能,信息产品发布、留言版等。也了解了在电商网开网店的方方面面。
</p>
</li>
<li id="1950">
<img src="http://hovertree.com/texiao/jquery/75/images/4.png" width="256" height="256" />
<h1>1950</h1>
<p>
何问起准备好后,跟老板报告分析了具体情况,老板说人手不足,就从易到难逐步推行把,有什么需要尽管提。何问起又有得忙活了,但也是乐此不疲。虽然学的是纺织,而不是计算机或者软件工程等相关专业,但自从接触编程以后,兴趣就一直有增无减,也熟悉了不少网站架设,Web前端,后端程序,数据库等等的知识,开了网站hovertree.com,有向全栈工程师发展的趋势。接受了老板的这个任务后更是开心,整天精力充沛,战斗力十足。
</p>
</li>
<li id="1971">
<img src="http://hovertree.com/texiao/jquery/75/images/5.png" width="256" height="256" />
<h1>1971</h1>
<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
</li>
<li id="1999">
<img src="http://hovertree.com/texiao/jquery/75/images/8.png" width="256" height="256" />
<h1>1999</h1>
<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
</li>
<li id="2001">
<img src="http://hovertree.com/texiao/jquery/75/images/9.png" width="256" height="256" />
<h1>2001</h1>
<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
</li>
<li id="2011">
<img src="http://hovertree.com/texiao/jquery/75/images/10.png" width="256" height="256" />
<h1>2011</h1>
<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
</li>
</ul>
<div id="grad_left"></div>
<div id="grad_right"></div>
<a href="#" id="next">+</a>
<a href="#" id="prev">-</a>
</div>
</div>
<p align="center">适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p><br>
<p align="center">来源:<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/texiao/" target="_blank">特效</a> <a href="http://hovertree.com/h/bjaf/sby54kjl.htm" target="_blank">原文</a></p> 
</div> 

</body>
</html>

转自:http://hovertree.com/h/bjaf/sby54kjl.htm

特效汇总:http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/120380.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • webapp开发框架推荐以及优缺点分析【webAPP干货】[通俗易懂]

    webapp开发框架推荐以及优缺点分析【webAPP干货】[通俗易懂]推荐下面6款常用的webapp开发框架。有兴趣可以阅读《HTML5移动webAPP和HybridAPP开发的优缺点分析》和2014年webAPPUI设计和前端JS特效案例集萃第一款:Sencha TouchSenchaTouch是世界上第一个支持HTML5和CSS3标准的移动应用框架,你可以使用HTML5来编写音频和视频组件,还可以使用Lo

    2022年6月15日
    38
  • laravel5.6 反解token获取用户信息

    token加密算法:useTymon\JWTAuth\JWTAuth;useTymon\JWTAuth\Exceptions\JWTException;protectedfunctionsetAuthenticationHeader($response,$token=null){$token=$token?:$this->auth…

    2022年4月14日
    43
  • python3变量命名规则_python 变量命名规则

    python3变量命名规则_python 变量命名规则原博文2020-05-1410:53−python标识符命名规则:1,标识符只能包含大、小写字母、数字、下划线“_”,并且不能以数字开头2,标识符不能与python关键字相同,但可以包含3,标识符不能包含空格tips:a,python的标识符区分大小写,如变量number与变量Number表示不同的变量…相关推荐2019-09-2821:13−Pythonpython是一种跨平台的计…

    2022年6月22日
    61
  • SQL Server2012新特性概述

    SQL Server2012新特性概述

    2021年11月24日
    55
  • mysql锁的面试题「建议收藏」

    mysql锁的面试题「建议收藏」1.Mysql中有哪几种锁?1.表级锁:开销小,加锁快;不会出现死锁;锁定粒度大,发生锁冲突的概率最高,并发度最低。2.行级锁:开销大,加锁慢;会出现死锁;锁定粒度最小,发生锁冲突的概率最低,并发度也最高。3.页面锁:开销和加锁时间界于表锁和行锁之间;会出现死锁;锁定粒度界于表锁和行锁之间,并发度一般。2.锁的优化策略1.读写分离2.分段加锁3.减少锁持有…

    2022年5月20日
    107
  • python敏感词过滤代码简单(敏感词匹配算法)

    今天游戏正好用到需要过滤敏感词将出现的敏感词替换成*,在网上找了许久找了一片可用的java版本的DFA算法,最后费了一番功夫将其思路用C#实现,里面的注释甚至都没改动的,这里直接上代码,这里不借助任何第三方工具,复制粘贴就是用当然想看原博客的点击这里usingUnityEngine;usingSystem.Collections.Generic;publicclassTes…

    2022年4月17日
    161

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号