vnsc5858威尼斯城官网,演示效果:http://localhost:63342/demo/work7.html
function scrollEvent(obj,xEvent,fun){
if(obj.attachEvent){
obj.attachEvent("on" xEvent,fn);
}
if(obj.addEventListener){
obj.addEventListener(xEvent,fn, true);//addEventListener w3c标准。
}
}
window.onload = function (){
dom.addClass($("oDiv"),"aff");
var top = $("oDiv").style.top;
top = parseInt(top);
scrollEvent(document,"scroll",function(){
var scrollTop = document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;
var h = scrollTop top "px";
$("oDiv").style.top = h;
});
$("lDiv").onmousedown = function(){
dom.removeClass($("oDiv"),"aff");
var ev = window.event||event;
var sjw = ev.clienX - $("oDiv").offsetLeft;
var sjw = ev.clienY - $("oDiv").offsetTop;
document.onmousemove = function(){
ev = window.event||event;
var x = ev.clienX;
var y = ev.clienY;
$("oDiv").style.left = (x-sjw) "px";
$("oDiv").style.top = (y-sjw) "px";
}
}
$("lDiv").onmouseup = function(){
dom.addClass($("oDiv"),"aff");
document.onmousemove = null;
}
}
body{
width: 2000px;
height: 2000px;
}
.box{
width: 150px;
height: 200px;
position: absolute;
right: 20px;
border: 1px solid red;
}
.aff{
transition:all 1s;
}
最后是js代码部分:
首先准备两个盒子:
再写样式:
<div id = "oDiv" style = "top:40px;" class = "box">
<div id = "ldiv" style="height:30px ;background: chartreuse "></div>
</div>
编辑:计算机教程 本文来源:图形的滚动及颜色区域的拉移
关键词: