这是我用原生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="data: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="data:images\product-s1.jpg" /></li>
<li><img src="data:images\product-s2.jpg" /></li>
<li><img src="data:images\product-s3.jpg" /></li>
<li><img src="data:images\product-s4.jpg" /></li>
<li><img src="data: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实现的放大镜效果的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  3. JS 文本输入框放大镜效果

    JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...

  4. jq与原生js实现收起展开效果

    jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  5. 前端JS电商放大镜效果

    前端JS电商放大镜效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  6. 原生JS实现图片放大镜插件

      前  言 我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的…… 先看一下我们要是实现的最终效果是怎么样的  ...

  7. 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  8. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  9. js 实现商品放大镜效果

    知识点,需熟悉下面属性及含义: offsetLeft           //获取元素相对左侧的距离 (计算是从最左侧边框外开始) offsetTop           //获取元素相对顶部的距离 ...

随机推荐

  1. UIImageView设置为圆形

       CGFloat headimageX = self.view.frame.size.width * 0.2; CGFloat headimageY = self.view.frame.size. ...

  2. Scut 进阶：EntityChangeEvent

    EntityChangeEvent 最重要的两个变量:ItemEvent.ChildrenEvent. ItemEvent 的功能流转: 从整个跳转图可以看出,这个功能的作用是 -- 自动将数据修改保 ...

  3. [Android] AudioTrack::start

    AudioTrack的start方法用于实现Android的音频输出,start究竟做了什么?回顾一下上一小节createTrack_l的最后部分,通过binder返回了一个Track的句柄,并以被保 ...

  4. UART RS232 的CTS与RTS

    目前较为常用的串口有9针串口(DB9)和25针串口(DB25),通信距离较近时(<12m),可以用电缆线直接连接标准RS232端口(RS422,RS485较远),若距离较远,需附加调制解调器(M ...

  5. 对LockWindowUpdate与GetDCEx的理解（以前不知道还可以锁住刷新）

    MSDN如是说:The LockWindowUpdate function disables or enables drawing in the specified window. Only one  ...

  6. 14.2 InnoDB and the ACID Model

    14.2 InnoDB and the ACID Model ACID 模型是一组数据库设计原则,强调可靠性方面对于商业数据和关键人物. MySQL 包含组件比如InnoDB存储引擎坚持ACID 模型 ...

  7. 【转】浮点格式IEEE754详解

    原文网址:http://www.cnblogs.com/zjujunge/archive/2012/09/13/2682613.html Intel聘请了最好的数值分析家来为8087FPU设计浮点数格 ...

  8. 【转】Eclipse导入library的时候报：Found 2 versions of android-support-v4.jar in the dependency list

    原文网址:http://www.07net01.com/2015/03/779691.html 错误类型:Eclipse导入library的时候报:Found 2 versions of androi ...

  9. 给Eclipse提速的7个技巧（转载的）

      大约一个月前,我发表了一篇博客,其中介绍了对Eclipse的爱与恨. 有些人问我如何给Eclipse提速,这篇文章就来讨论这个问题.顺带提一下,这篇文章不是比较IDE,所以不要说你讨厌某个IDE而 ...

  10. 你需要知道的九大排序算法【Python实现】之插入排序

    三.插入排序 基本思想:插入排序的基本操作就是将一个数据插入到已经排好序的有序数据中,从而得到一个新的.个数加一的有序数据,算法适用于少量数据的排序,时间复杂度为O(n^2).是稳定的排序方法.插入算 ...