這篇文章給大家分享的是有關js之鼠標跟隨jquery版的示例分析的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)成立于2013年,是專業(yè)互聯(lián)網技術服務公司,擁有項目成都做網站、成都網站建設網站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元元江縣做網站,已為上家服務,為元江縣各地企業(yè)和個人服務,聯(lián)系電話:18980820575代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,div{ margin:0; padding:0; } img{ display:block; border:none; } .box{ position:relative; width:450px; margin:20px auto; } .box img{ float:left; margin-left:10px; width:100px; height:75px; border:1px solid #008000; } #mark{ display:none; position:absolute; top:0; left:0; z-index:10; width:400px; height:300px; border:1px solid #0077b0; } #mark img{ float:inherit; margin-left:0; border:none; width:100%; height:100%; } </style> </head> <body> <div class='box' id='box'> <img src="img/apple_1.jpg" alt="" bigImg='img/apple_1_bigger.jpg'> <img src="img/apple_2.jpg" alt="" bigImg='img/apple_2_bigger.jpg'> <img src="img/apple_3.jpg" alt="" bigImg='img/apple_3_bigger.jpg'> <img src="img/apple_4.jpg" alt="" bigImg='img/apple_4_bigger.jpg'> <div id='mark'> <img src="img/apple_1_bigger.jpg" alt=""> </div> </div> <script src='js/jquery-1.11.3.min.js'></script> <script> $(function(){ var $box = $("#box"),$mark = $("#mark"); var $boxOffset = $box.offset();//獲取當前元素的距離body的偏移 $box.children("img").bind("mouseover",function(e){ var e = e || window.event; e.target = e.target || e.srcElement; var left = e.clientX - $boxOffset.left+10; var top = e.clientY - $boxOffset.top+10; $mark.stop().show(500).css({left:left,top:top}).find("img").attr("src",e.target.getAttribute("bigImg")); }).bind("mousemove",function(e){ var e = e || window.event; e.target = e.target || e.srcElement; var left = e.clientX - $boxOffset.left+10; var top = e.clientY - $boxOffset.top+10; $mark.css({left:left,top:top}).find("img").attr("src",e.target.getAttribute("bigImg")); }).bind("mouseout",function(e){ $mark.stop().hide(500); }) }) </script> </body> </html>
感謝各位的閱讀!關于“js之鼠標跟隨jquery版的示例分析”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站vcdvsql.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
當前名稱:js之鼠標跟隨jquery版的示例分析-創(chuàng)新互聯(lián)
文章地址:http://vcdvsql.cn/article4/hcsoe.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供用戶體驗、小程序開發(fā)、響應式網站、企業(yè)網站制作、網站建設、建站公司
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)