【jquery】jquery 实现回旋滚动效果

最新推荐文章于 2021-12-10 07:36:22 发布

dengrongshou5105

最新推荐文章于 2021-12-10 07:36:22 发布

阅读量83

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yjzhu/archive/2013/01/07/2849670.html

版权

今天在网上找到一款回旋滚动效果，拿出来和大家一起分享。先上效果图：

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.googleapis.com/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>

关于 roundabout.js 的代码可以去官网上下载，这里就不写了，太长了。点击官网地址。

demo：http://files.cnblogs.com/yjzhu/roundabout.zip

转载于:https://www.cnblogs.com/yjzhu/archive/2013/01/07/2849670.html

dengrongshou5105

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【jquery】jquery 实现回旋滚动效果

今天在网上找到一款回旋滚动效果，拿出来和大家一起分享。先上效果图：html 代码：<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title>jquery-roundabout</title&gt...
复制链接

扫一扫