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中的放大镜效果 在电商中,放大镜效果是很常见的,如下图所示: 当鼠标悬浮时,遮罩所在区域在右侧进行放大. 在动手写之前,我们要先理清思路,分析需求,所需知识点,再将每一块进行组装,最后进行功能的完 ...
随机推荐
- C++(笔)002
#include <iostream> //预处理器编译指令 int main() //函数头:对函数和程序其它部份之间的接口作出总结 int:函数的返回类型 { using namesp ...
- NodeJs接口token认证express框架passport实现方式Bearer认证
1.生成一个简单的express项目(命令:express passport-test),项目结构如下: 2.添加项目依赖: npm install passport --save npm insta ...
- sql server用户密码批量MD5加密
nodejs自带加密模块md5加密: var crypto = require('crypto'); function cryptoMD5(content){ var md5 = crypto.cre ...
- redis(6)lua脚本
一.lua脚本 lua是一种轻量小巧的脚本语言,用标准的C语言编写并以源代码形式开放,其设计目的是为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能. lua的详细内容你可以参考lua官方网站 ...
- javaweb之请求的转发和重定向
1.什么是请求转发和请求重定向? 请求转发: xxServlet收到请求,然后直接转发给yyServlet,然后yyServlet返回给客户端.整个过程中,客户端发出一个请求,收到一个响应. 重定向: ...
- 在CentOS 7下更改yum源与更新系统
在CentOS 7下更改yum源与更新系统. [1] 首先备份/etc/yum.repos.d/CentOS-Base.repo cp /etc/yum.repos.d/CentOS-Base.rep ...
- 搭建Jquery+SpringMVC+Spring+Hibernate+MySQL平台
一. 开发环境 1. 点击此查看并下载需要的 Eclipse IDE for Java EE Developers 开发工具,依赖于java,推荐选用32位 2. 点击此查看并下载需要的 MySQ ...
- JavaScript常用类
JS常用类 一.Number 1.常用数字 整数:10 小数:3.14 科学计数法:1e5 | 1e-5 正负无穷:Infinity | -Infinity 2.常用进制 二进制:0b1010 八进制 ...
- Regular Expression学习笔记
正则写法 var re = /a/;//简写 /.../里不能为空,因为会误以为是注释: var re = new RegExp('a'); 新建一个RegExp对象:和新建Array对象,Objec ...
- C++教程|菜鸟教程
https://www.runoob.com/cplusplus/cpp-tutorial.html 在线编辑器 http://www.runoob.com/try/runcode.php?filen ...