jquery實(shí)現(xiàn)圖片放大鏡效果
本文實(shí)例為大家分享了jquery實(shí)現(xiàn)圖片放大鏡效果的具體代碼,供大家參考,具體內(nèi)容如下
首先是HTML
<div id="box"> <div id="big"> <div> <img src="./img/可達(dá)鴨.jpg" alt=""> </div> <div id="fd"></div> </div> <div id="fdshow"> <img src="./img/可達(dá)鴨.jpg" alt=""> </div> </div>
這里主要是放入兩張照片,和一個(gè)空的標(biāo)簽,用于放大用
接下來(lái)是css樣式,這里非常重要,能不能成功放大這里占據(jù)了6成左右
<style> *{ margin: 0px; padding: 0px; } #box{ position: relative; } #big{ width: 500px; height: 300px; } #big img{ width: 500px; height: 300px; } #fd{ width: 100px; height: 100px; background-color: white; opacity: 0.4; position: absolute; top: 0; left: 0; display: none; } #fdshow{ width: 200px; height: 200px; overflow: hidden; position: relative; border: 1px solid; } #fdshow>img{ width: 1000px; height: 600px; position: absolute; top: 0px; left: 0px; } </style>
接下來(lái)是jq
<script> $("#big img").on("mousemove",function(a){ var x=a.pageX-$("#big").offset().left; var y=a.pageY-$("#big").offset().top; console.log(x,y) var style1={ top:y, left:x, "display":"block" }; $("#fd").css(style1); var style2={ 'left':-2*x, 'top':-2*y }; $("#fdshow>img").css(style2) }) </script>
效果達(dá)到放大2倍 (對(duì)css樣式的要求特別嚴(yán)格)
1.css 樣式 大圖片是小圖片的2倍
2.給大圖片外面套一個(gè)div設(shè)置一個(gè)是那個(gè)選圖片的div的2倍,然后給大圖片的div設(shè)置一個(gè)溢出部分隱藏 overflow: hidden;
3.獲取鼠標(biāo)在元素內(nèi)的位置
(1).獲取鼠標(biāo)相對(duì)于文檔的位置
(2).然后在獲取元素的在當(dāng)前可視區(qū)域的位置
(3).鼠標(biāo)在元素內(nèi)的位置 == 鼠標(biāo)相對(duì)于文檔的位置 減 獲取元素的在當(dāng)前可視區(qū)域的位置
4.給放大鏡框添加位置 就是鼠標(biāo)在元素內(nèi)的位置這一步就達(dá)到了放大鏡框跟這鼠標(biāo)走
5.給大圖片添加 top left值 就是偏移量
e ==> js中的 event
獲取鼠標(biāo)在元素內(nèi)的位置
(1).獲取鼠標(biāo)相對(duì)于文檔的位置
(2).然后在獲取元素的在當(dāng)前可視區(qū)域的位置
(3).鼠標(biāo)在元素內(nèi)的位置 == 鼠標(biāo)相對(duì)于文檔的位置 減 獲取元素的在當(dāng)前可視區(qū)域的位置
因?yàn)樯厦鎐ss樣式中寫入的 大圖片是小圖片的2倍 所以這里的偏移變應(yīng)該也是2倍
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JQuery判斷子iframe何時(shí)加載完成解決方案
需要知道iframe何時(shí)加載完成,用JQuery很簡(jiǎn)單就能實(shí)現(xiàn),具體如下,感興趣的朋友可以參考下,希望對(duì)大家有所幫助2013-08-08jQuery EasyUI Tab 選項(xiàng)卡問(wèn)題小結(jié)
這篇文章主要介紹了jQuery EasyUI Tab 選項(xiàng)卡問(wèn)題小結(jié),在項(xiàng)目開發(fā)階段很多朋友都遇到過(guò)此問(wèn)題,其實(shí)解決辦法很簡(jiǎn)單的,下面小編給大家分享下問(wèn)題原因及解決辦法,需要的朋友可以參考下2016-08-08jQuery基礎(chǔ)_入門必看知識(shí)點(diǎn)
下面小編就為大家?guī)?lái)一篇jQuery基礎(chǔ)_入門必看知識(shí)點(diǎn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07jQuery移動(dòng)端日期(datedropper)和時(shí)間(timedropper)選擇器附源碼下載
今天我給大家介紹一款非常有趣的日期和時(shí)間選擇器,它分為日期選擇器datedropper以及時(shí)間選擇器timedropper,他們倆尤其適合在移動(dòng)端上應(yīng)用。感興趣的小伙伴一起學(xué)習(xí)吧2016-04-04jQuery設(shè)置聚焦并使光標(biāo)位置在文字最后的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery設(shè)置聚焦并使光標(biāo)位置在文字最后的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08jquery插件hiAlert實(shí)現(xiàn)網(wǎng)頁(yè)對(duì)話框美化
hiAlert是一款基于jQuery的信息提示插件,它支持操作成功、操作失敗和操作提醒三種信息提示方式。hiAlert瀏覽器兼容性非常好,支持更改提示內(nèi)容,支持定位提示框的位置,可配置插件參數(shù)。2015-05-05jquery全選checkBox功能實(shí)現(xiàn)代碼(取消全選功能)
這篇文章主要介紹了jquery實(shí)現(xiàn)checkBox全選功能、取消全選功能,代碼簡(jiǎn)單,大家可以直接參考使用2013-12-12