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);" />
  • 相关阅读:
    IOS Block-Block块的使用与理解
    IOS 多线程03-GCD
    IOS 多线程01-线程基础知识
    JavaScript高级-定义函数(类)方法
    互联网技术笔试总通不过?leetcode刷对了么
    Redis 内存满了怎么办? Redis的内存淘汰策略
    SpringBoot项目优化和Jvm调优
    中台的末路
    Java 应用中的日志
    Spring Boot 支持https
  • 原文地址:https://www.cnblogs.com/rufi/p/2060409.html
Copyright © 2011-2022 走看看