发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
今天在网上找到一款回旋滚动效果,拿出来和大家一起分享。先上效果图:
html 代码:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>jquery-roundabout</title> <style type="text/css"> *{padding:0;margin:0;} body{font:24px tahoma;} ul{list-style:none;margin:100px auto 0;width:500px;height:200px;} li{line-height:200px;height:200px;width:300px;background:#ccc;text-align:center;cursor:pointer;} li.roundabout-in-focus{cursor:default;} </style> </head> <body> <ul class="roundabout"> <li>Block 1</li> <li>Block 2</li> <li>Block 3</li> <li>Block 4</li> <li>Block 5</li> </ul> </body> </html> <script type="text/javascript" src="http://ajax./ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.roundabout.min.js"></script> <script type="text/javascript"> $(function(){ $('.roundabout').roundabout(); }); </script>
来自: 昵称10504424 > 《Jquery》
0条评论
发表
请遵守用户 评论公约
jQuery元素滚动动画库插件
jQuery元素滚动动画库插件。ScrollMagic是一款制作各种HTML元素滚动动画效果的js库插件。ScrollMagic元素滚动动画库的特点有:git clone git://github.com/janpaepke/ScrollMagic.gitbower install scr...
Jquery EasyUi实战教程布局篇
Jquery EasyUi实战教程布局篇。使用Jquery EasyUi开发之前首先要引用Jquery EasyUi的Js和Css文件,引用如下:<script src="../j...
jQuery中find函数(查找子元素)和end函数
jquery手风琴
jQuery仿小米手风琴案例
jQuery仿小米手风琴案例。} #box { width: 1200px;} #box li { width: 240px;"box"> <ul> <li></li> &l...
jQuery实现图片放大预览效果
jQuery实现图片放大预览效果jQuery实现图片放大预览效果。<div class="preview"><img src="1s.jpg" alt=&...
图片无缝滚动-jquery插件
*/(function(){jQuery.fn.extend({pic_scroll:function(a,b){var c=$(this);var e=d.find("li");if(a==''up''){var f=e.size()*(e.height()+parseInt(e.css(''margi...
超平滑滚动的jQuery标签分栏切换效果
实现信息的上下滚动
微信扫码,在手机上查看选中内容