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);" />
  • 相关阅读:
    xcode快捷键大全(转)
    a 和an 的用法区别
    如何在lion系统下安装Xcode 3.2.x版本
    xcode3.2.6升级至4.0.2经验加教训总结(转)
    堆与栈的关系与区别(转)
    [点评]谷歌发布Android 2.3 点评八大亮点
    浅谈关于nil和 null区别及相关问题(转)
    ObjectiveC中的继承与复合技术(转)
    MyEclipse 8.0.0 in Fedora 12
    如何判断两个链表相交及找到第一个相交点
  • 原文地址:https://www.cnblogs.com/rufi/p/2060409.html
Copyright © 2011-2022 走看看