大众计算机学习网

专门提供各种电脑教程

jquery实现鼠标经过图片就放大

Admin | 2015-7-27 10:12:52 | 被阅次数 | 1998

  下面的代码功能作用是:当鼠标经过时,不管是移动到哪张图片的上面,该图片就会放大,这个放大指的是放大到该图片的原始尺寸。

  一、网页图片对象

  <img id="MyImg1" src="Logo.gif" width="67" height="42" />

  <img id="MyImg2" src="Logo123.gif" width="196" height="88" />

  二、jquery功能代码如下

  $(document).ready(function(){
    $("img").mouseover(function()
    {
       this.title = "";
       var imgTitle = this.myTitle ? "<br />" + this.myTitle + " 原始图片" : "";
       var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='图片说明'/>" + imgTitle + "</div>";
       $("body").append(tooltip);
    });
    $("img").mouseout(function(){
       $("#tooltip").remove();
    });   
  });