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);" />
  • 相关阅读:
    让Editplus自动格式化js、css、html。。。
    超强JavaScript编辑器WebStorm上安装zenCoding
    魔哥Css:背景色透明,内容不透明之终极方法!兼容(不支持ie6)。
    支持二次开发的Zigbee模块(SNAP技术)
    XI Monitor Analysis
    SAP 增强方式
    查找业务对应的IDOC类型(HELP)
    POS DM 学习URL
    IDOC MSGRN
    XI 安装MS SQLSERVER JDBC 驱动
  • 原文地址:https://www.cnblogs.com/rufi/p/2060409.html
Copyright © 2011-2022 走看看