图1 图2 图3 图4 图5 图6 * 1\创建一个缩略图div,里面创建半透的小DIV(隐藏),创建一个放大图div放右边,隐藏 * 2\鼠标进入缩略图div,显示小div,显示放大图的div * 3\获取当前鼠标的相对视口位置-缩略图div相对视口距离得到相对缩略图坐标 * 4\将小DIV设置与相对缩略图div坐标相同,并不出缩略图 * 5\修改放大图的背景定位坐标是反向相对视口坐标与(缩略图和方法图的缩略比)乘积 * 450 303 540
var mask,zoom; //mask大容器上面的小容器拖动 //zoom显示放大图片的容器 var arr=["./img/phone1.jpg","./img/phone2.jpg","./img/phone3.jpg","./img/phone4.jpg","./img/phone5.jpg","./img/phone6.jpg"]; const MINI_WIDTH=450,//设置常量 MASK_WIDTH=303, ZOOM_WIDTH=540, MINI_LEFT=150, MINI_TOP=300; init(); function init() { createLeftMini(); //左边放图片的大容器 createRightZoom(); var div= Utils.ce("div",{ width:"200px", height:'4000px' }); document.body.appendChild(div); document.addEventListener("click",clickHandler); } function createLeftMini() {//大 div 放图片 var div=Utils.ce("div",{ width:MINI_WIDTH+"px", height:MINI_WIDTH+"px", backgroundImage:"url(./img/phone.jpg)", backgroundSize:"100% 100%", border:"1px solid #CCCCCC", position:"absolute", top:MINI_TOP+"px", left:MINI_LEFT+"px" }); mask=Utils.ce("div",{ width:MASK_WIDTH+"px", height:MASK_WIDTH+'px', backgroundColor:"rgba(255,230,0,0.3)", position:"absolute", display:"none" }); div.appendChild(mask); document.body.appendChild(div); div.addEventListener("mouseenter",mouseHandler); div.addEventListener("mouseleave",mouseHandler); } function createRightZoom() { zoom=Utils.ce("div",{ width:ZOOM_WIDTH+"px", height:ZOOM_WIDTH+"px", backgroundImage:"url(./img/phone.jpg)", backgroundPositionX:"0px", backgroundPositionY:"0px", position:"absolute", left:MINI_LEFT+MINI_WIDTH+"px", top:MINI_TOP+'px', display:"none" }); document.body.appendChild(zoom); } function mouseHandler(e) {//鼠标进入时的事件 if(e.type==="mouseenter"){//进入 显示 mask.style.display="block"; zoom.style.display="block"; this.addEventListener("mousemove",mouseHandler);//移动事件 }else if(e.type==="mouseleave"){ mask.style.display="none"; zoom.style.display="none"; this.removeEventListener("mousemove",mouseHandler); }else if(e.type==="mousemove"){ moveMask(e.clientX,e.clientY,this); zoomBackgroundPosition(); } } function moveMask(x,y,parent) { //鼠标进入mask时的事件 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="0px" } if(mask.offsetTop<=0){ mask.style.top="0px" } 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=ZOOM_WIDTH/MASK_WIDTH;// 放大后图片 与小图的比例 zoom.style.backgroundPositionX=-mask.offsetLeft*scale+"px"; zoom.style.backgroundPositionY=-mask.offsetTop*scale+"px"; } function clickHandler(e) { //点击图片切换到相应的图片 if(e.target.nodeName!=="BUTTON") return; if(e.target.constructor!==HTMLButtonElement) return; // var index=Array.from(document.querySelectorAll("button")).indexOf(e.target); zoom.style.backgroundImage=mask.parentElement.style.backgroundImage="url("+arr[index]+")"; }面向对象写法
class Zoom{ constructor(){ this.elem=this.createElem(); } createElem(){ if(this.elem) return this.elem; let div=Utils.ce("div"); this.createMin(div); this.createMax(div); return div; } appendTo(parent){ parent.appendChild(this.elem); this.rect=this.min.getBoundingClientRect(); } createMin(parent){ this.min=Utils.ce("div",{ width:"450px", height:"450px", position:"absolute", left:"150px", top:"100px", border:"1px solid #cccccc", backgroundImage:"url(img/phone0.jpg)", backgroundSize:"100% 100%" }); this.min.self=this; this.min.addEventListener("mouseenter",this.mouseHandler); this.min.addEventListener("mouseleave",this.mouseHandler); this.createMask(this.min); parent.appendChild(this.min); } createMask(parent){ this.mask=Utils.ce("div",{ width:"303px", height:"303px", position:"absolute", display:"none", backgroundColor:"rgba(240,200,0,0.4)" }); parent.appendChild(this.mask); } createMax(parent){ this.max=Utils.ce("div",{ width:"540px", height:"540px", border:"1px solid #cccccc", backgroundImage:"url(img/phone0.jpg)", position:"absolute", top:"100px", left:"600px", display:"none" }); parent.appendChild(this.max); } mouseHandler(e){ this.self 就是外面的this // if(e.type==="mouseenter"){ this.self.mask.style.display="block"; this.self.max.style.display="block"; this.addEventListener("mousemove",this.self.mouseHandler); }else if(e.type==="mouseleave"){ this.self.mask.style.display="none"; this.self.max.style.display="none"; this.removeEventListener("mousemove",this.self.mouseHandler); }else if(e.type==="mousemove"){ this.self.mask.style.left=e.clientX-this.self.rect.x-this.self.mask.offsetWidth/2+"px"; this.self.mask.style.top=e.clientY-this.self.rect.y-this.self.mask.offsetHeight/2+"px"; if(this.self.mask.offsetLeft<=0) this.self.mask.style.left="0px"; if(this.self.mask.offsetTop<=0) this.self.mask.style.top="0px"; if(this.self.mask.offsetLeft>=this.self.min.clientWidth-this.self.mask.offsetWidth) this.self.mask.style.left=this.self.min.clientWidth-this.self.mask.offsetWidth+"px"; if(this.self.mask.offsetTop>=this.self.min.clientHeight-this.self.mask.offsetHeight) this.self.mask.style.top=this.self.min.clientHeight-this.self.mask.offsetHeight+"px"; this.self.maxMove(this.self.mask.offsetLeft,this.self.mask.offsetTop); } } maxMove(x,y){ let scale=(this.max.offsetWidth/this.min.offsetWidth)*(this.min.offsetWidth/this.mask.offsetWidth); this.max.style.backgroundPositionX=-x*scale+"px"; this.max.style.backgroundPositionY=-y*scale+"px"; } }无缝轮播图,全JS
* 1\轮播图大容器-->图片容器,左右按钮,小圆点 * 2\点击按钮,标志当前挪动图片索引,移动的方向 * 3\点击小圆点,标志当前挪动图片的索引,移动的方向 * 4\`创建目标图片放置在当前图片的前或后 * 5\移动图片容器到目标图片位置后,删除前或后原来的图片 var bnList,imgList,imgCon,ul,pre; var position=0, direction="left", speed=30, time=300, autoBoolean=false, playBoolean=false; const WIDTH=1200, HEIGHT=400; init(); function init() { Utils.loadImg(["left.png","right.png","a.jpeg","b.jpeg","c.jpeg","d.jpeg","e.jpeg"],createCarousel) } function createCarousel(list) { bnList=list.splice(0,2); imgList=list; imgList.forEach(function (t) { t.style.width=WIDTH+"px"; t.style.height=HEIGHT+"px"; }); var carousel=ce("div",{ width:WIDTH+"px", height:HEIGHT+"px", position:"relative", margin:"auto", overflow:"hidden", backgroundColor:"rgba(255,0,0,0.3)" }); createImgCon(carousel); createBn(carousel); createDot(carousel); document.body.appendChild(carousel); carousel.addEventListener("mouseenter",mouseHandler); carousel.addEventListener("mouseleave",mouseHandler); ul.style.left=(WIDTH-ul.offsetWidth)/2+"px"; changeDot(); setInterval(animation,16); } function mouseHandler(e) { if(e.type==="mouseenter"){ autoBoolean=false; time=300; }else if(e.type==="mouseleave"){ autoBoolean=true; } } function createImgCon(parent) { imgCon=ce("div",{ width:WIDTH+"px", height:HEIGHT+"px", position:"absolute", left:"0px" }); imgCon.appendChild(imgList[position]); parent.appendChild(imgCon); } function createBn(parent) { //左右两边按钮的样式 bnList.forEach(function (t,index) { Object.assign(t.style,{ position:"absolute", left:index===0 ? "20px" : "none", right:index===1 ? "20px" : "none", top:(HEIGHT-t.height)/2+"px" }); t.addEventListener("click",bnClickHandler); parent.appendChild(t); }) } function createDot(parent) { //小圆点的大容器 ul=ce("ul",{ listStyle:"none", position:"absolute", bottom:"20px", margin:"0px", padding:"0px" }); imgList.forEach(function (t,index) { var li=ce("li",{ float:"left", width:"18px", height:"18px", borderRadius:"9px", border:"1px solid rgba(255,0,0,0.8)", marginLeft: index===0 ? "0px" : "10px" }); ul.appendChild(li); }); ul.addEventListener("click",dotClickHandler); parent.appendChild(ul); } function bnClickHandler(e) { //左右两边的按钮点击事件 if(playBoolean) return; if(bnList.indexOf(this)===0){ position--; direction="right"; if(position<0) position=imgList.length-1; }else{ position++; direction="left"; if(position>imgList.length-1) position=0; } createNextImg(); } function dotClickHandler(e) { if(playBoolean) return; if(e.target.nodeName!=="LI") return; var arr=Array.from(this.children); var index=arr.indexOf(e.target); if(index===position) return;//如果是当前这个位置点,不操作 if(index>position){ direction="left"; }else{ direction="right"; } position=index; createNextImg(); } function createNextImg() { //左右两边切换图片的函数 imgCon.style.width=WIDTH*2+"px"; if(direction==="left"){ imgCon.appendChild(imgList[position]); }else if(direction==="right"){ imgCon.insertBefore(imgList[position],imgCon.firstElementChild); imgCon.style.left=-WIDTH+"px"; } playBoolean=true; changeDot(); } function changeDot() { //底下小圆点 跟随着图片的切换而改变 if(pre){ pre.style.backgroundColor="rgba(255,0,0,0)"; } pre=ul.children[position]; pre.style.backgroundColor="rgba(255,0,0,0.5)"; } function animation() { imgPlay(); autoPlay(); } function imgPlay() { if(!playBoolean) return; if(direction==="right"){ imgCon.style.left=imgCon.offsetLeft+speed+"px"; if(imgCon.offsetLeft>=0){ imgCon.style.left="0px"; playBoolean=false; imgCon.lastElementChild.remove(); imgCon.style.width=WIDTH+"px"; } }else if(direction==="left"){ imgCon.style.left=imgCon.offsetLeft-speed+"px"; if(imgCon.offsetLeft<=-WIDTH){ playBoolean=false; imgCon.firstElementChild.remove(); imgCon.style.left="0px"; imgCon.style.width=WIDTH+"px"; } } } function autoPlay() { if(!autoBoolean) return; time--; if(time>0) return; time=300; var evt=new MouseEvent("click"); bnList[1].dispatchEvent(evt); } function ce(type,style) { var elem=document.createElement(type); Object.assign(elem.style,style); return elem; }预加载的封装
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; } } })();数量的加减
var stepNumber; var step=1; init(); function init() { stepNumber=Utils.ce("div",{ width:"88px", height:"22px" }); var leftBn=Utils.ce("button",{ //左边的按钮－号 width:"20px", height:"22px", border:"1px solid #666666", textAlign:"center", lineHeight:'20px', float:"left", backgroundColor:"white", cursor:"default", outline:"none" }); leftBn.textContent="-"; var input=Utils.ce("input",{ //中间的输入框 width:"46px", borderLeft:"none", borderRight:"none", borderTop:"1px solid #666666", borderBottom:"1px solid #666666", height:"20px", outline:"none", padding:0, textAlign:"center", float:"left" }); input.value=step; var rightBn=leftBn.cloneNode(false);//复制左边的按钮 右边的＋号 rightBn.textContent="+"; stepNumber.appendChild(leftBn); stepNumber.appendChild(input); stepNumber.appendChild(rightBn); leftBn.addEventListener("click",clickHandler); rightBn.addEventListener("click",clickHandler); input.addEventListener("input",inputHandler); // leftBn.addEventListener("mousedown",mouseHandler); // rightBn.addEventListener("mousedown",mouseHandler); document.body.appendChild(stepNumber); } function inputHandler(e) { //中间输入框的事件 this.value=this.value.trim(); this.value=this.value.replace(/\D/g,""); if(this.value.length===0) this.value="1"; if(this.value.length>2) this.value="99"; if(this.value==="0") this.value="1"; if(this.ids)return; this.ids=setTimeout(()=>{ clearTimeout(this.ids); this.ids=0; setStep(Number(this.value)) },500) } function mouseHandler(e) { //取消选中 浏览器的默认事件 e.preventDefault(); } function setStep(value) { step=value; stepNumber.children[1].value=value; } function clickHandler(e) { //点击事件 if(this.textContent.indexOf("-")>-1){ step--; if(step<1) step=1; }else if(this.textContent.indexOf("+")>-1){ step++; if(step>99) step=99; } setStep(step); }html页面写入商品列表的数组，引入Utils.js,goodsltem.js
let goodsList=[ {id:1001,icon:"./img/a.jpg",names:"95新苹果XS 低至5099 限量抢原充",info:"限量抢10套原充",history:291,price:5099,oldPrice:12999,sold:0.31}, {id:1002,icon:"./img/b.jpg",names:"佳沛 新西兰绿奇异果特大果 原箱",info:"领券立减10元",history:65,price:129,oldPrice:149,sold:0.23}, {id:1003,icon:"./img/c.jpg",names:"室内精品盆栽栀子花",info:"带盆栽好发货",history:181,price:9.9,oldPrice:16.8,sold:0.3}, {id:1004,icon:"./img/d.jpg",names:"惯性越野四驱玩具车",info:"360度特技旋转",history:61,price:9.9,oldPrice:29.9,sold:0.31}, {id:1005,icon:"./img/e.jpg",names:"固特异环保丝圈脚垫17MM加厚材质",info:"17MM加厚材质",history:245,price:440,oldPrice:590,sold:0.82}, {id:1006,icon:"./img/f.jpg",names:"奥利奥 零食 夹心饼干原味349g",info:"",history:365,price:10.9,oldPrice:13.5,sold:0.26}, {id:1007,icon:"./img/g.jpg",names:"九牧轻奢风智能浴室柜",info:"赠龙头配件包",history:52,price:2249,oldPrice:5599,sold:0.37}, {id:1008,icon:"./img/h.jpg",names:"realme X 8GB+128GB朋克蓝",info:"4800万双摄",history:47,price:1799,oldPrice:1949,sold:0.22} ]; let goodsIcon=document.querySelector("#goodsIcon"); goodsIcon.style.margin="auto"; goodsIcon.style.width="1200px"; document.documentElement.style.backgroundColor="#999"; for(let i=0;i<goodsList.length;i++){ let goods=new GoodsItem(goodsList[i]); goods.appendTo(goodsIcon); }goodsltem.js
class GoodsItem{ constructor(_data){ this.data=_data; this.elem=this.createElem(); } createElem(){ if(this.elem) return this.elem; let div=Utils.ce("div",{ width:"290px", height:"400px", marginLeft:"10px", marginBottom:"10px", fontSize:"12px", color:"#666", backgroundColor:"#fff", position:"relative", float:"left" }); this.createIcon(div); this.createPriceCon(div); return div; } createIcon(parent){ let div=Utils.ce("div",{ width:"230px", height:"270px", padding:"20px 30px 0", position:"relative" }); let img=Utils.ce("img",{ width:"200px", height:"200px", position:"absolute", left:0, right:0, top:"20px", margin:"auto", transition:"all 0.3s" }); img.src=this.data.icon; let span=Utils.ce("span",{ fontSize:"14px", display:"block", width:"250px", height:"20px", margin:"10px 20px 10px 9px", position:"absolute", color:"black", bottom:"25px" }); span.textContent=this.data.names; let info=Utils.ce("span",{ width:"250px", height:"21px", margin:"10px 0", color:"red", fontSize:"14px", paddingLeft:"10px", position:"absolute", bottom:"0px" }); info.textContent=this.data.info; div.appendChild(img); div.appendChild(span); div.appendChild(info); div.addEventListener("mouseenter",this.mouseHandler); div.addEventListener("mouseleave",this.mouseHandler); parent.appendChild(div); } createPriceCon(parent){ let div=Utils.ce("div",{ width:"290px", height:"99px", borderTop:"1px solid #f6f6f6", position:"absolute", bottom:"0px" }); let history=Utils.ce("span",{ position: "absolute", top: "5px", left: "15px", padding: "0 8px", height: "16px", lineHeight: "16px", backgroundColor: "#e6e6e6", fontSize: "10px", color: "#999" }); history.textContent=this.data.history+"天历史记录"; div.appendChild(history); this.createPrice(div); this.createSold(div); this.createButton(div); parent.appendChild(div); } createPrice(parent){ let nowPrice=Utils.ce("span",{ color:"#e01222", display:"inline-block", marginTop:"30px", marginLeft:"20px", fontSize:"22px" }); nowPrice.textContent=this.data.price; let priceTag=Utils.ce("span",{ fontSize:"12px", }); priceTag.textContent="￥"; nowPrice.insertBefore(priceTag,nowPrice.firstChild); let oldPrice=Utils.ce("span",{ color:"#999", display:"inline-block", marginLeft:"10px" }); let oldPriceValue=Utils.ce("span",{ textDecoration:"line-through", }); oldPriceValue.textContent=this.data.oldPrice; oldPrice.appendChild(oldPriceValue); oldPrice.insertBefore(priceTag.cloneNode(true),oldPrice.firstChild); parent.appendChild(nowPrice); parent.appendChild(oldPrice); oldPrice.firstElementChild.style.textDecoration="none"; } createSold(parent){ let div=Utils.ce("div"); let span=Utils.ce("span",{ display:"inline-block", marginLeft:"20px" }); span.textContent="已售"+this.data.sold*100+"%"; div.appendChild(span); let pSpanCon=Utils.ce("span",{ display:"inline-block", width:"88px", height:"8px", borderRadius:"8px", backgroundColor:"#e6e6e6", marginLeft:"15px" }); let pSan=Utils.ce("span",{ height:"8px", display:"block", width:this.data.sold*88+"px", borderRadius:"8px", backgroundColor:"#DF0021" }); pSpanCon.appendChild(pSan); div.appendChild(pSpanCon); parent.appendChild(div); } createButton(parent){ let a=Utils.ce("a",{ width:"80px", height:"40px", display:"block", position:"absolute", right:"0px", top:0, bottom:0, margin:"auto", textAlign:"center", color:'white', fontSize:'16px', lineHeight:"40px", cursor:"default", backgroundColor:"#DF0021", textDecoration:"none" }); a.href="./goodsInfo.html?id="+this.data.id; **//跳转到商品的详情页面** a.textContent="立即抢购"; parent.appendChild(a); } mouseHandler(e){ if(e.type==="mouseenter"){ this.firstElementChild.style.top="10px"; }else{ this.firstElementChild.style.top="20px"; } } appendTo(parent){ parent.appendChild(this.elem); } }