原生js实现淘宝放大镜效果

大家经常逛淘宝、天猫、京东这类网站的时候往往会看到一些图片展示的效果，例如：把鼠标放在图片上右侧会出现一个放大的预览区域，这就是所谓放大镜效果。今天闲着没事干，就打算复习一下JavaScript基础，用一下基础知识制作一个类似于淘宝的放大镜效果。

先说一下这个效果需要用到的一些基础知识：

css相对定位：position：absolute；

鼠标移入移出以及移动事件：onmouseover、onmouseout、onmousemove，记住这些事件一般不会单个出现

获取鼠标点击坐标：X轴：clientX，Y轴：clientY

当前元素相对于父元素的左位移：offsetLeft

当前元素相对于父元素的上位移：offsetTop

当前元素的实际高、宽度（不包括滚动条）：offsetWidth、offsetHeight

球当前元素的最小值，最大值：Math.min()、Math.max()；

话不多说直接上代码吧！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜效果</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#demo{
display: block;
width: 400px;
height: 255px;
margin: 50px;
position: relative;
border: 1px solid #ccc;
}
#float-box{
position: relative;
z-index: 1;
}
#small-box{
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
cursor: move;
}
#big-box{
display: none;
position: absolute;
top: 0;
left: 460px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;

}
#big-box img{
position: absolute;
z-index: 5;
}

</style>
</head>
<body>
<div id="demo">
<div id="float-box">
<div id="small-box"></div>
<img src="../images/macbook-small.jpg">
</div>
<div id="big-box">
<img src="../images/macbook-big.jpg">
</div>
</div>
<script type="text/javascript">
window.onload = function(){

//获取到需要的元素
var demo = document.getElementById('demo');
var smallBbox = document.getElementById('small-box');
var floatBox = document.getElementById('float-box');
var bigBox = document.getElementById('big-box');
var bigBoxImg = bigBox.getElementsByTagName('img')[0];

floatBox.onmouseover = function(){
smallBbox.style.display = "block";
bigBox.style.display = "block";
}
floatBox.onmouseout = function(){
smallBbox.style.display = "none";
bigBox.style.display = "none";
}
floatBox.onmousemove = function(e){
var _event = e || event;
console.log(_event.clientY);
var l = _event.clientX - demo.offsetLeft - floatBox.offsetLeft - smallBbox.offsetWidth/2;//除2是因为让鼠标点出现在放大遮罩的中心位置
var t = _event.clientY - demo.offsetTop - floatBox.offsetTop - smallBbox.offsetHeight/2;

var demoWidth = demo.offsetWidth;
var demoHeight = demo.offsetHeight;

var smallBboxWidth = smallBbox.offsetWidth;
var smallBboxHeight = smallBbox.offsetHeight;
//鼠标可以移动的最大XY的距离
var maxX = demoWidth - smallBboxWidth;
var maxY = demoHeight - smallBboxHeight;

l = Math.min(maxX,Math.max(0,l));
t = Math.min(maxY,Math.max(0,t));
smallBbox.style.left = l +"px";
smallBbox.style.top = t +"px";

var percentX = l / (floatBox.offsetWidth - smallBboxWidth);//求出小图遮罩的坐标占可移动区域的比例
var percentY = t / (floatBox.offsetHeight - smallBboxHeight);

bigBoxImg.style.left = -percentX *(bigBoxImg.offsetWidth - bigBox.offsetWidth) +"px";//大图对的移动方向和小图遮罩的移动方向相反
bigBoxImg.style.top = -percentY*(bigBoxImg.offsetHeight - bigBox.offsetHeight)+"px";

}
}
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Javascript仿京东放大镜的效果

    随便找一个图片吧.小伙伴们,想怎么玩就怎么玩(注意路径),亲自测试,绝对没问题. 话不多说,请看代码: <html> <head> <meta charset="utf-8"> <style type="text/css"> body,div{margin: 0; padding: 0;} #zhuti{ margin:50px; position: relative; } #small{ width: 300px;

  • 原生js仿淘宝网商品放大镜效果

    原生js仿淘宝网商品放大镜效果

    效果图:(实例图片由自己添加) 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿淘宝放大镜特效</title> <style type="text/css"> *{margin: 0;padding: 0;} #demo{width:350px;height:

  • 原生JavaScript实现的简单放大镜效果示例

    本文实例讲述了原生JavaScript实现的简单放大镜效果.分享给大家供大家参考,具体如下: 原理: 其实所谓的放大就是准备两张一样的图片,除大小不一样.鼠标移动到不同位置,将会显示大图片对应的图片内容. 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大镜效果</title> </h

  • 纯js仿淘宝京东商品放大镜功能

    纯js仿淘宝京东商品放大镜功能

    效果图: 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题</title> <style> *{ margin: 0px; padding: 0px; } .imgContent{ width: 420px; height: 300px; pos

  • 原生JS实现的放大镜特效示例【测试可用】

    原生JS实现的放大镜特效示例【测试可用】

    本文实例讲述了原生JS实现的放大镜特效.分享给大家供大家参考,具体如下: 最近在做ecshop的二次开发,遇到一些jquery插件与ecshop的冲突, 调整冲突的需要修改的地方又太多,修改起来得不偿失, 故做了一个原生的js实现商品详情页面的放大镜效果,以避免冲突! 下面介绍一下代码及实现过程: 首先,创建fangda.html文件 在文件头部的<head></head>中添加文件的css样式,即: <style type="text/css">

  • JavaScript实现京东购物放大镜和选项卡效果的方法分析

    JavaScript实现京东购物放大镜和选项卡效果的方法分析

    本文实例讲述了JavaScript实现京东购物放大镜和选项卡效果的方法.分享给大家供大家参考,具体如下: 购物网站点击商品后,都会有一个查看物品图片,并且可以放大仔细观察物品的功能.这个功能看起来复杂,其实实现起来非常简单.下面我们来一起做这个小效果吧! 首先,我们看一下页面的布局: 1.小图片显示区,上面有一个方形遮罩层 2.缩略图横向列表 3.大图显示区域 然后,我们写出开发步骤: 1.编写3个区域的html布局,使他们位于同一个容器内 2.显示区域2的图片列表 3.给区域2的图片添加mou

  • JS实现电商放大镜效果

    前端JS电商放大镜效果,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>26-电商放大镜</title> <style type="text/css"> *{ padding: 0; margin: 0; } #left{ padding: 0;

  • JavaScript 图片切割效果(放大镜)第1/4页

    JavaScript 图片切割效果(放大镜)第1/4页

    上一个版本由于是初次接触这类效果,而且是三个大功能一起开发,能力所限,所以仅仅是实现了效果就完成了. 近来我把其中的 拖放效果 和 缩放效果 单独出来研究,经过整理和完善,再套进切割效果,个人感觉效果已经不错了. 要说明的是这个只是一个效果,并不是真正的切割图片,要获取真正的切割图片请参考 图片切割系统 . 效果预览请看这里 完整实例下载代码太多贴不出来,只好给个效果图: 程序说明 这个效果主要分三个部分:层的拖放.层的缩放.图片切割(包括预览). 其中 层的拖放 和 层的缩放 我已经在其他两篇

  • 电子商务网站上的常用的js放大镜效果

    复制代码 代码如下: jsFiddleRun again Edit this fiddle Result HTML <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>放大镜</title> <style> img{ vertical-align:bottom;} .mod_zoom{ overflow:hidden; zoom:

  • 基于angularjs实现图片放大镜效果

    基于angularjs实现图片放大镜效果

    前言 一开始打算用原生的angularjs写,但是发现用原生angularjs,无论如何都不能获取里面图片的宽度和高度,因为angularjs内置的jquery方法里没有winth()  .height()方法. 最好我还是引入了jquery,在同一scope上绑定了宽度高度.下面上源码,顺便我会把里面的一些注意的点说一下. 效果图 首先说明下 1.首先使用了两个同级指令,并在两个同级指令间进行通信,同级指令间通信,非常简单,就是不要让同级的指令生成独立的scope,并且在同一个作用域下就完成了

  • JavaScript 图片放大镜（可拖放、缩放效果）第1/4页

    前些日子突然想做一个透镜效果,就突然想到了这个效果,于是找出当年"珍藏"的代码决定一尝所愿. 前言:这个程序主要分三部分:层的拖放.层的缩放.图片切割(包括预览). 其中层的拖放是很常见的效果,层的缩放有点难度,图片切割看着炫其实原理也很简单. 不过在实现的过程中也学习到很多以前不知道的东西,下面都会说明,希望大家从中也能学到东西. 原理: [拖放程序] 基本原理很简单,不知道的看代码就明白,其中参考了越兔和BlueDestiny的相关文章. 下面说一下比较有用的地方: [范围限制]

随机推荐