- 简单来说就是使用不同尺寸的图片实现效果
效果如图
代码如下
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/bigf.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
img {
border: 0;
vertical-align: middle;
}
.b-par {
position: relative;
width: 350px;
height: 500px;
margin: auto;
}
.b-middle {
position: relative;
width: 350px;
height: 420px;
border: 1px solid silver;
cursor: move;
}
.b-middle-img {
width: 100%;
height: 100%;
}
.b-small {
position: relative;
width: 350px;
height: 80px;
font-size: 0;
}
.b-small div.s-block {
width: 54px;
height: auto;
display: inline-block;
margin: 0 3px 0 0;
box-sizing: border-box;
border: 3px solid transparent;
}
.b-small div.s-block img {
width: 100%;
height: 100%;
}
.b-s-par {
width: 456px;
margin: 12px 0;
transition: margin-left .5s linear;
}
.b-small-middle {
width: 310px;
height: auto;
overflow: hidden;
margin: 0 20px;
}
.b-small>span {
position: absolute;
width: 20px;
height: 80px;
display: block;
z-index: 999;
color: silver;
text-align: center;
line-height: 80px;
font-size: 20px;
cursor: pointer;
}
.b-small>span:hover {
background-color: silver;
color: #fff;
}
.b-small>span:nth-child(1) {
left: 0;
top: 0;
}
.b-small>span:nth-child(3) {
right: 0;
top: 0;
}
.s-blockborder {
border-color: #e40000 !important;
}
.ceng {
display: none;
position: absolute;
z-index: 1;
left: 0;
top: 0;
background: url("./img/bg.png");
background-size: 4px 4px;
}
.bigCeng {
position: absolute;
display: none;
left: 351px;
top: 0;
width: 450px;
height: 500px;
border: 1px solid silver;
background: url("./img/big8.jpg") no-repeat;
}
</style>
</head>
<body>
<div style="display: flex; justify-content: center; align-items: center; height: 60px;">
<h1>泰森电商产品介绍</h1>
</div>
<div class="b-par">
<div class="b-middle">
<div class="ceng" style="width: 196.876px;height: 262.50px;"></div>
<img class="b-middle-img" src="./img/middle8.jpg" alt="" />
</div>
<div class="bigCeng">
</div>
<div class="b-small">
<span class="btnleft"></span>
<div class="b-small-middle">
<div class="b-s-par">
<div class="s-block s-blockborder" data-big="./img/big8.jpg" data-src="./img/middle8.jpg">
<img src="./img/small8.jpg" alt="" />
</div>
<div class="s-block" data-big="./img/big5.jpg" data-src="./img/middle5.jpg"><img
src="./img/small5.jpg" alt="" /></div>
<div class="s-block" data-big="./img/big6.jpg" data-src="./img/middle6.jpg"><img
src="./img/small6.jpg" alt="" /></div>
<div class="s-block" data-big="./img/big7.jpg" data-src="./img/middle7.jpg"><img
src="./img/small7.jpg" alt="" /></div>
<div class="s-block" data-big="./img/big1.jpg" data-src="./img/middle1.jpg"><img
src="./img/small1.jpg" alt="" /></div>
<div class="s-block" data-big="./img/big2.jpg" data-src="./img/middle2.jpg"><img
src="./img/small2.jpg" alt="" /></div>
<div class="s-block" data-big="./img/big3.jpg" data-src="./img/middle3.jpg"><img
src="./img/small3.jpg" alt="" /></div>
<div class="s-block" data-big="./img/big4.jpg" data-src="./img/middle4.jpg"><img
src="./img/small4.jpg" alt="" /></div>
</div>
</div>
<span class="btnright">></span>
</div>
</div>
</body>
</html>
js
/**
* Created by Administrator on 2019/8/2 0002.
*/
//声明全局变量
var oldEle = null;
window.onload = function () {
//加载完成事件
var sblock = document.getElementsByClassName("s-block");
var middlimg = document.getElementsByClassName("b-middle-img")[0];
var btnleft = document.getElementsByClassName("btnleft")[0];
var btnright = document.getElementsByClassName("btnright")[0];
var bspar = document.getElementsByClassName("b-s-par")[0];
var bmiddle = document.getElementsByClassName("b-middle")[0];
var ceng = document.getElementsByClassName("ceng")[0];
var bpar = document.getElementsByClassName("b-par")[0];
var bigCeng = document.getElementsByClassName("bigCeng")[0];
//将默认的元素赋值到oldEle
oldEle = sblock[0];
for (var i = 0; i < sblock.length; i++) {
sblock[i].onmouseenter = function () {
//记录之前把之前变色的清除
oldEle.className = "s-block";
this.className = "s-blockborder s-block";
oldEle = this;//记录当前变色的
//同步上面的中等图片变化
middlimg.src = this.getAttribute("data-src");
bigCeng.style.backgroundImage = "url(" + this.getAttribute("data-big") + ")";
}
}
//左右点击事件
btnleft.onclick = function () {
bspar.style.marginLeft = "0px";
}
btnright.onclick = function () {
bspar.style.marginLeft = -(456 - 310) + "px";
}
//上面中等图写事件
bmiddle.onmouseenter = function () {
ceng.style.display = "block";
bigCeng.style.display = "block"
}
bmiddle.onmouseleave = function () {
ceng.style.display = "none";
bigCeng.style.display = "none"
}
bmiddle.onmousemove = function (e) {
var x = e.pageX || e.clientX;
var y = e.pageY || e.clientY;
x = x - bpar.offsetLeft - parseFloat(ceng.style.width) / 2;
y = y - bpar.offsetTop - parseFloat(ceng.style.height) / 2;
//限制x,y
var bigleft = (parseFloat(window.getComputedStyle(bmiddle).width) - parseFloat(ceng.style.width));
var bigtop = (parseFloat(window.getComputedStyle(bmiddle).height) - parseFloat(ceng.style.height));
x = x <= 0 ? 0 : x >= bigleft ? bigleft : x;
y = y <= 0 ? 0 : y >= bigtop ? bigtop : y;
ceng.style.left = x + "px";
ceng.style.top = y + "px";
//鼠标移动大图跟着移动 计算移动比例
bigCeng.style.backgroundPosition = (-x * 2.2857) + "px " + (-y * 1.9047) + "px";
// 大图实际宽高 800*800 和中图实际宽高 350*420 比例 宽 2.2857 高 1.9047
//根据大块的实际宽和高 计算小块的宽高 ----
}
}
//var oldEle = null;
//window.onload = function () {
// //加载完成事件
// var sblock = document.getElementsByClassName("s-block");
// //默认第一个变色
// sblock[0].style.borderColor = "#e40000";
// oldEle = sblock[0];
// for (var i = 0; i < sblock.length; i++) {
// sblock[i].onmouseenter = function () {
// oldEle.style.borderColor = "transparent";
// this.style.borderColor = "#e40000";
// oldEle = this;
// }
// }
//}