原生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;
}
/*中等大小的图片显示区域*/
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;
}
/**
大图显示区域
**/
#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';
//除去大图显示区
document.getElementById('largeImgBox').style.display = 'none';
}
</script>
</body>
</html>

以上所述是小编给大家介绍的原生JS实现的放大镜效果实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对澳门金沙网上娱乐网站的支持!

相关文章

  • 微信小程序顶部可滚动导航效果

    微信小程序顶部可滚动导航效果

    最近领导安排做一个小程序之做头部做导航分类效果,下面小编给大家分享实现代码,需要的朋友参考下吧
    2017-10-10
  • 用JS在浏览器中创建下载文件

    用JS在浏览器中创建下载文件

    前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑、在线代码编辑、iPresst等
    2014-03-03
  • js HTML5手机刮刮乐代码

    js HTML5手机刮刮乐代码

    这篇文章为大家详细主要介绍了js HTML5手机刮刮乐代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 如何手动实现es5中的bind方法详解

    如何手动实现es5中的bind方法详解

    这篇文章主要给大家介绍了关于如何手动实现es5中的bind方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面小编来一起学习学习吧
    2018-12-12
  • JavaScript生成GUID的多种算法小结

    JavaScript生成GUID的多种算法小结

    这篇文章介绍了GUID的几种生成算法,有需要的朋友可以参考一下
    2013-08-08
  • JS中递归函数

    JS中递归函数

    编程语言中,函数Func(Type a,……)直接或间接调用函数本身,则该函数称为递归函数。递归函数不能定义为内联函数。这篇文章主要介绍了JS中递归函数的相关资料,需要的朋友可以参考下
    2016-06-06
  • React精髓!一篇全概括小结(急速)

    React精髓!一篇全概括小结(急速)

    这篇文章主要介绍了React精髓!一篇全概括小结(急速),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • JavaScript预解析及相关技巧分析

    JavaScript预解析及相关技巧分析

    这篇文章主要介绍了JavaScript预解析及相关技巧,结合实例形式分析了JavaScript与解析的原理,步骤与相关技巧,需要的朋友可以参考下
    2016-04-04
  • js+html5实现侧滑页面效果

    js+html5实现侧滑页面效果

    这篇文章主要为大家详细介绍了js+html5实现侧滑页面效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 详解JS去重及字符串奇数位小写转大写

    详解JS去重及字符串奇数位小写转大写

    本篇文章主要介绍了详解JS去重及字符串奇数位小写转大写 ,非常具有实用价值,需要的朋友可以参考下。
    2016-12-12

最新评论