Css模仿图片实现阁下箭头节制的转动结果

发布时间：2018-08-17 15:23:25 所属栏目：编程来源：站长网

导读：本例中，作者为了节减图片资源，行使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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys