您的位置：首页 > Web前端 > JQuery

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

2013-09-27 21:57 1466 查看

    <!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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