Home > Article > Web Front-end > JS realizes e-commerce touch enlargement effect
JS The e-commerce touch amplification effect diagram can be used directly in our project as a plug-in. Students who are interested in JS can study our in depth JS code, you will get different results~~
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP中文网-电商放大镜</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#left{
padding: 0;
margin: 0;
width: 400px;
height: 400px;
border: 2px solid blue;
background: url(http://chuantu.biz/t6/17/1503469475x2063891122.jpg) no-repeat;
float: left;
cursor: crosshair;
position: relative;
box-sizing: border-box;
}
#box{
width: 200px;
height: 200px;
background: white;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
display: none;
box-sizing: border-box;
}
#cover{
width: 400px;
height: 400px;
background: red;
position: absolute;
left: 0;
top: 0;
opacity: 0;
box-sizing: border-box;
}
#right{
width: 400px;
height: 400px;
border: 2px solid black;
overflow: hidden;
position: relative;
display: none;
box-sizing: border-box;
}
#rpic{
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
var left = document.getElementById("left");
var right = document.getElementById("right");
var rpic = document.getElementById("rpic");
var box = document.getElementById("box");
var cover = document.getElementById("cover");
// 给左侧加鼠标移动事件
cover.onmousemove = function(){
//获得事件对象
var ev = window.event;
var mouse_left = ev.offsetX || ev.layerX;
var mouse_top = ev.offsetY || ev.layerY;
// document.title = mouse_left + '|' + mouse_top;
//计算色块的位置
var box_left = mouse_left - 100;
var box_top = mouse_top - 100;
// 判断是否超出
if (box_left < 0) {
box_left = 0;
}
if (box_left > 200) {
box_left = 200;
}
if (box_top < 0) {
box_top = 0;
}
if (box_top > 200) {
box_top = 200;
}
// 让色块移动
box.style.left = box_left + 'px';
box.style.top = box_top + 'px';
//计算右侧图片位置
var rpic_left = box_left*-2;
var rpic_top = box_top*-2;
// 让右侧移动
rpic.style.left = rpic_left + 'px';
rpic.style.top = rpic_top + 'px';
}
//给左侧加鼠标移入事件
cover.onmouseover = function(){
// 让左侧色块和右侧隐藏
box.style.display = 'block';
right.style.display = 'block';
}
// 给左侧加鼠标移出事件
cover.onmouseout = function(){
// 让左侧色块和右侧隐藏
box.style.display = 'none';
right.style.display = 'none';
}
}
</script>
</head>
<body>
<div id="left">
<div id="box"></div> <!-- box 放置原图图片 -->
<div id="cover"></div> <!-- cover 放置原图图片的盖子 -->
</div>
<div id="right">
<img src="http://chuantu.biz/t6/17/1503469419x2063891122.jpg" id="rpic" alt="JS realizes e-commerce touch enlargement effect" >
</div>
</body>
</html>General idea, let’s take a look, and then take a look at the above code
1. First, separate two windows, one for placing the original image, and one for to place the enlarged image. Be sure to set the width and height of the window (important!)
2. Prepare two pictures, the original picture and the enlarged picture.
3. After the image is placed, add a mouse movement event to the original image window
4. Obtain the event object, calculate the position of the color block, and determine whether it exceeds the limit. If it exceeds, let the small color block be fixed
5. Let The color block moves with the movement of the mouse
6. Calculate the position of the picture on the right side and let the right side move
7. Add a mouse move-in event to the left side so that the color block on the left side and the right side are displayed
8. Give the left side Add a mouse move event on the side to hide a big pit on the left color block and the right side. At this time, when you move the color block, you will find that the color block is stuck and the color block is running around.
PHP中文网 to search for more~
Related recommendations:
js realizes background animation splitting
realizes compatibility with various browsing Music player js code
The above is the detailed content of JS realizes e-commerce touch enlargement effect. For more information, please follow other related articles on the PHP Chinese website!