<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标拖拽,滚动条滚动</title>
<script type="text/javascript" src="./js/jquery.js"></script>
<style type="text/css">
html,body{display: block;width:100%;height: 1000px;margin: 0;padding:0;background: #00f000;}
.popdiv{width:150px;height:150px;background:#fff000;position: absolute;left:10px;top:250px;cursor:pointer;}
</style>
</head>
<body>
<div class="popdiv"></div>
<script type="text/javascript">
function setScroll(){
var timer = null;
var divtop = 150;
$(window).scroll(function(){
var scroll = $(window).scrollTop()+divtop;
clearInterval(timer);
timer = setInterval(function(){
var divTop = $(".popdiv").offset().top;
var speed = (scroll-divTop)/5;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(divTop == scroll){
clearInterval(timer);
}else{
var thetop = divTop + speed;
$(".popdiv").offset({top:thetop});
}
},30);
});
var pageX,pageY;
$(".popdiv").mousedown(function(event){
pageX = event.pageX;
pageY = event.pageY;
var that = $(this);
var disX = pageX - $(this).offset().left;
var disY = pageY - $(this).offset().top;
document.οnmοusemοve=function(event){
var left = event.pageX - disX;
var top = event.pageY - disY;
var maxleft = $(window).width() - that.outerWidth() -10;
var maxtop = $("body").height() - that.outerHeight() -10;
if(left < 10){
left = 10;
}else if(left > maxleft){
left = maxleft;
}
if(top < 0){
top = 0;
}else if(top > maxtop){
top = maxtop;
}
$(".popdiv").offset({top:top,left:left});
};
document.οnmοuseup=function(event){
divtop = event.clientY-disY;
document.οnmοusemοve=null;
document.οnmοuseup=null;
};
return false;
});
}
setScroll();
</script>
</body>
</html>
鼠标拖拽,滚动条滚动
最新推荐文章于 2024-07-22 17:30:43 发布