模仿日本地震海啸 ABC图片对比效果

来源：互联网发布：shell编程有什么用编辑：程序博客网时间：2024/04/30 02:10
<!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>