//Utils.js
var Utils=(function () {
return {
//SSS
loadImg:function (srcList,callBack) {
var img=new Image();
img.num=0;
img.imgList=[];
img.srcList=srcList;
img.callBack=callBack;
img.addEventListener("load",this.loadHandler);
img.src="./img/"+srcList[img.num];
},
loadHandler:function (e) {
// console.log(this.num);
// console.log(this.imgList);
// console.log(this.callBack);
this.imgList.push(this.cloneNode(false));
this.num++;
if(this.num>=this.srcList.length){
this.callBack(this.imgList);
return;
}
//事件侦听没有被删除,只需更改src,加载后仍然触发了该事件,进入该函数
this.src="./img/"+this.srcList[this.num];
},
ce:function (type,style) {
var elem=document.createElement(type);
if(style) Object.assign(elem.style,style);
return elem;
},
randomColor:function () {
var col="#";
for(var i=0;i<6;i++){
col+=Math.floor(Math.random()*16).toString(16);
}
return col;
}
}
})();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/Utils.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
var mask, zoom, mgCon, prev;
var arr = ["./img/phone0_mini.jpg", "./img/phone1_mini.jpg", "./img/phone2_mini.jpg", "./img/phone3_mini.jpg", "./img/phone4_mini.jpg", "./img/phone5_mini.jpg", "./img/phone6_mini.jpg", "./img/phone7_mini.jpg"];
var bool = false,
direction = "",
speed = 10;
const LEFTDIVWIDTH = 450,
MASKTOP = 200,
MASKLEFT = 150,
MASKWIDTH = 250,
ZOOMWIDTH = 540;
init();
function init() {
createLeftDiv();
cerateRightDiv();
createMiniImg();
setInterval(animation, 16);
}
function animation() {
if(!bool) return;
if(direction === "left") {
imgCon.style.left = imgCon.offsetLeft - speed + "px";
if(imgCon.offsetLeft < -(imgCon.offsetWidth - (6 * 58 + 5 * 6))) {
imgCon.style.left = -(imgCon.offsetWidth - (6 * 58 + 5 * 6)) + "px";
bool = false;
}
} else if(direction === "right") {
imgCon.style.left = imgCon.offsetLeft + speed + "px";
if(imgCon.offsetLeft >= 0) {
imgCon.style.left = "0px";
bool = false;
}
}
}
function createLeftDiv() {
var div = Utils.ce("div", {
width: LEFTDIVWIDTH + "px",
height: LEFTDIVWIDTH + "px",
position: "absolute",
border: "1px solid #ccc",
backgroundImage: "url(./img/phone0.jpg)",
backgroundSize: "100% 100%",
top: MASKTOP + "px",
left: MASKLEFT + "px"
});
mask = Utils.ce("div", {
display: "none",
width: MASKWIDTH + "px",
height: MASKWIDTH + "px",
backgroundColor: "rgba(255,230,0,0.3)",
position: "absolute"
})
div.appendChild(mask);
document.body.appendChild(div);
div.addEventListener("mouseenter", onMouseLisenter);
div.addEventListener("mouseleave", onMouseLisenter);
}
function cerateRightDiv() {
zoom = Utils.ce("div", {
width: ZOOMWIDTH + "px",
height: ZOOMWIDTH + "px",
position: "absolute",
backgroundImage: "url(./img/phone0.jpg)",
backgroundPositionX: "0px",
backgroundPositionY: "0px",
left: LEFTDIVWIDTH + MASKLEFT + 3 + "px",
top: MASKTOP + "px",
display: "none"
})
document.body.appendChild(zoom);
}
function createMiniImg() {
var div = Utils.ce("div", {
width: "452px",
height: "58px",
backgroundColor: "#666666",
margin: "5px 0 18px",
position: "absolute",
top: MASKTOP + LEFTDIVWIDTH + "px",
left: MASKLEFT + "px"
});
createImgButton(div);
createImgCon(div);
document.body.appendChild(div);
}
function createImgCon(parent) {
var div = Utils.ce("div", {
width: "380px",
height: "58px",
position: "relative",
margin: "auto",
overflow: "hidden",
// backgroundColor:"rgba(255,0,0,0.3)"
});
imgCon = Utils.ce("div", {
height: "58px",
position: "absolute",
left: "0",
fontSize: "0px",
width: ((arr.length * 58) + (arr.length - 1) * 6) + "px"
});
for(var i = 0; i < arr.length; i++) {
var img = Utils.ce("img", {
// border:"2px solid #e53e41"
marginLeft: i === 0 ? "0px" : "6px",
border: "2px solid rgba(0,0,0,0)"
});
img.src = arr[i];
imgCon.appendChild(img);
}
selectImg(imgCon.firstElementChild);
imgCon.addEventListener("mouseover", imgConHandler);
div.appendChild(imgCon);
parent.appendChild(div);
}
function imgConHandler(e) {
if(e.target.nodeName !== "IMG") return;
selectImg(e.target);
var src = e.target.src.replace("_mini", "");
zoom.style.backgroundImage = mask.parentElement.style.backgroundImage = "url(" + src + ")";
}
function selectImg(elem) {
if(prev) {
prev.style.border = "2px solid rgba(0,0,0,0)";
}
prev = elem;
prev.style.border = "2px solid #e53e41";
}
function createImgButton(parent) {
var arr = ["./img/prev.png", "./img/next.png"];
for(var i = 0; i < arr.length; i++) {
var img = Utils.ce("img", {
position: "absolute",
top: "13px",
left: i === 0 ? "0px" : "none",
right: i === 1 ? "0px" : "none"
});
img.src = arr[i];
// console.log(img.src);//图片路径
parent.appendChild(img);
img.addEventListener("click", imgMoveHandler);
}
}
function imgMoveHandler(e) {
if(bool) return;
if(direction === "left" && this.src.indexOf("next") > -1) return;
if(direction === "right" && this.src.indexOf("prev") > -1) return;
if(this.src.indexOf("next") > -1) {
direction = "left";
} else if(this.src.indexOf("prev") > -1) {
direction = "right";
}
bool = true;
}
function onMouseLisenter(e) {
if(e.type === "mouseenter") {
mask.style.display = "block";
zoom.style.display = "block";
this.addEventListener("mousemove", onMouseLisenter);
} else if(e.type === "mouseleave") {
mask.style.display = "none";
zoom.style.display = "none";
this.addEventListener("mousemove", onMouseLisenter);
} else if(e.type === "mousemove") {
moveMask(e.clientX, e.clientY, this);
zoomBackgroundPosition();
}
}
function moveMask(x, y, parent) {
var rect = parent.getBoundingClientRect();
mask.style.left = x - rect.x - mask.offsetWidth / 2 + "px";
mask.style.top = y - rect.y - mask.offsetHeight / 2 + "px";
if(mask.offsetLeft <= 0) {
mask.style.left = 0 + "px";
}
if(mask.offsetTop <= 0) {
mask.style.top = 0 + "px";
}
if(mask.offsetLeft >= parent.clientWidth - mask.clientWidth) {
mask.style.left = parent.clientWidth - mask.clientWidth + "px";
}
if(mask.offsetTop >= parent.clientHeight - mask.clientHeight) {
mask.style.top = parent.clientHeight - mask.clientHeight + "px";
}
}
function zoomBackgroundPosition() {
var scale = (ZOOMWIDTH / MASKWIDTH) / 1.5;
zoom.style.backgroundPositionX = -mask.offsetLeft * scale + "px";
zoom.style.backgroundPositionY = -mask.offsetTop * scale + "px";
}
</script>
</body>
</html>