<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模仿ABC图片对比效果</title>
</head>
<body>
<style>
.a{
position:relative;
width:940px;
height:592px;
margin:0;
padding:0;
overflow:hidden;
}
.a1{
background:url(http://ozozoz.com/demo/images/a1.jpg) no-repeat ;
width:860px;
height:529px;
position:absolute;
left:0;
top:0;
-moz-box-shadow: 1px 0 20px #222222;
border-right: 5px solid #000000;
}
.a2{
background:url(http://ozozoz.com/demo/images/a2.jpg) no-repeat ;
width:940px;
height:529px;
position:absolute;
left:0;
top:0;
}
</style>
<div class="a" id="s1">
<div class="a2"></div>
<div class="a1"></div>
</div>
<div class="a" id="s2">
<div class="a2"></div>
<div class="a1"></div>
</div>
<script>
var $ = function(id){
if (document.getElementById(id)){
return document.getElementById(id)
}
else{
alert("not found id");
}
}
slider("s1");
slider("s2");
function slider(id){
var div = $(id).getElementsByTagName("div");
var s1 = $(id);
var min = 75; //可以按实际修改，亦可计算得出
var max = 865;
s1.onmousemove = function(e){
e = e || event;
var startX = e.clientX || e.pageX;
div[1].style.width = startX + 'px';
if(startX < min){
div[1].style.width = '75px';
}
if(startX > max){
div[1].style.width = '865px';
}
}
}
</script>
</body>
</html>
