快捷導(dǎo)航

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

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

這篇文章主要介紹了jQuery鼠標(biāo)移動圖片上實(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)移動圖片上實(shí)現(xiàn)放大效果，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)頁面頂部顯示的進(jìn)度條效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)頁面頂部顯示的進(jìn)度條效果,以完整實(shí)例形式分析了jQuery基于animate與setTimeout定時觸發(fā)實(shí)現(xiàn)進(jìn)度條漸進(jìn)顯示功能,非常簡單實(shí)用,需要的朋友可以參考下
2015-12-12
jQuery之簡單的表單驗(yàn)證實(shí)例
下面小編就為大家?guī)硪黄猨Query之簡單的表單驗(yàn)證實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
jQuery實(shí)現(xiàn)消息滾動播放效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)消息滾動播放效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-02-02
jQuery超酷平面式時鐘效果代碼分享
這篇文章主要介紹了jQuery制作的超酷平面式時鐘效果，把日期和時間通過橫向刻度條展現(xiàn)，推薦給大家，有需要的小伙伴可以參考下
2015-08-08
ajax異步請求詳解
做前端開發(fā)的朋友對于ajax異步更新一定印象深刻，本文主要介紹了關(guān)于ajax異步請求的那點(diǎn)事，具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
jquery tmpl模板(實(shí)例講解)
下面小編就為大家?guī)硪黄猨query tmpl模板(實(shí)例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
Jquery中國地圖熱點(diǎn)效果-鼠標(biāo)經(jīng)過彈出提示層信息的簡單實(shí)例
本篇文章主要是對Jquery中國地圖熱點(diǎn)效果-鼠標(biāo)經(jīng)過彈出提示層信息的簡單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
jQuery動態(tài)移除和添加背景圖片的方法詳解
這篇文章主要介紹了jQuery動態(tài)移除和添加背景圖片的方法,結(jié)合實(shí)例形式分析了jQuery針對頁面元素樣式及事件響應(yīng)的動態(tài)操作技巧,需要的朋友可以參考下
2017-03-03
jQuery實(shí)現(xiàn)base64前臺加密解密功能詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)base64前臺加密解密功能,結(jié)合實(shí)例形式分析了jquery.base64.js實(shí)現(xiàn)前臺base64加密與解密功能的實(shí)現(xiàn)方法,并給出了java實(shí)現(xiàn)后臺base64加密解密的操作示例對比驗(yàn)證加密效果,需要的朋友可以參考下
2017-08-08
jQuery把表單元素變?yōu)閖son對象
下面代碼可以把一個頁面容器中的表單元素封裝成一個json對象
2013-11-11