JavaScript鼠标悬停放大demo2
2018-08-10 本文已影响5人
理子
111.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.main {
position: relative;
width: 990px;
height: 1611px;
margin: 0 auto;
background-color: #EEE;
margin-top: 20px;
}
.showImg {
height: 370px;
width: 310px;
background-color: yellow;
float: left;
position: relative;
}
.showImg .show1 {
width: 310px;
height: 310px;
background-color: purple;
line-height: 310px;
font-size: 0px;
text-align: center;
border: 1px solid silver;
}
.showImg .show1 #midImg {
vertical-align: middle;
}
.showImg .show2 {
margin-top: 10px;
width: 270px;
height: 40px;
background-color: white;
margin-left: 30px;
}
.showImg .show2 .smallImg li {
float: left;
text-align: center;
margin-right: 10px;
border: 1px solid silver;
/* background-color: blue; */
}
.showImg .show2 .smallImg div {
width: 40px;
height: 40px;
line-height: 40px;
font-size: 0px;
cursor: pointer;
}
.showImg .show2 .smallImg div img {
vertical-align: middle;
}
#enlarge {
position: absolute;
width: 310px;
height: 310px;
/* background-color: #fff; */
top: 0px;
left: 320px;
border: 1px solid silver;
display: none;
background: url('./img/01.jpg');
background-repeat: no-repeat;
}
.showContent {
box-sizing: border-box;
height: 370px;
width: 640px;
background-color: hotpink;
float: left;
margin-left: 20px;
}
.showContent h4 {
margin-top: 20px;
margin-left: 28px;
margin-bottom: 20px;
display: inline-block;
/* background-color: #fff; */
}
.showContent .con1 {
margin: 0 auto;
height: 150px;
width: 600px;
/* background-color: yellow; */
/* html中超出盒子宽度会自动换行的，不用设置，如果你连续的英文之间没用空格，
那么它会以为是一个单词，就不会换行，这个时候加上word-break: break-all; word-wrap:break-word; */
/* word-break: break-all; word-wrap:break-word; */
}
.originalImg {
position: absolute;
top: 0px;
left: 100px;
display: none;
}
#square {
cursor: move;
/* width: 130px;
height: 130px; */
background: url('./img/mask2.png');
/* opacity: 0.5; */
left: 0px;
top: 0px;
position: absolute;
/* display: none; */
}
</style>
<body>
<div class="main" id="main">
<div class="showImg">
<div class="show1" id="show1">
<!-- 显示图片 -->
<img id="midImg" src="./img/01_mid.jpg" alt="">
<!-- 小正方块 -->
<div id="square">
</div>
</div>
<!-- 下方小图 -->
<div class="show2">
<ul class="smallImg" id="smallImg">
<li>
<div>
<a href="#">
<img src="./img/01_small.jpg" alt="">
</a>
</div>
</li>
<li>
<div>
<a href="#">
<img src="./img/02_small.jpg" alt="">
</a>
</div>
</li>
<li>
<div>
<a href="#">
<img src="./img/03_small.jpg" alt="">
</a>
</div>
</li>
<li>
<div>
<a href="#">
<img src="./img/04_small.jpg" alt="">
</a>
</div>
</li>
<li>
<div>
<a href="#">
<img src="./img/05_small.jpg" alt="">
</a>
</div>
</li>
</ul>
</div>
<div id='enlarge'></div>
</div>
<div class="showContent">
<h4>漫趣动漫游戏周边七宗罪sin七大罪二次元短袖衣服原罪T恤夏季男女 </h4>
<div class="con1">
在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。 不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript
代码和 DOM 元素。 在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对
prepend() 同样有效）：
</div>
</div>
<div class="originalImg">
<img id="bigImg" src="./img/01.jpg" />
</div>
</div>
<script>
var show1 = document.getElementById('show1');
var square = document.getElementById('square');
var enlarge = document.getElementById('enlarge');
var where = document.getElementById('where');
var midImg = document.getElementById('midImg');
var bigImg = document.getElementById('bigImg');
var main = document.getElementById('main');
var smallImg = document.querySelectorAll('#smallImg li img');
var smallLi = document.querySelectorAll('#smallImg li');
// alert(smallLi.length)
// alert(smallImg.length)
smallImg[0].onmouseover = function () {
enlarge.style.backgroundImage = 'url(./img/01.jpg)';
midImg.src = "./img/01_mid.jpg";
bigImg.src = "./img/01.jpg";
// smallLi[0].style.border = '2px solid red';
}
smallImg[1].onmouseover = function () {
enlarge.style.backgroundImage = 'url(./img/02.jpg)';
midImg.src = "./img/02_mid.jpg";
bigImg.src = "./img/02.jpg";
// smallLi[1].style.borderColor = '2px solid red';
}
smallImg[2].onmouseover = function () {
enlarge.style.backgroundImage = 'url(./img/03.jpg)';
midImg.src = "./img/03_mid.jpg";
bigImg.src = "./img/03.jpg";
// smallLi[2].style.borderColor = '2px solid red';
}
smallImg[3].onmouseover = function () {
enlarge.style.backgroundImage = 'url(./img/04.jpg)';
midImg.src = "./img/04_mid.jpg";
bigImg.src = "./img/04.jpg";
}
smallImg[4].onmouseover = function () {
enlarge.style.backgroundImage = 'url(./img/05.jpg)';
midImg.src = "./img/05_mid.jpg";
bigImg.src = "./img/05.jpg";
}
show1.onmouseover = function () {
// alert(square.offsetHeight)
// square.style.width = a + 'px';
// square.style.height = b + 'px';
enlarge.style.display = 'block';
square.style.display = 'block';
// midImg/bigImg=square/enlarge;
}
show1.onmouseout = function () {
enlarge.style.display = 'none';
square.style.display = 'none';
}
show1.onmousemove = function (e) {
//clientWidth不带边框
// alert(midImg.width)
// alert(enlarge.offsetWidth)
// 设置蓝色小方块的大小
var n = enlarge.offsetWidth / (bigImg.width / midImg.width);
square.style.width = n + 'px';
square.style.height = n + 'px';
// alert(square.style.width)
var _event = e || window.event;
var mouseLeft = _event.clientX;
var mouseTop = _event.clientY;
// console.log(mouseLeft+'---'+mouseTop)
// alert(midImg.offsetLeft+'---'+show1.offsetLeft+'---'+main.offsetLeft)
// alert(midImg.offsetTop+'---'+show1.offsetLeft+'---'+main.offsetLeft)
// alert(midImg.offsetLeft) //57px
//mouseLeft 当前鼠标相对与浏览器x坐标
//main.offsetLeft 最外边框距浏览器左边的length
//show1.offsetLeft 图片距外边框左边的length,为0
//midImg.offsetLeft 里面图片的padding-left
var squareLeft = mouseLeft - show1.offsetLeft - main.offsetLeft - square.offsetWidth / 2;
var squareTop = mouseTop - show1.offsetTop - main.offsetTop - square.offsetWidth / 2;
// alert(square.offsetWidth)
if (squareLeft >= midImg.width + midImg.offsetLeft - square.offsetWidth) {
squareLeft = midImg.width + midImg.offsetLeft - square.offsetWidth;
}
// alert(main.offsetTop)
if (squareTop >= midImg.height + midImg.offsetTop - square.offsetHeight) {
squareTop = midImg.height + midImg.offsetTop - square.offsetHeight;
}
if (squareLeft < midImg.offsetLeft) {
squareLeft = midImg.offsetLeft;
}
if (squareTop < midImg.offsetTop) {
squareTop = midImg.offsetTop;
}
// alert(squareLeft+'=='+squareTop)
square.style.left = squareLeft + 'px';
square.style.top = squareTop + 'px';
var scaleX = (squareLeft - midImg.offsetLeft) / midImg.width;
var scaleY = (squareTop - midImg.offsetTop) / midImg.height;
var enlargeLeft = scaleX * bigImg.width;
var enlargeTop = scaleY * bigImg.height;
enlarge.style.backgroundPosition = '-' + enlargeLeft + 'px -' + enlargeTop + 'px';
}
</script>
</body>
</html>
