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);" />
  • 相关阅读:
    1.4redis小结--队列在抢购活动的实现思路
    1.3redis小结--配置php reids拓展
    redis小结 1-2
    redis小结 1-1
    pandas学习小记
    Python简单算法的实现
    python编码
    ThinkPHP中的__initialize()和类的构造函数__construct()
    js正则常用方法
    总结了下PHPExcel官方读取的几个例子
  • 原文地址:https://www.cnblogs.com/rufi/p/2060409.html
Copyright © 2011-2022 走看看