前端入坑紀(jì) 38
眼看著明天便是周末了，來個類似淘寶櫥窗展示 那樣的簡單效果。
感興趣的，接著往下看哦！這次特意畫了圖來解釋鼠標(biāo)的“走位”！
OK，first things first！項目鏈接
喵星人的絕美睡顏
HTML 結(jié)構(gòu)
<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 結(jié)構(gòu)
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 結(jié)構(gòu)
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');
// 創(chuàng)建個canvas要用到的圖片對象
var imgSource = new Image();
// 當(dāng)每個li 里的img鼠標(biāo)滑過時，將櫥窗圖片變成這個圖片，并且將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");
}
}
// 鼠標(biāo)在imgsWrp滑過時，顯示canvas
imgsWrp.onmouseenter = function() {
can1.style.display = "block";
}
// 鼠標(biāo)滑出時，隱藏canvas
imgsWrp.onmouseout = function() {
can1.style.display = "none";
}
// 鼠標(biāo)在imgsWrp移動時，對應(yīng)canvas移動的距離，然后繪制到canvas里
imgsWrp.onmousemove = function(evt) {
var mouseX = evt.clientX - navImgsWrp.offsetLeft;// imgsWrp里鼠標(biāo)的坐標(biāo) = 鼠標(biāo)在視窗里滑動的坐標(biāo) 減去 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的坐標(biāo)，在原圖截取點y的坐標(biāo)，截取的寬度，截取的高度，canvas內(nèi)開始繪制的點的x坐標(biāo)，canvas內(nèi)開始繪制的點的y坐標(biāo)，繪制的寬度，繪制的高度）
- 紅框代表截取了原圖最左上角時的狀態(tài)，藍(lán)框代表截取了原圖最右下角時的狀態(tài)。
- 鼠標(biāo)在imgsWrp里移動的過程中，mouseX，mouseY的變化 就是 對應(yīng)了 示意圖中 紅點 與 藍(lán)點 間的變化
不曉得這樣描述，是否已經(jīng)把這個表達(dá)清楚！感興趣的小伙伴多多閱讀體會下，也可以留言，互相交流！
好了，到此，本文告一段落！感謝您的閱讀！祝你身體健康，闔家幸福！
