为了账号安全,请及时绑定邮箱和手机立即绑定

Jquery左右移动

标签:
JQuery

         

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.8.0.min.js"></script><!-------------------js部分--------------------><script type="text/javascript">$(document).ready(function(){    $(".prev").click(function(){        aa();   })          function aa(){      var a=parseInt($(".ul li:first").width());      $('.ul li:first').animate({marginLeft:-a+'px'},200,function(){           $('.ul').append($(this));           $(this).css('margin-left','0px');     })    }  $(".next").click(function(){    bb();     })        function bb(){     var b=parseInt($(".ul li:first").width());     $(".ul li:last").css("margin-left",-b+"px");     $(".ul").prepend($(".ul li:last"));     $(".ul li:first").animate({marginLeft:"0px"},200)            }})</script><!----------------------css部分-----------------------><style type="text/css"> ul{padding:0; margin:0; background:#CCC; width:560px; height:38px;float:left; overflow:hidden;} li{float:left; padding-right:18px; height:38px; line-height:38px;list-style:none;} ul li a{text-decoration:none; color:#F00;} .anniu{ float:left; height:38px; line-height:38px; background:#CCC;} .anniu a{ text-decoration:none; color:#06F; font-size:30px; font-weight:bold; font-family:"黑体";margin-right:10px; cursor:pointer;}</style></head><!-------------------html部分-------------------------><body> <ul class="ul">    <li><a href="###">11111</a></li>    <li><a href="###">22222</a></li>    <li><a href="###">33333</a></li>    <li><a href="###">44444</a></li>    <li><a href="###">55555</a></li>    <li><a href="###">66666</a></li>    <li><a href="###">77777</a></li>    <li><a href="###">88888</a></li> </ul> <div class="anniu"><a href="###" class="prev">&lt;</a><a href="###" class="next">&gt;</a></div></body></html>


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
移动开发工程师
手记
粉丝
39
获赞与收藏
245

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消