快捷導(dǎo)航

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ì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

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