js實(shí)現(xiàn)放大鏡特效
更新時(shí)間:2017年05月18日 08:36:02 作者:Jack.Zhong
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)放大鏡特效,簡單實(shí)用的代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js放大鏡特效的實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; } .imgBox{ width: 1000px; margin: auto; text-align: center; } .small,.large{ font-size: 0; outline: 1px solid burlywood; margin: auto; } .small{ margin: 20px auto; } .large{ /*display: none;*/ } .small,.small img,.large{ width: 300px; height: 200px; overflow: hidden; } .large img{ width: 900px; height: 600px; } .small,.large{ position: relative; } .mark{ opacity: 0.5; background-color: #DEB887; z-index: 55; width: 100px; height: 66.666666666px; display: none; } .mark,.large img{ position: absolute; left: 0; top: 0; } </style> </head> <body> <div class="imgBox"> <div class="small"> <img src="img/img_14.jpg"/> <div class="mark"></div> </div> <div class="large"> <img src="img/img_14.jpg"/> </div> </div> <script type="text/javascript"> $(function(){ var $small = $(".small"), $mark = $(".mark"), $large = $(".large"); $small.on("mousemove",function(e){ // 在鼠標(biāo)移到小圖片中顯示出mark $mark.css("display","block"); // $large.css("display","block"); // 獲取mark的一半寬度高度 var hw = $mark.width()/2, hh = $mark.height()/2; // 獲取鼠標(biāo)在當(dāng)前圖片中的位置 var lf = e.pageX-$small.offset().left-hw, tt = e.pageY-$small.offset().top-hh; // 獲取mark的想x,y軸偏移率 var ix = lf/$small.width(), iy = tt/$small.height(); // 獲取邊緣線 var lb = 1-hw/$small.width()*2, tb = 1-hh/$small.height()*2; // 計(jì)算和邊緣的關(guān)系 var ix = ix<lb?ix>0?ix:0:lb, iy = iy<tb?iy>0?iy:0:tb; // 進(jìn)行大圖和小圖百分比計(jì)算 $mark.css("left",ix*100+"%").css("top",iy*100+"%"); $large.children().css("left",-ix*300+"%").css("top",-iy*300+"%"); }).on("mouseout",function(){ // 鼠標(biāo)移出后mark隱藏 $mark.css("display","none"); // $large.css("display","none"); }) }) </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JAVASCRIPT style 中visibility和display之間的區(qū)別
visibility屬性用來確定元素是顯示還是隱藏的,這用visibility="visible|hidden"來表示(visible表示顯示,hidden表示隱藏)。2010-01-01Js控制彈窗實(shí)現(xiàn)在任意分辨率下居中顯示
彈窗居中比較煩人的是怎么才能在任意分辨率下實(shí)現(xiàn)居中顯示,為了解決此問題,本文測試了一下案例在此與大家分享,有類似需求的朋友可以學(xué)習(xí)下2013-08-08javascript中獲取class的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄猨avascript中獲取class的簡單實(shí)現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07JS實(shí)現(xiàn)環(huán)形進(jìn)度條(從0到100%)效果
這篇文章主要介紹了JS實(shí)現(xiàn)環(huán)形進(jìn)度條(從0到100%)效果的相關(guān)資料,非常不錯,具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07SWFUpload多文件上傳及文件個(gè)數(shù)限制的方法
這篇文章主要介紹了SWFUpload多文件上傳及文件個(gè)數(shù)限制的方法,較為詳細(xì)的分析了SWFUpload組件實(shí)現(xiàn)多文件上傳的原理、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-05-05