瀑布流
* 1\创建ul,创建li,创建指定数量的li,并且做浮动,设置各li的宽度
* 2\创建一个数组,这个数组里面是统计每个li的当前高度
* 3\创建图片,加载图片,设置图片宽度,获取图片高度
* 4\寻找数组中最小高度的索引值,在li中找到这个索引值对应的列,
* 5\将加载进来图片放入在这个列中并且累加高度存储在数组中对应的元素中
* 6\继续加载新的图片,直到图片加载完成
*
var bodyWidth,colWidth,ul; //col：每列宽度 ，body：内容宽度
let {ce,randomColor}=Utils;//解构赋值
var minHeight=[],
position=3;
const COL=5, //5列 li
MARGIN=10;//
init();
function init() {
document.body.style.margin="0px";（相当于*{ margin：0}）
bodyWidth=document.documentElement.clientWidth;
colWidth=(bodyWidth-MARGIN*(COL-1))/COL;
createUl();
loadImage();
}
function createUl() {
ul=ce("ul",{
listStyle:"none",
margin:"0px",
padding:"0px"
});
for(var i=0;i<COL;i++){
var li=ce("li",{
marginLeft: i===0 ? "0px" : MARGIN+"px",
width:colWidth+"px",
float:"left"
});
minHeight.push(0);
ul.appendChild(li);
}
document.body.appendChild(ul);
window.addEventListener("resize",resizeUl)
}
function loadImage() {
var img=new Image();
img.addEventListener("load",loadHandler);
img.src="./img/"+position+"-.jpg"
img.src=`./img/${position}-.jpg`; //
}
function loadHandler(e) {
var img=this.cloneNode(false); //复制图片
var scale=img.width/img.height;
图片有两个宽高,一个是样式宽高(放在body中以后才可以获取),另一个是图片宽高,不放在页面中也可以获取 //
img.width=colWidth;
img.height=colWidth/scale;
var min=Math.min.apply(null,minHeight);
var index=minHeight.indexOf(min);
ul.children[index].appendChild(img);
minHeight[index]+=img.height;
resizeUl();
position++;
if(position>79){
return;
}
this.src="./img/"+position+"-.jpg";
}
function resizeUl() {
if(bodyWidth===document.documentElement.clientWidth) return;
bodyWidth=document.documentElement.clientWidth;
colWidth=(bodyWidth-MARGIN*(COL-1))/COL;
for(var i=0;i<ul.children.length;i++){
var li=ul.children[i];
li.style.width=colWidth+"px";
var sum=0;
for(var j=0;j<li.children.length;j++){
var img=li.children[j];
var scale=img.width/img.height;
img.width=colWidth;
img.height=colWidth/scale;
sum+=img.height;
}
minHeight[i]=sum;
}
}
</script>
放大镜
图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;
}
封装的Utils
预加载的封装
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;
}
}
})();
stepNumber
数量的加减
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);
}
}
2931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
