前端入坑纪 38
眼看着明天便是周末了，来个类似淘宝橱窗展示 那样的简单效果。
感兴趣的，接着往下看哦！这次特意画了图来解释鼠标的“走位”！
OK，first things first！项目链接
喵星人的绝美睡颜
HTML 结构
<div class="mWrp">
<div class="navImgsWrp">
<div id="imgsWrp" class="outWrp">
</div>
<ul class="navImg clear">
<li>
<a href="javascript:;" data-src="wrap/img/pic01.jpg">
</a>
</li>
<li>
<a href="javascript:;" data-src="wrap/img/pic02.jpg">
</a>
</li>
<li>
<a href="javascript:;" data-src="wrap/img/pic03.jpg">
</a>
</li>
<li>
<a href="javascript:;" data-src="wrap/img/pic04.jpg">
</a>
</li>
<li>
<a href="javascript:;" data-src="wrap/img/pic05.jpg">
</a>
</li>
</ul>
<canvas id="can1" width="640" height="400"></canvas>
</div>
</div>
ul 里面的 li 都是左浮动，canvas 是相对于 navImgsWrp 绝对定位到 outWrp的右边。
CSS 结构
body {
padding: 0;
margin: 0;
border-top: 1px solid #f4f4f4;
background-color: #F4F4F4;
}
p {
padding: 0;
margin: 0;
}
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
a {
text-decoration: none;
color: #525252;
}
img {
vertical-align: middle;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clear::after {
display: block;
content: "";
clear: both;
}
.mWrp {
max-width: 1190px;
margin: 0 auto;
}
.navImgsWrp {
position: relative;
margin-top: 6px;
width: 40%;
background-color: #f7f7f7;
box-shadow: 0 0 3px #ccc, 0 0 6px #cfcfcf;
}
.navImg li {
float: left;
width: 18.5%;
margin: 6px .75%
}
.navImg li a {
display: block;
}
.navImg li img {
width: 100%;
}
#can1 {
position: absolute;
right: -650px;
top: 0;
z-index: 9;
display: none;
box-shadow: 0 0 3px #ccc, 0 0 6px #f1f1f1;/*兴趣使然，写了个双阴影的效果*/
}
JS 结构
var can1 = document.getElementById('can1');
var navImgsWrp = document.getElementsByClassName('navImgsWrp')[0];
var imgsWrp = document.getElementById('imgsWrp');
var targetImg = imgsWrp.getElementsByTagName('img')[0];
var mls = document.getElementsByClassName('navImg')[0].getElementsByTagName('img');
var ctx = can1.getContext('2d');
// 创建个canvas要用到的图片对象
var imgSource = new Image();
// 当每个li 里的img鼠标滑过时，将橱窗图片变成这个图片，并且将img父级a上的data-src值赋给imgSource.src
for (var i = 0; i < mls.length; i++) {
mls[i].onmouseover = function() {
targetImg.src = this.src;
imgSource.src = this.parentNode.getAttribute("data-src");
}
}
// 鼠标在imgsWrp滑过时，显示canvas
imgsWrp.onmouseenter = function() {
can1.style.display = "block";
}
// 鼠标滑出时，隐藏canvas
imgsWrp.onmouseout = function() {
can1.style.display = "none";
}
// 鼠标在imgsWrp移动时，对应canvas移动的距离，然后绘制到canvas里
imgsWrp.onmousemove = function(evt) {
var mouseX = evt.clientX - navImgsWrp.offsetLeft;// imgsWrp里鼠标的坐标 = 鼠标在视窗里滑动的坐标 减去 imgsWrp相对于视窗里的偏移（刚好是父级navImgsWrp的offsetLeft，offsetTop）
var mouseY = evt.clientY - navImgsWrp.offsetTop;
var sx = mouseX / imgsWrp.offsetWidth * 640;
var sy = mouseY / imgsWrp.offsetHeight * 400;
ctx.drawImage(imgSource, sx, sy, 640, 400, 0, 0, 640, 400)
}
示意图
- 大图是1280宽，800高
- drawImage（图片对象，在原图截取点x的坐标，在原图截取点y的坐标，截取的宽度，截取的高度，canvas内开始绘制的点的x坐标，canvas内开始绘制的点的y坐标，绘制的宽度，绘制的高度）
- 红框代表截取了原图最左上角时的状态，蓝框代表截取了原图最右下角时的状态。
- 鼠标在imgsWrp里移动的过程中，mouseX，mouseY的变化 就是 对应了 示意图中 红点 与 蓝点 间的变化
不晓得这样描述，是否已经把这个表达清楚！感兴趣的小伙伴多多阅读体会下，也可以留言，互相交流！
好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！
