你的位置:首页 > Java教程

[Java教程]点击左右按钮实现左右滚动效果详解


点击左右按钮实现左右滚动效果详解:
很多网站中都有这样的展示效果,就是点击两端的按钮可以实现图片左右滚动效果,下面就通过代码实例介绍一下如何实现此效果。
代码如下:

 

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">ul{ list-style:none; margin:0px; padding:0px; text-align:center;}#main{ width:600px; height:98px; float:left; border:1px solid #777; overflow:hidden;}#gd{ list-style:none outside none; height:98px; display:block; background:yellow; position:relative; width:9999em;}#gd li{ width:90px; height:80px; display:block; float:left; margin:9px 15px;}#box{ width:702px; height:100px; background:#ccc; margin:0 auto}#toleft{ width:30px; height:30px; background:red; margin:35px 10px; float:left; cursor:pointer;}#toright{ width:30px; height:30px; background:red; margin:35px 10px; float:left; cursor:pointer;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(function(){  var pic_length=$('#gd li').length;  var n=0;  $('#toleft').click(function(){   if(!$('#gd').is(':animated')&&n){    $('#gd').animate({left:'+=120px'},500);    n--;   }  });  $('#toright').click(function(){   if (!$('#gd').is(':animated')&&pic_length>n+5){    $('#gd').animate({left:'-=120px'},500);    n++;   }  })}) </script></head><body><div id="box"> <div id="toleft"></div> <div id="main">  <ul id="gd">   <li style="background:red"></li>   <li style="background:orange"></li>   <li style="background:green"></li>   <li style="background:navy"></li>   <li style="background:blue"></li>   <li style="background:purple"></li>   <li style="background:pink"></li>   <li style="background:gray"></li>  </ul> </div> <div id="toright"></div></div></body></html>

 

代码实现了我们的要求,点击左右按钮可以实现左右滚动效果,当然这里都是以背景色替代的,下面就介绍一下它的实现过程。
一.实现原理:
点击实现左右滚动其实是将设置的li元素的父元素的left属性值,这样就看起来像是里面的li元素在左右滚动了。
二.代码注释:
1.$(function(){}),文档结构完全加载完毕再去执行函数中的代码。
2.var pic_length=$('#gd li').length,计算出li元素的数量。
3.var n=0,声明一个变量n变初始化为0,它用作存放左侧被隐藏的li元素的数目。
4.$('#toleft').click(function(){}),为左侧按钮注册事件处理函数。
5.if(!$('#gd').is(':animated')&&n){},如果元素没有处于动画状态,并且n的数目不等于0,也就是说左侧具有隐藏的li元素.
6.$('#gd').animate({left:'+=120px'},500),以动画方式设置left属性值,left属性值加120px,一个li元素占据的宽度。
7.n--,n的值减一。
三.相关阅读:
1.click事件可以参阅jQuery的click事件一章节。 
2.is()函数可以参阅jQuery的is()方法一章节。
3.:animated选择器可以参阅jQuery的:animated选择器一章节。
4.animate()函数可以参阅jQuery的animate()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13540

更多内容可以参阅:http://www.softwhy.com/jquery/