Heim  >  Artikel  >  php教程  >  很酷的时间轴插件jquery特效

很酷的时间轴插件jquery特效

WBOY
WBOYOriginal
2016-06-07 11:39:111379Durchsuche

jQuery Timelinr时间轴插件可以滑动切换、水平和垂直滚动、支持键盘方向键,并且支持鼠标滚轮
很酷的时间轴插件jquery特效

页面底部有演示、免费下载链接。若是想看更多js特效、网站源码、 js教程请访问 http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。1、<br> 示例中#timeline为展示区,#dates为时间轴,年份作为主轴,#issues作为内容展示区,即对应主轴点年份的内容,id必须对应上。<br> <div>  <br>    <ul>  <br>     <li><a>2005</a></li>  <br>     <li><a>2006</a></li>  <br>     <li><a>2007</a></li> <br>     ... <br>    </ul>  <br>    <ul>  <br>     <li> <h1>2005 闪亮登场</h1> <p>2005年,呱呱坠地。界面清爽、功能俱全、操作简单易上手,是大家都喜爱的网络家园。出生不久,就有越来越多的朋友到我这里分享自己的生活。</p> </li>  <br>     <li> <h1>2006 扬帆起航</h1> <p>2006年,咿呀学语。面对每天千万级的用户访问,技术GG帮我优化了架构,设计师MM帮我设计了欢迎动画等个性化装扮,“妈妈再也不担心我404了”!</p> </li>  <br>     <li> <h1>2007 内外兼修</h1> <p>2007年,初长成。咱推出了信息中心和好友圈,开始向SNS社区转型;首创4.0全屏模式,更加美观大方。</p> </li>  <br>      ... <br>   </ul>  <br>   <a></a> <!-- 用于点击展示前一项内容 --> <br>   <a></a> <!-- 用于点击展示后一项内容 --> <br> </div> <br> 2、<br> 接着引入jQuery库和jQuery Timelinr插件。另外,若是需要支持滚轮事件,必须引入jquery.mousewheel.js。<br> <script></script>  <br> <script></script>  <br> <script></script><br> 3、<br> 调用时间轴插件,实现垂直滚动,并且支持鼠标滚轮滚动,代码如下:<br> $().timelinr({ <br>     orientation: 'vertical',//垂直滚动 <br>     issuesSpeed: 300,// 对应内容区的滚动速度,可为100~1000之间的数字,或者设置为'slow', 'normal' or 'fast' <br>     datesSpeed: 100,//主轴滚动速度,可为100~1000之间的数字,或者设置为'slow', 'normal' or 'fast' <br>     arrowKeys: 'true',//支持方向键 <br>     startAt: 3,//初始化起点,即初始化轴点位置,数字 <br>     mousewheel: 'true' //是否支持鼠标滚轮 <br> });<br> 4、<br> 查看更多Timelinr参数设置,请进:http://www.sucaihuo.com/js/23.html查看该jQuery特效演示及免费下载,请访问:http://www.sucaihuo.com/js/23.html

AD:真正免费,域名+虚机+企业邮箱=0元

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn