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>