原生JS實現的放大鏡效果實例代碼
更新時間：2016年10月15日 10:08:46 作者：lzq1314
放大鏡大家在各大網站都能見到，下面小編給大家分享一段 ，代碼是基于原生js實現的放大鏡效果，代碼簡單易懂，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧
這是我用原生js寫的放大鏡效果，與各種各樣的框架技術相比，我喜歡使用原生的js，在這里，想和大家一起談談原生和框架技術的理解與個人喜好。
<!DOCTYPE HTML>
<html>
<head>
<title>js放大鏡效果</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<style>
*{
margin:0px;
padding:0px;
border:none;
list-style:none;
}
#box{
margin:80px auto;
width: 352px;
}
#box p
{
width: 350px;
height: 350px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
#box p img
{
width:350px;
height:350px;
}
#box h1
{
width: 352px;
height: 54px;
overflow:hidden;
position:relative;
}
#box h1 div
{
width:310px;
height: 54px;
margin:0px auto;
position:relative;
}
#box h1 div ul
{
position:absolute;
left: 0px;
top: 0px;
}
#box h1 ul li
{
width: 62px;
float: left;
}
#box h1 ul li img
{
width: 50px;
height: 50px;
padding: 1px;
border: 1px solid #CECFCE;
}
#box h1 img.hoveredThumb{
border: 2px solid #e4393c;
padding: 0;
}
/*中等大小的圖片顯示區(qū)域*/
p#medImgBox{
position: relative;
}
#jing{
position: absolute;
left: 0;
top: 0;
width: 175px;
height: 175px;
border-radius:50%;
background: #ffd;
opacity: 0.7;
display: none;
}
/*懸于圖片/jing上方的專用于接收鼠標移動事件的
一個完全透明的層*/
#medImgBox #mian{
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
cursor: move;
opacity: 0;
}
/**
大圖顯示區(qū)域
**/
#largeImgBox{
position:absolute;
width: 175px;
height: 175px;
border-radius:50%;
border: 1px solid #faa;
top: 0px;
left: 352px;
overflow: hidden;
display: none;
}
#largeImg{
display: none;
position: absolute;
}
</style>
</head>
<body >
<div id="box">
<p id="medImgBox">
<img id="mediumImg" src="images/product-s1-m.jpg" />
<span id="jing"></span>
<span id="mian"></span>
<span id="largeImgBox">
<img id="largeImg"/>
</span>
</p>
<h1>
<div>
<ul id="list">
<li><img src="images\product-s1.jpg" /></li>
<li><img src="images\product-s2.jpg" /></li>
<li><img src="images\product-s3.jpg" /></li>
<li><img src="images\product-s4.jpg" /></li>
<li><img src="images\product-s1.jpg" /></li>
</ul>
</div>
</h1>
</div>
<script>
var imgList = document.querySelectorAll('#box ul li img');
for(var i=0; i<imgList.length; i++){
var img = imgList[i];
img.onmouseover = changeThumbImg;
}
function changeThumbImg(){
var previousHovered = document.querySelector('.hoveredThumb');
if(previousHovered==null){
this.className = 'hoveredThumb';
changeMediumImg(this.src); //修改中等圖片的src
}else if(previousHovered!=this){
previousHovered.removeAttribute('class');
this.className = 'hoveredThumb';
changeMediumImg(this.src); //修改中等圖片的src
}
}
function changeMediumImg(thumbSrc){
var dotIndex = thumbSrc.lastIndexOf('.');
var prefix = thumbSrc.substring(0, dotIndex);
var suffix = thumbSrc.substring(dotIndex);
var mediumSrc = prefix + '-m'+suffix;
document.getElementById('mediumImg').src = mediumSrc;
}
/**
為放大鏡jing添加鼠標移動事件
**/
document.querySelector('#mian').onmousemove =
function(event){
var x = event.offsetX; //事件相對于事件源的偏移量
var y = event.offsetY;
var jing = document.getElementById('jing');
var w = jing.offsetWidth; //jing的寬和高
var h = jing.offsetHeight;
var left = x<w/2 ? 0 : (x-w/2);
var top = y<h/2 ? 0 : (y-h/2);
if(x>(w*2-w/2)){
left = w*2 - w;
}
if(y>(h*2-h/2)){
top = h*2 - h;
}
jing.style.left = left+'px';
jing.style.top = top+'px';
//修改大圖的位置/
var largeImg = document.getElementById('largeImg');
largeImg.style.left = (-left*largeImg.width/350) + 'px';
largeImg.style.top = (-top*largeImg.height/350)+'px';
}
document.querySelector('#mian').onmouseover = function(){
//顯示jing
var jing = document.getElementById('jing');
jing.style.display = 'block';
var largeImgBox = document.getElementById('largeImgBox');
largeImgBox.style.display = 'block';
//獲取當前要顯示的大圖的src
var src = document.querySelector('#mediumImg').src;
var dotIndex = src.lastIndexOf('.');
var prefix = src.substring(0, dotIndex-2);
var suffix = src.substring(dotIndex);
src = prefix + '-l'+ suffix;
var largeImg = document.getElementById('largeImg');
largeImg.src = src;
largeImg.style.display='block';
}
document.querySelector('#mian').onmouseout =
function(){
//除去jing
var jing = document.getElementById('jing');
jing.style.display = 'none';
//除去大圖顯示區(qū)
document.getElementById('largeImgBox').style.display = 'none';
}
</script>
</body>
</html>
以上所述是小編給大家介紹的原生JS實現的放大鏡效果實例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的，在此也非常感謝大家對腳本之家網站的支持！
相關文章
微信小程序實現點擊按鈕修改view標簽背景顏色功能示例【附demo源碼下載】
這篇文章主要介紹了微信小程序實現點擊按鈕修改view標簽背景顏色功能,涉及微信小程序事件響應及數值運算實現動態(tài)設置view背景色樣式的相關操作技巧,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了javascript實現無限聯動菜單的方法和示例，思路非常棒,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了如何獲取當前年份的周數列表,并計算當前日期是第幾周,代碼基于ISO8601標準,計算每年的第一周從第一個星期四開始,需要的朋友可以參考下2024-11-11
JavaScript 中的12種循環(huán)遍歷方法【總結】
本文給大家總結了12種JavaScript 中的1循環(huán)遍歷方法,每種方法通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
js下彈出窗口的變通...2007-04-04
JavaScript console對象與控制臺使用示例詳解
這篇文章主要介紹了JavaScript console對象與控制臺的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-10-10
FileReader?包含了一套完整的事件模型,用于捕獲讀取文件時的狀態(tài),下面這篇文章主要給大家介紹了關于JS前端文件讀取FileReader操作方法的相關資料,需要的朋友可以參考下2024-08-08
JS控制文本框textarea輸入字數限制的方法，需要的朋友可以參考一下2013-06-06
深入理解JavaScript系列(11) 執(zhí)行上下文（Execution Contexts）
本章我們要講解的是ECMAScript標準里的執(zhí)行上下文和相關可執(zhí)行代碼的各種類型2012-01-01
利用BootStrap的Carousel.js實現輪播圖動畫效果
這篇文章主要介紹了利用BootStrap的Carousel.js實現輪播圖動畫效果的相關資料,需要的朋友可以參考下2016-12-12