zoukankan      html  css  js  c++  java
  • 鼠标滑上去后图片放大浮出效果的实现

    应老婆的要求,用javascript做了一个鼠标滑上去后图片放大浮出的效果,大家指正一下。

     1 <script>
     2 
     3 function GetAbsPosition(obj)
     4 {
     5       var curleft = 0, curtop = 0;
     6       do {
     7       curleft += obj.offsetLeft;
     8       curtop += obj.offsetTop;
     9       } while (obj = obj.offsetParent);
    10       return [curleft,curtop];       
    11 }
    12 
    13 function ShowFloatingImage(image, width, height)
    14 {
    15     var id = "trailimageid";
    16     var newdiv = document.getElementById(id);
    17     if(newdiv == null)
    18     {
    19       newdiv = document.createElement('div');
    20       newdiv.setAttribute('id',id);
    21       newdiv.setAttribute('onmouseout'"HideElement('"+id+"');");
    22       document.body.appendChild(newdiv);
    23     }
    24     newdiv.innerHTML = '<img src='+image.src+ ' width='+(image.width + width) + ' height=' + (image.height + height) + ' />';
    25 
    26     var absPos = GetAbsPosition(image);
    27     newdiv.style.position = "absolute";        
    28     newdiv.style.posLeft = absPos[0- width/2;
    29     newdiv.style.posTop = absPos[1- height/2;
    30     newdiv.style.display="block";
    31 }
    32 
    33 function HideElement(id)
    34 {
    35     var elem = document.getElementById(id);
    36     elem.style.display="none";
    37 }
    38 
    39 </script>
    40 
    41 例子:
    42 <img src="../Pictures/tupian/00070724_m500.jpg"  width="300" height="300" onmouseover="ShowFloatingImage(this, 150, 150);" />
  • 相关阅读:
    扯一扯纯函数
    10.28
    10.27 动手动脑5
    10.26
    10.25 周总结
    10.23
    10.22
    10.21 动手动脑4
    10.20
    10.19
  • 原文地址:https://www.cnblogs.com/rufi/p/2060409.html
Copyright © 2011-2022 走看看