JS, 전자상거래 터치 확대 효과 실현-JS 튜토리얼-php.cn

JS, 전자상거래 터치 확대 효과 실현

韦小宝

풀어 주다： 2017-11-21 09:25:57

원래의

1779명이 탐색했습니다.

JS전자상거래 터치 확대 효과 다이어그램은 우리 프로젝트에서 플러그인으로 직접 사용할 수 있습니다. JS에 관심이 있는 학생들은 JS 코드를 깊이 있게 연구하면 다른 결과를 얻을 수 있습니다. ~~

JS, 전자상거래 터치 확대 효과 실현

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 + &#39;|&#39; +  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 + &#39;px&#39;;
box.style.top = box_top + &#39;px&#39;;

//计算右侧图片位置
var rpic_left = box_left*-2;
var rpic_top = box_top*-2;

// 让右侧移动
rpic.style.left = rpic_left + &#39;px&#39;;
rpic.style.top = rpic_top + &#39;px&#39;;

}

//给左侧加鼠标移入事件
cover.onmouseover = function(){
// 让左侧色块和右侧隐藏
box.style.display = &#39;block&#39;;
right.style.display = &#39;block&#39;;
}

// 给左侧加鼠标移出事件
cover.onmouseout = function(){
// 让左侧色块和右侧隐藏
box.style.display = &#39;none&#39;;
right.style.display = &#39;none&#39;;
}
}

</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, 전자상거래 터치 확대 효과 실현" >
    </div>
</body>
</html>

로그인 후 복사

일반적으로 살펴보고 위의 코드를 살펴보세요

1 먼저 Value 원본을 저장하는 두 개의 창을 분리합니다. 확대된 이미지를 배치하는 데 사용되는 이미지입니다. 창의 너비와 높이를 꼭 설정해주세요(중요!)
2. 원본 사진과 확대 사진 2장을 준비하세요.
3. 이미지 배치 후 원본 이미지 창에 마우스 이동 이벤트 추가
4. 이벤트 객체를 획득하고, 색상 블록의 위치를 계산하고, 초과하는지 확인하고, 초과하면 작은 색상 블록 수정
5. 마우스 움직임에 따라 컬러 블록을 이동시키세요
6. 오른쪽 그림의 위치를 계산하고 오른쪽을 이동시키세요
7. 왼쪽 컬러 블록과 왼쪽 컬러 블록이 움직이도록 이벤트에 마우스를 추가하세요. 8. 왼쪽 컬러 블록과 오른쪽에 큰 구멍이 숨겨져 있도록 왼쪽에 마우스 이동 이벤트를 추가합니다. 이때 컬러 블록을 이동하면 찾을 수 있습니다. 위 내용은 전자상거래의 터치 확대 효과를 구현하기 위한 JS의 소스코드 및 일반적인 아이디어입니다. 관심 있는 학생은 주목해주세요
PHP 중국어 홈페이지
검색해 보세요. 더보기~