模仿日本地震海啸 ABC图片对比效果-JS特效-爱易网页

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

日期：2014-05-18　浏览次数：20328 次

以下是程序代码

<!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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>