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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 《数据库实验》实验一:建立数据库和基本表结构[通俗易懂]

    《数据库实验》实验一:建立数据库和基本表结构[通俗易懂]数据库实验1教程

  • java object toarray,Object[] toArray()

    java object toarray,Object[] toArray()Object[]toArray()描述(Description)java.util.LinkedList.toArray()方法以适当的顺序(从第一个元素到最后一个元素)返回包含此列表中所有元素的数组。此方法充当基于数组的API和基于集合的API之间的桥梁。声明(Declaration)以下是java.util.LinkedList.toArray()方法的声明publicObject[]…

  • rj45 千兆接口定义_rj45 千兆接口定义_rj45接口定义,大神教你秒懂rj45的接线方法【详细方法】…

    RJ45接口通常用于数据传输,最常见的应用为网卡接口。RJ45是各种不同接头的一种类型(例如:RJ11也是接头的一种类型,不过它是电话上用的);RJ45头跟据线的排序不同的法有两种,一种是橙白、橙、绿白、蓝、蓝白、绿、棕白、棕;另一种是绿白、绿、橙白、蓝、蓝白、橙、棕白、棕;因此使用RJ45接头的线也有两种即:直通线、交插线。10100basetxRJ45接口是常用的以太网接口,支持10兆和…

  • placeholder 与variable

    placeholder 与variableplaceholder,译为占位符,官方说法:”TensorFlowprovidesaplaceholderoperationthatmustbefedwithdataonexecution.”即必须在执行时feed值。placeholder实例通常用来为算法的实际输入值作占位符。例如,在MNIST例子中,定义输入和输出:x=tf.placeholder(tf…

  • 代理重加密-入门学习笔记(四)

    代理重加密-入门学习笔记(四)代理重加密(PRE)(重密码学!)原文:https://blog.csdn.net/Black_BearB/article/details/812280301、基本思想-流程结算在云计算中,云计算服务提供商作为代理人,用户A不能完全相信云计算服务提供商,因此需要将自己的数据在本地用自己的公钥加密后在云中存储,这样代理人无法得到数据的明文信息。当他要和用户B共享文件时,A根据自己的信…

  • 2021.12.13版本pycharn激活码_在线激活

    (2021.12.13版本pycharn激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~0…

发表回复

您的电子邮箱地址不会被公开。

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