HTML代码:

div.box>div#left+div#buttom+div#right

div#left>img

div#buttom>div.small>img

CSS代码:

        .box{
position: relative;
}
#left{
width:310px;
height:310px;
border: 1px solid blueviolet;
}
#buttom{
width: 310px;
height: 40px;
margin-top: 10px;
}
#buttom .small{
border: 1px solid wheat;
float: left;
margin-right: 5px;
}
#right{
width: 400px;
height: 310px;;
position: absolute;
top:;
left:320px;
border: 1px solid #ccc;
display: none;
overflow: hidden;
}
#right img{
position: absolute;
top:;
left:;
}

JS代码:

     <script>
function $(id){
return document.getElementById(id);
}
window.onload = function () {
var left = $('left');
var button = $('buttom');
var right = $('right');
button.onmouseover = function (e) {
var e = e||window.event;//兼容事件
var imgobj = e.srcElement|| e.target; //获得目标事件源,即图片 ,ie下srcElement,火狐下target
if(imgobj.nodeName == 'IMG'){ //当目标事件源是图片时
// alert(imgobj.src);
var names = imgobj.src; //获得图片路径
console.log(names);
console.log(names.lastIndexOf('/'));//获得/的角标位
console.log(names.substring(names.lastIndexOf('/'))); //从角标位开始截至最后为图片名
var imgOldName = names.substring(names.lastIndexOf('/'));
var imgNewName = imgOldName.replace('1','2'); // 从改名来换路径
console.log(imgNewName);
left.innerHTML = '<img src=img'+imgNewName +'>';
}
};
//右边图片显示逻辑
left.onmouseover = function () {
right.style.display ='block';
var leftimg = left.getElementsByTagName('img')[0];
var names = leftimg.src;
var imgoldname = names.substring(names.lastIndexOf('/'));
var imgNewName = imgoldname.replace('2','3');
right.innerHTML = "<img src=img"+imgNewName+">";
var rightImg = right.getElementsByTagName('img')[0];
//添加移动事件
this.onmousemove = function (e) {
var e = e||window.event;
var l = e.offsetX|| e.layerX; //相对于事件源位置的兼容写法
var r = e.offsetY|| e.layerY;
//根据比例来定位大图坐标
rightImg.style.left = l/left.offsetWidth*(right.offsetWidth-rightImg.offsetWidth)+"px";
rightImg.style.top = r/left.offsetHeight*(right.offsetHeight-rightImg.offsetHeight)+"px";
}
}
//离开事件
left.onmouseout = function () {
right.style.display = 'none';
}
}
</script>

放大镜效果之js的更多相关文章

  1. 原生js实现放大镜效果

    今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...

  2. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

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

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

  4. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  5. jquery+js实现鼠标位移放大镜效果

    jQuery实现仿某东商品详情页放大镜效果 用jquery+js实现放大镜效果,效果大概如下图! 效果是不是大家很感兴趣,放大镜查看细节,下边大家可以详细看一看具体是怎么实现的.下边直接看代码! HT ...

  6. js、jquery实现放大镜效果

    在一些电商网站的商品详情页面,都会有放大镜效果,实现起来并不是很困难,今天用了两个小时,写了一个放大镜效果的实例,来分享给大家! 实现的效果大概是这个样子的 预览 先来看一下效果吧,点击下面的链接预览 ...

  7. js之放大镜效果

      HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

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

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

  9. js原生淘宝京东宝贝放大镜效果

    js实现商城放大镜效果 效果: 鼠标放上去会有半透明遮罩.右边会有大图片局部图. 鼠标移动时右边的大图片也会局部移动. 技术点: Event Event 是一个事件对象,当一个事件发生后,和当前事件发 ...

随机推荐

  1. _BLOCK_TYPE_IS_VALID错误

    _BLOCK_TYPE_IS_VALID宏用来检测这个内存块在当前堆上是否有效,但是这里的指针是一个临时变量,临时变量是在栈上分配的,函数清理栈时会自动回收这些内存,程序员无需管理. new 和 ma ...

  2. 使用BOOST.SPIRIT.X3的RULE和ACTION进行复杂的语法制导过程

    Preface 上一篇简述了boost.spirit.x3的基本使用方法.在四个简单的示例中,展示了如何使用x3组织构造一个语法产生式,与源码串匹配并生成一个综合属性.这些简单的示例中通过组合x3库中 ...

  3. sql 列设置默认值,语法查询知识点积累

    一.修改字段默认值 alter table 表名 drop constraint 约束名字   ------说明:删除表的字段的原有约束 alter table 表名 add constraint 约 ...

  4. set(二叉搜索树)

    找球号(一) 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 在某一国度里流行着一种游戏.游戏规则为:在一堆球中,每个球上都有一个整数编号i(0<=i<= ...

  5. C语言IO操作总结

    C语言IO操作总结C程序将输入看做字节流,流的来源是文件.输入设备.或者另一程序的输入:C程序将输出也看做字节流:流的目的是文件.视频显示等: 文件处理:1 :fopen("filename ...

  6. poj 1036 Gangsters

    http://poj.org/problem?id=1036 题意:N个土匪,伸缩门的范围是K, 时间T, 伸缩门在[0, k]范围内变动,每个单位时间可以不变伸长或者缩短一个单位.给出每个最烦到达的 ...

  7. RESTful 架构

    越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency).高 ...

  8. C语言随笔_return答疑

    1. 例子,看实例2-2.这道题有同学会问,那个return有什么用?这么讲吧,return是个英文单词,中文意思是“返回”,用在程序里也是返回的意思,返回啥呢?返回一个值.在func函数中,retu ...

  9. UVA 10047-The Monocycle(队列bfs+保存4种状态)

    题意:给你一张地图,S代表起点,T代表终点,有一个轮盘,轮盘平均分成5份,每往前走一格恰好转1/5,轮盘只能往前进,但可以向左右转90°,每走一步或是向左向右转90° 要花费1单位的时间,问最少的时间 ...

  10. Windows多线程同步系列之三-----事件对象

    事件是一个内核事件,内核事件是什么呢,我理解也不深入也不好说,暂且理解为一个内核维护的数据类型吧通过内核事件同步主要 的方法是对事件的信号有和无来进行同步. 比如当我们一个线程进入一段临界代码(独占代 ...