一张图片点击鼠标放大，再点缩小（基于jquery1.8.3）, 另外推荐一款插件：lightBox...效果不错。

最新推荐文章于 2021-06-17 04:53:00 发布

david_yellow

最新推荐文章于 2021-06-17 04:53:00 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/tarenahuangdw/article/details/12111845

版权

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="jquery-1.8.3.min.js"></script>
        <script>
          var isopen = false;
          var newImg;
          var w = 200; //将图片宽度+200
          var h = 200; // 将图片高度 +200
          $(document).ready(function(){
              $("img").bind("click", function(){
                  newImg = this;
                  if (!isopen)
                  {
                       isopen = true;
                       $(this).width($(this).width() + w);
                       $(this).height($(this).height() + h);
                       moveImg(10, 10);
                  }
                  else
                  {
                      isopen = false;
                      $(this).width($(this).width() - w);
                      $(this).height($(this).height() - h);
                      moveImg(-10, -10);
                  }

              });
          });
          //移位
          i = 0;
           function moveImg(left,top)
          {
             var offset = $(newImg).offset();
             $(newImg).offset({ top: offset.top + top, left: offset.left + left});
             if (i == 10)
             {
                 i =0;
                 return;
             }
             setTimeout("moveImg("+left+","+top+")", 10);
             i++;
          }
        </script>
    </head>

    <body>
        <div id="imgBox" style="width:100px; height:100px; background:#cccccc">
            <img id="img1" style="width:100px;height:100px; " alt="" src="photos/image1.jpg" />
        </div>
      </div>
    </body>
    </html>

david_yellow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一张图片点击鼠标放大，再点缩小（基于jquery1.8.3）, 另外推荐一款插件：lightBox...效果不错。

var isopen = false; var newImg; var w = 200; //将图片宽度+200 var h = 200; // 将图片高度 +200 $(document).ready(function(){ $("img").bind("click",
复制链接

扫一扫