点击图片滚动指定<div>中的内容（上下，水平都可以）

bluesft

浏览: 8771 次
来自: ...

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax/Javascript

jQuery XHTML UP HTML

<!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=gb2312" />
<title></title>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$(document).ready(
function(){
var timer,menu=$("#menu")
var scr=function(){

var p=parseInt($(this).attr('val'));
clearInterval(timer);
var h=menu.attr('scrollTop')+(p?500:-500);

timer=setInterval(function(){
b=p?menu.attr('scrollTop')>=h:menu.attr('scrollTop')<=h

if(b){
clearInterval(timer);
}
else{
menu.attr('scrollTop',menu.attr('scrollTop')+Math[p?"ceil":"floor"]((h-menu.attr('scrollTop'))/10)) ;
}},10);
}
$('#up').click(scr);
$('#down').click(scr);
}
)

</script>
</head>

<body>
<div id="up" val="0" >qqqqqqqqqq</div>
<div style="overflow:hidden;height:470px;width:400px" id="menu">
<ul>
<li style="height:500;widt:2px">aaaaaaaaaaaaa<br><br><br><br><br><br><br><br></li>
<li style="height:300">sssssssssssssssssssssssssssssssssssss<br><br><br><br><br><br><br><br></li>
<li style="height:300">ddddd<br><br><br><br><br><br><br><br></li>
<li style="height:300">fffffffffff<br><br><br><br><br><br><br><br></li>
<li style="height:300">ggggggggggg<br><br><br><br><br><br><br><br></li>
<li style="height:300">hhhhhhhh<br><br><br><br><br><br><br><br></li>
</ul>
</div>
<div id="down" val="1" >qqqqqqqqqq</div>
</body>
</html>

里面用到了jQuery，其实不用也可以实现。里面为click事件传值用了点小技巧，jquery是不支持直接给click事件传值的。代码比较简单也比较简洁。

顺便，要改成左右滚的只要把scrollTop改成scrollLeft就可以了。

分享到：