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


相关推荐

  • 石器时代服务器架设教程_石器时代gm命令

    石器时代服务器架设教程_石器时代gm命令本文只作学习研究之用,任何人不得非法使用。Linux系统架设石器私服概述首要条件,安装Linux版系统,建议CentOS4或者5工具:SSHvncforLinuxandwinxamppforLinux主机在眼前的就不说了,首先说的是如果你租了服务器,机房给你装好系统你自己还需要一些工具再进Linux一般Linux系统用户名默认为root服务商会给你一个初始密码ssh安装在自己w…

    2022年9月26日
    1
  • STM32看门狗研究

    STM32看门狗研究stm32看门狗资料

    2022年6月10日
    32
  • java输出结果保留两位小数,经典好文

    java输出结果保留两位小数,经典好文前言面试技巧另外开篇再说,先上面试干货吧。面试的题目并不一定有严格的顺序关系,有的是从前一个问题延伸而来,(探究的是一个知识的深度),有的是考察面试者的知识广度、有的纯粹是我想到哪里写到哪里的啦。。不要太在意哈,最近工作有点忙。基础知识RabbitMQ是一个开源的消息代理和队列服务器,用来通过普通协议在完全不同的应用之间共享数据,它是使用Erlang语言来编写的,并且是基于AMQP协议的;RabbitMQ高性能的原因Erlang语言在交换机的交互方面性能优秀的(Erlang语言最初在于交换机领域

    2022年7月8日
    21
  • java解析zip文件_java解压zip文件

    java解析zip文件_java解压zip文件编写Filter/***GZIP处理Filter*/@WebFilter(filterName=”httpServletGzipFilter”,urlPatterns=”/”)publicclassHttpServletGzipFilterimplementsFilter{@Overridepublicvoiddestroy(){}…

    2022年9月7日
    0
  • eclipse如何卸载插件

    1.打开eclipse点击Help2.选择lnstallNewSoftware3.点击alreadyinstalled4.选择卸载插件,然后点击Uninstall,重启eclipse

    2022年4月8日
    48
  • bs和cs开发架构的详细解析区别_BS与CS架构区别

    bs和cs开发架构的详细解析区别_BS与CS架构区别目前开发的基本架构。一、CS结构—-Client/Server1、开发者需要编写两个端点,一个是客户端程序,一个是服务端程序。举例:QQ、360等等。2、需要再客户机安装客户端的部分。3、弊端:客户端的维护比较麻烦,机器只要一重装,就需要重新安装该软件,同时升级也比较麻烦。后期有了一个解决方案:对于升级,可以通过网络升级的形式完成。4、好处:客户端的出现,可以

    2022年10月16日
    0

发表回复

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

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