JS案例展示
1.进度条拖拽
<!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>进度条拖拽</title> <style> *{margin: 0;padding: 0;} .box{display: flex;width: 500px;height: 300px;background: #dedede;align-items: center;margin-left: 20px;} .box span{width: 100px;text-align: center;} .con{width: 400px;height: 30px;background: gray;display: flex;align-items: center;} .con p {height: 30px;width: 10px;background: blue;position: relative;} .con i {height: 40px;width: 10px;background: red;border-radius: 10px;position: absolute;left: 0;top: -5px;} </style> </head> <body> <div class="box"> <span>0%</span> <div class="con"> <p><i></i></p> </div> </div> </body> <script> class Drag{ constructor(){ // 获取元素 this.span = document.querySelector(".box span"); this.p = document.querySelector(".con p"); this.i = document.querySelector(".con i"); this.con = document.querySelector(".con") this.addEvent(); } // 绑定事件 addEvent(){ var that = this; this.i.onmousedown = function(eve){ var e = eve || window.event; // 获取this.i的X坐标 that.disX = e.offsetX; // console.log(that.x) that.down(); //取消默认事件 return false; } } down(){ var that = this; document.onmousemove = function(eve){ var e = eve || window.event; that.move(e); } document.onmouseup = function(){ that.up(); } } move(e){ // console.log(e.clientX ,this.p.offsetLeft,this.disX) var l = e.clientX - this.p.offsetLeft - this.disX; console.log(l) // 边界限定 if(l < 0) l = 0;; //不减去this.i.offsetWidth的宽的话， 会拖超出； if(l > this.con.offsetWidth - this.i.offsetWidth){ l = this.con.offsetWidth - this.i.offsetWidth; } this.span.innerHTML = parseInt(l / (this.con.offsetWidth-this.i.offsetWidth)*100) + "%"; this.i.style.left = l + "px"; this.p.style.width = l + this.i.offsetWidth + "px"; } up(){ // 鼠标抬起取消移动事件 document.onmousemove = null; document.onmouseup = null; } } new Drag(); </script> </html>
2.无缝轮播-1
<!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>无缝轮播图-1</title> <style> *{margin: 0;padding: 0;} body{background: #dedede;} .box{width: 900px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;} .box a{position: absolute;height: 300px;left: 900px;top: 0;width: 900px;} .box a:nth-child(1){left: 0;} .btns input{background: blue;border: 1px solid red;width: 50px;height: 50px;position: absolute;z-index: 99999;top: 125px;color: #fff;line-height: 50px;} .btns input:nth-child(1){left: 0;} .btns input:nth-child(2){right: 0;} </style> </head> <body> <div class="box"> <a href="#"><img src="./one.png"></a> <a href="#"><img src="./two.png"></a> <a href="#"><img src="./three.png"></a> <div class="btns"> <input type="button" value="<<<" id="pre"> <input type="button" value=">>>" id="next"> </div> </div> </body> <script src="../move.js"></script> <script> class Banner{ constructor(){ this.pre = document.getElementById("pre"); this.next = document.getElementById("next"); this.img = document.querySelectorAll(".box a"); // 初始要显示的图片索引为0，那么就是0进来，length-1走 this.index = 0; // 要走的图片的索引 this.go = this.img.length-1; this.addEvent(); } // -----------------------------------代码简化-------------------------- addEvent(){ var that = this; this.pre.onclick = function(){ // pre计算索引 that.changeIndex(1); } this.next.onclick = function(){ // next计算索引 that.changeIndex(-1); } } changeIndex(d){ if(d === 1){ if(this.index === 0){ //判断点击上一个的时候索引为0的话，那么就把当前显示的索引改为length-1，要走的图片索引是0； this.index = this.img.length - 1; this.go = 0; }else{ this.index--; this.go = this.index + 1; } }else{ // 判断点击下一个时候索引如果为最后一个，那么就直接把索引改为0，如果显示的图片为0，那么要走的图片索引就是length-1 if(this.index === this.img.length-1){ this.index = 0; this.go = this.img.length-1; }else{ // 索引不断增加，2显示1走，那么要走的图片的索引就是当前this.index-1 this.index ++; this.go = this.index-1; } } this.setActive(d); } setActive(d){ // console.log(this.go,this.index) this.img[this.go].style.left = 0; move(this.img[this.go],{left:this.img[0].offsetWidth * d}) this.img[this.index].style.left = -this.img[0].offsetWidth * d + "px"; move(this.img[this.index],{left:0}) } } new Banner(); // -----------------------------------代码简化-------------------------- // 绑定事件 // addEvent(){ // var that = this; // this.pre.onclick = function(){ // // pre计算索引 // that.changeIndexPre(1); // } // this.next.onclick = function(){ // // next计算索引 // that.changeIndexNext(-1); // } // } // // pre计算索引 // changeIndexPre(){ // if(this.index === 0){ // //判断点击上一个的时候索引为0的话，那么就把当前显示的索引改为length-1，要走的图片索引是0； // this.index = this.img.length - 1; // this.go = 0; // }else{ // this.index--; // this.go = this.index + 1; // } // this.setActivePre(); // } // // next计算索引 // changeIndexNext(){ // // 判断点击下一个时候索引如果为最后一个，那么就直接把索引改为0，如果显示的图片为0，那么要走的图片索引就是length-1 // if(this.index === this.img.length-1){ // this.index = 0; // this.go = this.img.length-1; // }else{ // // 索引不断增加，2显示1走，那么要走的图片的索引就是当前this.index-1 // this.index ++; // this.go = this.index-1; // } // this.setActiveNext(); // } // setActivePre(){ // // console.log(this.go,this.index) // this.img[this.go].style.left = 0; // move(this.img[this.go],{left:this.img[0].offsetWidth}) // this.img[this.index].style.left = -(this.img[0].offsetWidth) + "px"; // move(this.img[this.index],{left:0}) // } // setActiveNext(){ // // console.log(this.go,this.index) // //要走的图片的位置 // console.log(this.go) // this.img[this.go].style.left = 0; // // 初始点击，要走的图片索引是0，进来的是1,0的left是自身负offsetwidth的距离 // move(this.img[this.go],{left:-this.img[0].offsetWidth}) // // 要显示的图片的位置 // //初始点击，要进来的图片索引是1，出去的0,1的left是自身正是offsetwidth； // this.img[this.index].style.left = (this.img[0].offsetWidth) + "px"; // move(this.img[this.index],{left:0}) // } // } </script> </html>
3.烟花
<!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>烟花高级版</title> <style> *{margin: 0;padding: 0;} .box{width: 1000px;height: 600px;background: #000;border: 1px solid blue;margin: 20px auto;position: relative;overflow: hidden;} .fire{width: 10px;height: 10px;position: absolute;bottom: 0;} .small-fire{width: 10px;height: 10px;border-radius: 50%;position: absolute;} </style> </head> <body> <div class="box"></div> </body> <script src="../move.js"></script> <script> class Fire{ constructor(box,pos){ // 解析参数 this.box = box; this.x = pos.x; this.y = pos.y; this.createFire(); } createFire(){ // 创建大烟花，并且设置样式，然后运动 this.ele = document.createElement("div"); this.ele.className = "fire"; this.ele.style.background = randomColor(); this.ele.style.left = this.x + "px"; this.box.appendChild(this.ele); this.moveFire(); } // 大烟花开始向上移动，移动到鼠标点击的位置，即x,y moveFire(){ var that = this; move(this.ele,{top:this.y},function(){ // 删除烟花，注意，这里拿不到this.ele,返回undefinded, // 因为class语法是es6语法，自带严格模式；这里的this指向undefined； // console.log(this):undefined that.ele.remove(); that.smallFire(); }) } smallFire(){ // 随机小烟花的个数 var num = random(10,20); //因为炸开是圆形，所以定义圆的半径； var r = random(100,200); for(var i = 0;i < num ;i++){ // 这里用let是因为let具有块级作用域，用var的话，div只会删除最后一个， let div = document.createElement("div"); div.className = "small-fire"; div.style.background = randomColor(); div.style.left = this.x + "px"; div.style.top = this.y + "px"; this.box.appendChild(div); // 定义小烟花炸开的位置 var t = { x : Math.cos(Math.PI/180 * (360/num) * i)* r + this.x, y : Math.sin( Math.PI/180 * (360/num)*i ) * r + this.y } // 小烟花开始移动 move(div, {left:parseInt(t.x),top:parseInt(t.y)}, function(){ // 删除小烟花 div.remove(); }) } } } // 随机数 function random(a,b){ return Math.round(Math.random() * (a-b) + b); } // 随机颜色 function randomColor(){ return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`; } // 要在外面获取，并且点击的时候new对象，因为每个烟花都是不一样的，每个对象都不相等 var box = document.querySelector(".box"); box.onclick = function(eve){ var e = eve || window.event; var target = { // 获取位置，定位大烟花的left位置 x : e.offsetX, y : e.offsetY } // 把值作为参数传给对象 new Fire(box,target); } </script> </html>
4.放大镜
<!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>放大镜</title> <style> *{margin: 0;padding: 0;} li{list-style: none;} .box1{position: relative;height:400px;margin-top: 20px;} .small{width:400px;height:300px;position: absolute;left: 50px;} .small img{width:400px;height:300px;} .small span{position: absolute;background: grey; opacity: .6;left:0;top:0;display: none;} .big{width:400px;height:300px;position: absolute;display: none;left: 500px;top:100px;overflow: hidden;} .big img{width: 1200px;height: 900px;position: absolute;} .items{position: absolute;top: 320px;left: 50px;} .items a{float: left;margin-left:30px;} .items a img{width: 100px;border: 1px solid black;display: block;} .items input{position: absolute;background: rgba(200, 200, 200,.7 );border: none;width: 30px;height: 65px;} #pre{left: 0;} #next{left: 370px;} </style> </head> <body> <div class="box1"> <div class="small"> <img src="./img/2.jpg"> <span></span> </div> <div class="big"> <img src="./img/2.jpg" alt=""> </div> <!-- <div class="items"> <a href="#"><img src="./img/2.jpg" alt=""></a> <a href="#"><img src="./img/1.jpg" alt=""></a> <a href="#"><img src="./img/2.jpg" alt=""></a> <a href="#"><img src="./img/1.jpg" alt=""></a> <a href="#"><img src="./img/2.jpg" alt=""></a> <a href="#"><img src="./img/1.jpg" alt=""></a> <a href="#"><img src="./img/2.jpg" alt=""></a> <a href="#"><img src="./img/1.jpg" alt=""></a> <input type="button" value="<<<" id="pre"> <input type="button" value=">>>" id="next"> </div> --> </div> </body> <script> class Big{ constructor(){ // 获取元素 this.small = document.querySelector(".small"); this.smallImg = document.querySelector(".small img"); this.big = document.querySelector(".big"); this.bigImg = document.querySelector(".big img"); this.span = document.querySelector("span"); // 绑定事件 this.addEvent(); } // 绑定事件功能 addEvent(){ var that = this; this.small.onmouseover = function(){//进入事件 that.over(); } this.small.onmousemove = function(eve){//移动事件 var e = eve || window.event; that.move(e); } this.small.onmouseout = function(){//移出事件 that.out(); } } //进入事件功能 over(){ this.span.style.display = "block";//显示span this.big.style.display = "block";//显示右边的大框 this.bigW = this.big.offsetWidth;//大框的宽度 this.bigImgW = this.bigImg.offsetWidth;//大图片的宽度 this.smallW = this.small.offsetWidth;//小框的宽度 this.bigH = this.big.offsetHeight;//大框的高度 this.bigImgH = this.bigImg.offsetHeight;//大图片的高度 this.smallH = this.small.offsetHeight;//小框的高度 // 计算span的宽高：大框的宽度 / 大图片的宽度 * 小框的宽度 this.SpanW = this.bigW / this.bigImgW * this.smallW;//span的宽 this.SpanH = this.bigH / this.bigImgH * this.smallH;//span的高 this.span.style.width = this.SpanW + "px";//给span的宽赋值 this.span.style.height = this.SpanH + "px";//给span的高赋值 } // 移动事件功能 move(e){ // 计算span的left,top this.sSpanL = e.clientX - this.small.offsetLeft - this.span.offsetWidth/2;//可视区域的距离减去小框的left-减去span的宽的一半 this.sSpanT = e.clientY - this.small.offsetTop - this.span.offsetHeight/2;//可视区域的距离减去小框的top-减去span的高的一半 // 边界限定 if(this.sSpanL < 0) this.sSpanL = 0; if(this.sSpanT < 0) this.sSpanT = 0; if(this.sSpanL > this.smallW - this.SpanW) this.sSpanL = this.smallW - this.SpanW; if(this.sSpanT > this.smallH - this.SpanH) this.sSpanT = this.smallH - this.SpanH; this.span.style.left = this.sSpanL + "px";//给span的left赋值 this.span.style.top = this.sSpanT + "px";//给span的top赋值 // 计算大图移动的位置:span的left / (小框的宽 - span的宽) * (大框宽 - 大图的宽) // 计算大图移动的位置:span的top / (小框的高 - span的高) * (大框高 - 大图的高) this.bigImg.style.left = this.sSpanL / (this.smallW - this.SpanW) * (this.bigW - this.bigImgW) + "px"; this.bigImg.style.top = this.sSpanT / (this.smallH - this.SpanH) * (this.bigH - this.bigImgH) + "px"; } //移出事件功能 out(){ this.span.style.display = "none";//隐藏span this.big.style.display = "none";//隐藏右边大框 } } new Big(); </script> </html>
5.瀑布流
<!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>瀑布流</title> <style> *{margin: 0;padding: 0;} .con{margin: 0 auto;position: relative;} .box{float: left;padding: 4px;} .imgbox{border: solid 1px black;padding: 4px;border-radius: 4px;} .imgbox img{width: 200px;display: block;} </style> <script> onload = function (){ new waterfall(); } class waterfall{ constructor(){ this.con = document.querySelector(".con"); this.img = document.querySelectorAll(".imgbox img"); this.box = document.querySelectorAll(".box"); console.log(this.box) this.boxW = this.box[0].offsetWidth;//获取宽度 this.clientW = document.documentElement.clientWidth;//获取可视区域宽度 this.clientH = document.documentElement.clientHeight;//获取可视区域高度 // this.data = [{img:"images/1.jpg"},{img:"images/2.jpg"},{img:"images/3.jpg"},{img:"images/4.jpg"},{img:"images/5.jpg"},{img:"images/6.jpg"},{img:"images/7.jpg"},{img:"images/8.jpg"},{img:"images/9.jpg"},{img:"images/10.jpg"}]; // this.addEvent(); this.init(); } // 初始化计算con的宽度 init(){ this.maxNum = parseInt(this.clientW / this.boxW);//计算第一行最多能放几个 this.con.style.width = this.maxNum * this.boxW + "px";//给con的宽度赋值 this.firstLine(); this.otherLine(); } // 获取第一行高度最少的那个 firstLine(){ this.firstLineHeight = []; for(var i = 0;i < this.maxNum;i++){ // console.log(this) this.firstLineHeight.push(this.box[i].offsetHeight) } } otherLine(){ for(var i = this.maxNum;i < this.box.length;i++){ var min = getMin(this.firstLineHeight);//取得最小高度 var minIndex = this.firstLineHeight.indexOf(min);//取得最小高度的索引 this.box[i].style.position = "absolute"; this.box[i].style.top = min + "px"; this.box[i].style.left = minIndex * this.boxW + "px"; // this.firstLineHeight[minIndex] :不断的改变最小值 this.firstLineHeight[minIndex] = this.firstLineHeight[minIndex] + this.box[i].offsetHeight; // console.log(this.firstLineHeight[minIndex]) } } // addEvent(){ // var that = this; // onscroll = function(){ // if(that.isBottom()){ // that.addImg(); // } // } // } // addImg(){ // var str = ""; // for(var i = 0;i<this.data.length;i++){ // str += ` <div class="box"> // <div class="imgbox"> // <img src="./${this.data[i].img}" alt=""> // </div> // </div>` // } // this.con.innerHTML += str; // this.box = document.querySelectorAll(".box"); // this.firstLine(); // this.otherLine(); // } // isBottom(){ // var scrollT = document.documentElement.scrollTop; // var scrollH = document.documentElement.scrollHeight; // if(this.clientH + scrollT + 300 > scrollH){ // return true; // }else{ // return false; // } // } } // 获取最小值封装 function getMin(arr) { var myarr = []; for(var i = 0;i < arr.length;i++){ myarr.push(arr[i]); } return myarr.sort((a,b) => a-b)[0]; } </script> </head> <body> <div class="con"> <div class="box"> <div class="imgbox"> <img src="./images/2.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/1.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/3.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/4.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/5.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/6.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/7.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/8.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/9.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/10.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/2.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/1.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/3.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/4.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/5.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/6.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/7.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/8.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/9.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/10.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/2.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/1.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/3.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/4.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/5.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/6.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/7.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/8.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/9.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/10.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/1.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/3.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/4.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/5.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/6.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/7.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/8.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/9.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/10.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/1.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/3.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/4.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/5.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/6.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/7.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/8.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/9.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="./images/10.jpg" alt=""> </div> </div> </div> </body> </html>
