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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 计算机中的虚拟ip,如何设置电脑虚拟IP[通俗易懂]

    计算机中的虚拟ip,如何设置电脑虚拟IP[通俗易懂]2020-02-29阅读(86)“全国统一价”其本意是根据企业产品的成本、销售渠道、品牌价值、利润所得出的,是正规生产企业规范销售市场,保护品牌形象的一种控制手段。在现实生活中,生产商打出的所谓“全国统一零售价”充其量只能理解成对产品的指导价。从某种程度上2020-02-29阅读(104)1.火烧新野。曹操统一了北方后,南下攻打刘备,此时刘备投靠刘表,驻扎在新野,曹操派大将夏侯惇进攻新野,这时刘备…

    2022年10月12日
    2
  • 卸载Symantec Endpoint Protection, 无需password的卸载方法

    卸载Symantec Endpoint Protection, 无需password的卸载方法

    2021年12月3日
    111
  • 基于Amos路径分析的模型拟合参数详解[通俗易懂]

    基于Amos路径分析的模型拟合参数详解[通俗易懂]基于Amos路径分析的模型拟合参数详解1卡方、自由度、卡方自由度比2GFI、AGFI3RMR、RMSEA4CFI5NFI、TLI(NNFI)6ECVI7AIC、BIC、CAIC  前面两篇博客,分别对Amos的基本操作与模型、参数等加以详细介绍,点击下方即可进入对应文章。  博客1:基于Amos的路径分析与模型参数详解  博客2:基于Amos路径分析的输出结果参数详解  本文则将由模型拟合度指标入手,对Amos所得到的路径分析模型结果加以度量。1卡方、自由度、卡方自由度比  在模

    2022年8月24日
    25
  • navicat永久激活码最新2021【在线注册码/序列号/破解码】

    navicat永久激活码最新2021【在线注册码/序列号/破解码】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月19日
    151
  • JavaScript onmousemove 事件

    JavaScript onmousemove 事件DefinitionandUsage定义与用法Theonmousemoveeventoccurswhenthemousepointerismoved.当鼠标移动时触发onmou

    2022年7月2日
    21
  • postman使用教程1

    postman使用教程1  在我们平时开发中,特别是需要与接口打交道时,无论是写接口还是用接口,拿到接口后肯定都得提前测试一下,这样的话就非常需要有一个比较给力的Http请求模拟工具,现在流行的这种工具也挺多的,像火狐浏览器插件-RESTClient,Chrome浏览器插件-Postman等等。这里主要介绍一下Postman。 一、Postman说明  Postman是一种网页调试与发送网页http请求的chrome插件…

    2022年5月6日
    52

发表回复

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

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