技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
scrollTop,scrollleft+jquery的运用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
$("#scrollleft").click(function()
{
$("div.demo").animate({
scrollTop:300
}, 1000);;
});
$("#scrollleft").click(function()
{
$("div.demo").animate({
scrollLeft:300
}, 1000);;
});
})
</script>
<style type="text/css">
div.demo {
background:#CCCCCC none repeat scroll 0 0;
border:3px solid #666666;
margin:5px;
padding:5px;
position:relative;
width:500px;
height:500px;
overflow:auto;
}
p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
</style>
</head>
<body>
<div class="demo"><p>Hello</p></div>
<input type="button" id="scrolltop" value="scrolltop" />
<input type="button" id="scrollleft" value="scrollleft" />
</body>
</html>