发布于 2016-10-09 04:57:03 | 172 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例，程序狗速度看过来！

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

---

这篇文章主要介绍了jquery实现的图片点击滚动效果,需要的朋友可以参考下
需要添加jquery文件才可以调试

 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(function(){ 
//alert($('#findclose').closest('div').attr('id')); 
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> 
<style type="text/css"> 
ul{ 
list-style:none; 
margin:0px; 
padding:0px; 
text-align:center; 
} 
#gd li { 
width:90px; 
height:80px; 
display:block; 
float:left; 
margin:9px 15px; 
} 
</style> 
<div style="width:702px;height:100px;background:#ccc;margin:0 auto"> 
<div style="width:30px;height:30px;background:red;margin:35px 10px;float:left;cursor:pointer;" id="toleft"></div> 
<div style="width:600px;height:98px;float:left;border:1px solid #777;overflow: hidden;"> 
<ul style="list-style: none outside none;height:98px;display:block;background:yellow;position:relative;width:9999em;" 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 style="width:30px;height:30px;background:red;margin:35px 10px;float:left;cursor:pointer;" id="toright"></div> 
</div>