原生js實(shí)現(xiàn)放大鏡特效
本文實(shí)例為大家分享了js實(shí)現(xiàn)放大鏡特效的具體代碼,供大家參考,具體內(nèi)容如下
掌握頁面元素定位和移動(dòng)
放大鏡關(guān)鍵原理:鼠標(biāo)在小圖片上移動(dòng)時(shí),通過捕捉鼠標(biāo)在小圖片上的位置定位大圖片的相應(yīng)位置
技術(shù)點(diǎn):事件捕獲、定位
offsetLeft與style.left的對(duì)比:
1)offsetLeft是與父級(jí)元素的距離,不包過滾動(dòng)條的距離
2)style.left返回的是字符串,如30px,offsetLeft返回的是數(shù)值30
3)style.lft是可讀寫的,offsetLeft是只讀的,所以要改變div的位置只能修改style.left
4)style.left的值需要事先定義,否則取到的值為空
難點(diǎn):計(jì)算:如何讓小圖片的放大鏡和大圖片同步移動(dòng)
距離定位圖解:
具體代碼:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } #demo{ display: block; width: 400px; height: 255px; margin: 50px; position: relative; border: 1px solid #ccc; } #small-box{ position: relative; z-index: 1; } #float-box{ display: none; width: 160px; height: 120px; position: absolute; background: #ffffcc; border: 1px solid #ccc; filter: alpha(opacity=50); opacity: 0.5; } #mark{ position: absolute; display: block; width: 400px; height: 255px; background-color: #fff; filter: alpha(opacity=0); opacity: 0; z-index: 10; } #big-box{ display: none; position: absolute; top: 0; left: 460px; width: 400px; height: 300px; overflow: hidden; border: 1px solid #ccc; z-index: 1; } #big-box img{ position: absolute; z-index: 5; } </style> <script> window.onload=function(){ var $=function(id){ return document.getElementById(id); } var Demo = $("demo"); var SmallBox = $("small-box"); var Mark = $("mark"); var FloatBox = $("float-box"); var BigBox = $("big-box"); var BigBoxImage = BigBox.getElementsByTagName("img")[0]; Mark.onmouseover = function(){ FloatBox.style.display = "block"; BigBox.style.display = "block"; } Mark.onmouseout = function(){ FloatBox.style.display = "none"; BigBox.style.display = "none"; } Mark.onmousemove = function(e){ var _event = e||window.event//兼容多個(gè)瀏覽器的參數(shù)模式 var left = _event.clientX - Demo.offsetLeft - SmallBox.offsetLeft - FloatBox.offsetWidth/2; var top = _event.clientY - Demo.offsetTop - SmallBox.offsetTop - FloatBox.offsetHeight/2; if(left < 0){ left = 0; }else if(left > Mark.offsetWidth - FloatBox.offsetWidth){ left = Mark.offsetWidth - FloatBox.offsetWidth; } if(top < 0){ top = 0; }else if(top > Mark.offsetHeight - FloatBox.offsetHeight){ top = Mark.offsetHeight - FloatBox.offsetHeight; } FloatBox.style.left = left + 'px'; FloatBox.style.top = top + 'px'; var percentX = left / (Mark.offsetWidth - FloatBox.offsetWidth); var percentY = top / (Mark.offsetHeight - FloatBox.offsetHeight); BigBoxImage.style.left = -percentX * (BigBoxImage.offsetWidth - BigBox.offsetWidth)+'px'; BigBoxImage.style.top = -percentY * (BigBoxImage.offsetHeight - BigBox.offsetHeight)+'px'; } } </script> <body> <div id="demo"> <div id="small-box"> <div id="mark"></div> <div id="float-box"></div> <img src="img/macbook-small.jpg" /> </div> <div id="big-box"> <img src="img/macbook-big.jpg" /> </div> </div> </body> </html>
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
輕松實(shí)現(xiàn)js彈框顯示選項(xiàng)
這篇文章主要為大家詳細(xì)介紹了js輕松實(shí)現(xiàn)彈框顯示選項(xiàng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09bootstrap-datetimepicker實(shí)現(xiàn)只顯示到日期的方法
這篇文章主要介紹了bootstrap-datetimepicker實(shí)現(xiàn)只顯示到日期的方法,涉及bootstrap插件相關(guān)操作的設(shè)置與使用技巧,需要的朋友可以參考下2016-11-11JavaScript將對(duì)象數(shù)組按字母順序排序的方法詳解
這篇文章主要介紹了JavaScript如何將對(duì)象數(shù)組按字母順序排序,本文介紹了三種解決方案,if條件語句 + sort(),localeCompare() + sort(),Collator() + sort(),有感興趣的同學(xué)可以跟著小編一起來看看2023-07-07JS中使用gulp實(shí)現(xiàn)壓縮文件及瀏覽器熱加載功能
這篇文章主要介紹了JS中使用gulp實(shí)現(xiàn)壓縮文件及瀏覽器熱加載功能,需要的朋友可以參考下2017-07-07el-date-picker?限制開始時(shí)間和結(jié)束時(shí)間的代碼實(shí)現(xiàn)
在Vue.js中使用Element?UI庫的el-date-picker組件時(shí),可以通過設(shè)置picker-options來限制開始時(shí)間和結(jié)束時(shí)間的選擇范圍,下面通過例子介紹el-date-picker?限制開始時(shí)間和結(jié)束時(shí)間的實(shí)現(xiàn),感興趣的朋友一起看看吧2024-08-08javascript設(shè)計(jì)模式 – 策略模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 策略模式,結(jié)合實(shí)例形式分析了javascript策略模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04JavaScript實(shí)現(xiàn)表格表單的隨機(jī)選擇和簡單的隨機(jī)點(diǎn)名
本文主要介紹了JavaScript實(shí)現(xiàn)表格表單的隨機(jī)選擇和簡單的隨機(jī)點(diǎn)名,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08原生js實(shí)現(xiàn)隨機(jī)點(diǎn)名
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)隨機(jī)點(diǎn)名,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07