随着鼠标移动的图片百叶窗效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标拖动效果</title>
<style type="text/css">
*{margin:0;padding:0;}
.wrapper{position:relative;width:800px;height:600px;overflow:hidden;margin:0 auto;}
.div1{position:absolute;top:0;left:0;width:800px;height:600px;overflow:hidden;z-index:4;background:url(DSCN0475.JPG) no-repeat left top;}
.div2{position:absolute;top:0;left:0;width:800px;height:600px;z-index:1;overflow:hidden;background:url(DSCN0488.JPG) no-repeat right top;}
#addDiv{position:absolute;top:0;left:0;z-index:3;width:10px;height:600px;overflow:hidden;background:#ccc;opacity:0.6;filter:alpha(opacity=60);}
.opacity0{display:block;position:absolute;top:0;left:0;width:200px;height:600px;z-index:6;background:#c6c6c6;opacity:0.6;filter:alpha(opacity=60);}
.opacity1{display:none;position:absolute;top:0;right:0;width:100px;height:600px;z-index:5;background:#c6c6c6;opacity:0.6;filter:alpha(opacity=60);}
</style>
</head>
<body>
<div class="wrapper" id="wrapper">
<div class="div1" id="effectDiv"></div>
<div class="div2"></div>
<div class="opacity0" id="opacity0"></div>
<div class="opacity1" id="opacity1"></div>
</div>
<script type="text/javascript">
var base = {
addEvent:function(obj,eve,fn){
if(obj.addEventListener){
obj.addEventListener(eve,fn,false);
}else{
obj.attachEvent("on"+eve,function(){
fn.call(obj);
})
}
},
getId:function(id){
return document.getElementById(id);
},
getEvent:function(event){
return event?event:window.event;
},
createDiv:function(dom,id){
var dom = document.createElement(dom);
dom.setAttribute("id","addDiv");
return dom;
},
getLayerX:function(e){
return e.layerX?e.layerX:e.offsetX;
}
};
base.addEvent(effectDiv,"mouseover",function(e){
var wrapper = base.getId("wrapper");
var effectDiv = base.getId("effectDiv");
var oEvent = base.getEvent(e);
var left = oEvent.clientX - wrapper.offsetLeft;
var addDiv = base.getId("addDiv");
var opacity0 = base.getId("opacity0");
var opacity1 = base.getId("opacity1");
var older=0,current=0;
current = oEvent.clientX;
if(! addDiv){
addDiv = base.createDiv("div","addDiv");
addDiv.setAttribute("id","addDiv");
effectDiv.parentNode.appendChild(addDiv);
}
base.addEvent(document,"mousemove",function(e){
var oEvent = base.getEvent(e);
older = current;
current = oEvent.clientX;
left = oEvent.clientX - wrapper.offsetLeft;
if(left <= 0){
left = 0;
}else if(left >= (wrapper.offsetWidth - addDiv.offsetWidth)){
left = wrapper.offsetWidth - addDiv.offsetWidth;
}
if(current - older < 0 ){
opacity1.style.display = "none";
document.title = left ;
opacity0.style.width = left +"px";
opacity0.style.display = "block";
}else if(current - older > 0){
opacity0.style.display = "none";
opacity1.style.width = wrapper.offsetWidth - left + "px";
opacity1.style.display = "block";
}
addDiv.style.left = left + "px";
effectDiv.style.width = left + "px";
})
})
</script>
</body>
</html>
