Css模拟图片实现左右箭头控制的滚动效果

发布时间：2018-08-18 23:02:41 所属栏目：Asp教程来源：站长网

导读：本例中，作者为了节省图片资源，使用Css模拟了图片，引入jquery实现了两端带左右箭头控制的滚动效果，兼容火狐浏览器，唯一不足的是这款特效不会自动滚动，需要访客点击两端的按钮才可以滚动，有兴趣的童鞋不妨修改一下。为解决一些网页特效运行后不能

　　本例中，作者为了节省图片资源，使用Css模拟了图片，引入jquery实现了两端带左右箭头控制的滚动效果，兼容火狐浏览器，唯一不足的是这款特效不会自动滚动，需要访客点击两端的按钮才可以滚动，有兴趣的童鞋不妨修改一下。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html> <html> <head> <title>jQuery滚动两端箭头控制的滚动效果_烈火网</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <style type="text/css"> * { margin:0; padding:0;} body { font-size:12px;} </style> <style> #scrollable { background-color:#efefef; border:1px solid #ddd; padding:10px 8px; width:523px; height:65px; margin-top:30px; } div.items { height:66px; margin-left:8px; float:left; width:475px !important; } div.items a { display:block; float:left; margin-right:8px; width:88px; height:66px; background:#BBB; font-size:50px; color:#ccc; line-height:66px; text-decoration:none; text-align:center; cursor:pointer; } div.items a:hover { color:#999; } div.items a.active { background-position:-174px 0; color:#555; cursor:default; } a.prev, a.next { background:url(/uploads/allimg/1111/veryhuoleft.png) no-repeat 0 0; display:block; width:18px; height:18px; float:left; margin:22px 0 0 0; cursor:pointer; } a.next { background-image:url(/uploads/allimg/1111/veryhuoright.png) } a.prev:hover { background-position:0 -18px; } a.next:hover { background-position:0 -18px; } </style>  <script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(function(){ var $content = $(".scrollable_demo"); var i = 5; //已知显示的<a>元素的个数 var m = 5; //用于计算的变量 var count = $content.find("a").length;//总共的<a>元素的个数 $(".next").click(function(){ if( !$content.is(":animated")){ //判断元素是否正处于动画，如果不处于动画状态，则追加动画。 if(m<count){ //判断 i 是否小于总的个数 m++; $content.animate({left: "-=96px"}, 600); } } }); $(".prev").click(function(){ if( !$content.is(":animated")){ if(m>i){ //判断 i 是否小于总的个数 m--; $content.animate({left: "+=96px"}, 600); } } }); }) </script> </head> <body> <div style="margin:0 auto;width:500px;">  <div id="scrollable"> <a class="prev" href="#"></a>  <div class="items" style="overflow: hidden; position: relative; visibility: visible; width: 478px;"> <div style="position: absolute; width: 200000em; left: 0px;" class="scrollable_demo"> <a>1</a> <a>2</a> <a>3</a> <a>4</a> <a>5</a> <a>6</a> <a>7</a> <a>8</a> <a>9</a> <a>10</a> <a>11</a> <a>12</a> <a>13</a> <a>14</a> <a>15</a> </div> <br clear="all"/> </div>  <a class="next" href="#"></a> </div> </div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：武汉站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

ASP建成不重复随机数的	ASP.NET Web Page应用
WEB页面多语言支持解决	获取转向地址的URL的源