js 实现商品放大镜效果
知识点，需熟悉下面属性及含义：
offsetLeft //获取元素相对左侧的距离 （计算是从最左侧边框外开始）
offsetTop //获取元素相对顶部的距离 （计算是从最顶部边框外开始）
offsetWidth //获取元素宽度 （border + padding + margin）
offsetHeight //获取元素高度 （border +padding + margin）
clientLeft //测量的是元素左侧边框的宽度
clientHeight //测量的是元素的上边框的宽度
clientWidht //获取元素的宽度 不带边框（padding + margin）
clientHeight //获取元素的高度 不带边框 （padding + margin）
第一种： 商品类
正文：现在很多pc端商城网站详情页面都使用的有放大镜效果，那我们怎样使用一张图片实现放大镜效果呢？具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#smallImg{
width: 300px;
height: 300px;
position: relative;
}
#smallImg img{
width: 300px;
height: 300px;
}
#lay{
position: absolute;
left: 0;
top: 0;
border: 1px solid #666;
opacity: 0.6;
filter: alpha(opacity = 60);
background: #fff;
display: none;
cursor: move;
}
#bigImg{
width: 300px;
height: 300px;
position: absolute;
left: 320px;
overflow: hidden;
top: 0;
display: none;
}
#bigImg img{
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="smallImg">
<img src="img/1.jpg" alt="">
<div id="lay"></div>
</div>
<div id="bigImg">
<img src="img/1.jpg" alt="">
</div>
<script>
window.onload = function(){
var lay = getId("lay"),
smallImg = getId("smallImg"),
bigImg = getId("bigImg");
var imgB = bigImg.children[0]; //大图中的图片
var scale = 4; //缩放倍数 可调整
var w = smallImg.offsetWidth; //小图的宽高
var h = smallImg.offsetHeight;
lay.style.width = w / scale + "px";
lay.style.height = h / scale + "px"; imgB.style.width = w * scale + "px";
imgB.style.height = h * scale + "px";
smallImg.onmouseover = function(){
lay.style.display = "block";
bigImg.style.display = "block";
}
smallImg.onmouseout = function(){
lay.style.display = "none";
bigImg.style.display = "none";
}
smallImg.onmousemove = function(e){
e = e || window.event;
var x = e.clientX - lay.offsetWidth/2;
var y = e.clientY - lay.offsetHeight/2;
if(x <= 0){ //左侧边界判断
x = 0;
}
if(y <= 0){ //顶部边界判断
y = 0;
}
if(x >= smallImg.offsetWidth - lay.offsetWidth ){
x = smallImg.offsetWidth - lay.offsetWidth //右侧边界判断
}
if(y >= smallImg.offsetHeight - lay.offsetHeight ){
y = smallImg.offsetHeight - lay.offsetHeight //底部边界判断
}
lay.style.left = x + "px";
lay.style.top = y + "px";
imgB.style.left = -x*scale + "px"; //图片默认位置为0 0左上角位置 需要反向才能两者相对显示
imgB.style.top = -y*scale + "px";
}
}
function getId(id){
return document.getElementById(id);
}
</script>
</body>
</html>
好了商品外部放大镜效果就这样完成了，而且还带有边界检测。希望可以给有需要的人提供到帮助。
模拟效果图如下：
第二种： 商品内部实现放大效果
<!DOCTYPE html>
<html>
<head>
<title>测试放大镜</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#small_Box{
width: 300px;
height: 300px;
position: relative;
margin: 50px auto;
}
#small_Box img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="small_Box"><img src="1.jpg"></div>
<script type="text/javascript">
window.onload = function() {
var span = document.createElement("span");
var box = document.getElementById("small_Box");
var img = document.createElement("img");
var boxWidth = box.clientWidth;
var boxHeight = box.clientHeight;
var scale = 2;
span.style.position = "absolute";
span.style.width = boxWidth / scale+"px";
span.style.height = boxHeight / scale+"px";
span.style.display = 'none';
span.style.overflow = 'hidden';
span.style.backgroundColor = "rgba(255, 255, 255, 0.5)";
span.style.cursor = 'pointer';
box.appendChild(span);
img.setAttribute("src", "1.jpg");
img.style.width = scale*boxWidth + "px";
img.style.height = scale*boxHeight + "px";
box.onmouseover = function(e){
span.style.display = "block";
}
box.onmousemove = function(e){
e = e || window.event;
var x = e.clientX - span.clientWidth / scale - this.offsetLeft;
var y = e.clientY - span.clientHeight / scale - this.offsetTop;
if (x <= 0){
x = 0
}
if (x >= box.clientWidth - span.clientWidth){
x = box.clientWidth - span.clientWidth
}
if (y <= 0){
y = 0
}
if (y >= box.clientHeight - span.clientHeight){
y = box.clientHeight - span.clientHeight
}
span.style.left = x + "px";
span.style.top = y + "px"; img.style.marginLeft = -1 * span.offsetLeft * scale - x + "px";
img.style.marginTop = -1 * span.offsetTop * scale - y + "px";
span.appendChild(img);
} box.onmouseout = function(e){
span.style.display = "none";
}
}
</script>
</body>
</html>
好了商品内部放大镜效果就这样完成了，而且还带有边界检测。希望可以给有需要的人提供到帮助。
模拟效果图如下：
js 实现商品放大镜效果的更多相关文章
- JS 文本输入框放大镜效果
JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...
- 原生js实现的放大镜效果
这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...
- 前端JS电商放大镜效果
前端JS电商放大镜效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 利用JS实现购物网站商品放大镜效果
大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能, 就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于 放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. ...
- js代码实现放大镜效果
每当打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是非常好理解.如下图展示所见: 很是常见,在此记载一下,毕 ...
- 淘宝商品放大镜效果-JavaScript
效果图 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- canvas+javascript实现淘宝商品放大镜效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js原生淘宝京东宝贝放大镜效果
js实现商城放大镜效果 效果: 鼠标放上去会有半透明遮罩.右边会有大图片局部图. 鼠标移动时右边的大图片也会局部移动. 技术点: Event Event 是一个事件对象,当一个事件发生后,和当前事件发 ...
- js---电商中常见的放大镜效果
js中的放大镜效果 在电商中,放大镜效果是很常见的,如下图所示: 当鼠标悬浮时,遮罩所在区域在右侧进行放大. 在动手写之前,我们要先理清思路,分析需求,所需知识点,再将每一块进行组装,最后进行功能的完 ...
随机推荐
- 【转】.NET 4.5 使用async和await关键字调用异步方法
async和await关键字是.NET 4.5新增加的异步编程方式,通过使用这两个关键字可以轻松便捷的编写异步方法.使用async关键字声明异步方法,使用await关键字等待和获取异步方法返回的结果. ...
- redis(8)集群简介
一.集群 互联网每天都会产生大量的数据,单实例已经不能满足需求.但是如果依赖于硬件成本的提升,那就不是所有人能够负担的起的. 集群这个时候出现,一定程度上解决了这个问题.它通过互联网,将多个单实例连接 ...
- maven <resources>标签
<build> <finalName>com_dubbo_config</finalName> <resources> <resource> ...
- 缓存与DB数据一致性问题解决的几个思路
使用缓存必然会碰到缓存跟真实数据不一致的问题,虽然我们会在数据发生变化时通知缓存,但是这个延迟时间内必然会导致数据不一致,如何解决一般有下面几个思路: 首先,当这个延迟如果在业务上时可以接受的,比如文 ...
- JBPM学习第1篇：入门与安装
1.相关关键词 BPM:全称Business Process Management,即业务流程管理 BPEL:全称为Business Process Execution Language,即业务流程执 ...
- jquery对象与核心函数
原生js入口函数与jQuery入口函数的区别 1.window.onload与document.ready在加载时间上的差异 document.ready会先触发,其次才是window.onload ...
- 基于svg.js实现对图形的拖拽、选择和编辑操作
本文主要记录如何使用 svg.js 实现对图形的拖拽,选择,图像渲染及各类形状的绘制操作. 1.关于SVG SVG 是可缩放的矢量图形,使用XML格式定义图像,可以生成对应的DOM节点,便于对单个图形 ...
- AngularJs动态添加元素和删除元素
动态添加元素和删除元素 //通过$compile动态编译html var html="<div ng-click='test()'>我是后添加的</div>" ...
- iview中关于table组件内放入Input会失去焦点
table里面的数据是一个数组,父组件传入的.子组件是截图的内容.当每个input框数据发生变化时,把数据传给父组件.在父组件做表单的提交. github内已经提到过这个问题(https://gith ...
- css flexbox 弹性布局
flexbox 即css flexible box layout. ie9及以下不支持flexbox. flex详细规范(https://www.w3.org/TR/css-flexbox/) 为什么 ...