4顶

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

稿源：互联网 2022-04-02 21:40:12 点击： 15749 撤稿纠错

模仿ABC.net.us网站制作的日本地震海啸的震前震后图片对比的特效...

以下讨论的是和日本地震日本海啸图片对比相关的模仿日本地震海啸 ABC图片对比效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

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

关于模仿日本地震海啸 ABC图片对比效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011031668649.shtml方便下次再访问哦。

·上一篇： js获取css文件中的display属性
·下一篇： 基于jquery在网页窗口不同位置分别弹出层特效演示

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

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

文章分类LIST >>返回首页

最新游戏

最新新闻