javascript编写的购物网站的商品图片放大程序

最新推荐文章于 2024-10-12 22:24:39 发布

站在巨人的肩膀上奋斗

最新推荐文章于 2024-10-12 22:24:39 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Java 文章标签： javascript function div html border 商城

本文链接：https://blog.youkuaiyun.com/daijunjian/article/details/7359148

Java 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个用于商城购物网的图片放大程序，通过JavaScript实现鼠标移动时动态调整图片大小的功能，增强了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
        <title>Insert title here</title>
  <script style="text/javascript">

//商城购物网,图片放大程序
   window.onload = function(){
    var sImg = document.getElementById("sImg");
    var bImg = document.getElementById("bImg");
    var div = document.getElementById("div");

    sImg.onmousemove = function(){
     var xMove = event.x - 8;
     var yMove = event.y - 8;

     bImg.style.marginLeft = -xMove * 2;
     bImg.style.marginTop = -yMove * 2;
    }
    sImg.onmouseenter = function(){
     div.style.display = "block";
    }
    sImg.onmouseleave = function(){
     div.style.display = "none"; //为什么不直接些none?
    }
   }
  </script>
    </head>
    <body>
    <img src="../img/beau.jpg" style="width:50px; height:70px" id="sImg">
  
    <div style="border:1px solid; width:100px; height:140px; position:absolute; left:58px; top:78px; overflow:hidden;display:none" id="div">
  <img src="../img/beau.jpg" id="bImg">
    </div>
    </body>
</html>