jQuery鼠標(biāo)移動(dòng)圖片上實(shí)現(xiàn)放大效果

更新時(shí)間：2017年06月25日 11:20:46 作者：hello_mr_anan

這篇文章主要介紹了jQuery鼠標(biāo)移動(dòng)圖片上實(shí)現(xiàn)放大效果 ,需要的朋友可以參考下

首先界面上要有圖片，下面是圖片

<img id="big-circle" src="images/pic2.jpg" alt=""/>其次在script代碼段中加入如下代碼，進(jìn)行適量修改即可
$(document).ready(function () {
     var x = 10;
     var y = 20;
     $("#big-circle").mouseover(function (e) {
       var tooTip = "<div id='tooTip'><img src='" + this.href + "'></img><div>";
       $("body").append(tooTip);
       $("#tooTip").css({ position: "absolute",
         'top': (e.pageY + y) + "px", "left": (e.pageX + x) + "px"
       }).show("fast");
     }).mouseout(function () {
             $("#tooTip").remove();
     }).mousemove(function (e) {
       $("#tooTip").css({ position: "absolute",
         'top': (e.pageY + y) + "px", "left": (e.pageX + x) + "px"
       });
     });
   });

以上所述是小編給大家介紹的jQuery鼠標(biāo)移動(dòng)圖片上實(shí)現(xiàn)放大效果，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

JQuery實(shí)現(xiàn)當(dāng)鼠標(biāo)停留在某區(qū)域3秒后自動(dòng)執(zhí)行
這篇文章主要介紹了JQuery實(shí)現(xiàn)當(dāng)鼠標(biāo)停留在某區(qū)域3秒后自動(dòng)執(zhí)行，可以應(yīng)用于很多場(chǎng)景，需要的朋友可以參考下
2014-09-09
jQuery實(shí)現(xiàn)動(dòng)態(tài)給table賦值的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)給table賦值的方法,結(jié)合具體實(shí)例形式分析了jQuery動(dòng)態(tài)操作table表格節(jié)點(diǎn)的相關(guān)技巧,需要的朋友可以參考下
2017-07-07
jQuery的deferred對(duì)象使用詳解
jQuery的開發(fā)速度很快，幾乎每半年一個(gè)大版本，每?jī)蓚€(gè)月一個(gè)小版本。每個(gè)版本都會(huì)引入一些新功能。今天我想介紹的，就是從jQuery 1.5.0版本開始引入的一個(gè)新功能----deferred對(duì)象。
2011-08-08
jquery.boxy彈出框(后隔N秒后自動(dòng)隱藏/自動(dòng)跳轉(zhuǎn))
對(duì)于 Boxy彈出框的使用之前寫過一些文章（查看jquery.boxy基礎(chǔ)），今天主要是在解決一個(gè)需要之后，覺得值得把它記錄下來，所以就再寫一篇，主要功能是，在彈出對(duì)話框后，隔N秒后自動(dòng)隱藏，還有就是自動(dòng)跳轉(zhuǎn)
2013-01-01
jquery實(shí)現(xiàn)點(diǎn)擊a鏈接,跳轉(zhuǎn)之后,該a鏈接處顯示背景色的方法
下面小編就為大家分享一篇jquery實(shí)現(xiàn)點(diǎn)擊a鏈接,跳轉(zhuǎn)之后,該a鏈接處顯示背景色的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
jquery1.4 教程三新增方法教程
接下來幾篇教程，將重點(diǎn)講解jquery1.4新增的16個(gè)方法，有幾個(gè)方法還是非常實(shí)用的。
2010-02-02
jQuery中wrapInner()方法用法實(shí)例
這篇文章主要介紹了jQuery中wrapInner()方法用法,實(shí)例分析了wrapInner()方法的功能、定義及包裹匹配元素的使用技巧,需要的朋友可以參考下
2015-01-01
讀jQuery之十一添加事件核心方法
上一篇提到j(luò)Query中添加事件提供給客戶端程序員的接口方法有很多bind/click等，但其實(shí)現(xiàn)的核心方法是jQuery.event.add。
2011-07-07
jQuery實(shí)現(xiàn)TAB風(fēng)格的全國(guó)省份城市滑動(dòng)切換效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)TAB風(fēng)格的全國(guó)省份城市滑動(dòng)切換效果代碼,涉及jquery鼠標(biāo)mouseover事件及頁(yè)面元素遍歷的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-08-08
JQuery對(duì)表單元素的基本操作使用總結(jié)
這篇文章主要介紹了JQuery對(duì)表單元素的基本操作使用總結(jié),需要的朋友可以參考下
2014-07-07