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>
JS各种案例效果的更多相关文章
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS实现分页效果2.0(新增了上一页和下一页,添加当前元素样式)
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- 使用JS实现手风琴效果
想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
- js弹窗登录效果(源码)--web前端
1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 原生JS实现弹幕效果
纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的. 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...
随机推荐
- pycharm django使用技巧
- SPI通讯(Serial Peripheral interface)
1. SPI,是一种高速的,全双工,同步的通信总线,并且在芯片的管脚上只占用四根线:SCLK,MISO,MOSI,CS 2. SPI结构简图: 可以看出,SPI主从设备两端都有一个位移寄存器,数据在位 ...
- DFS集训
2019-07-29 09:01:06 A PARTY A company has n employees numbered from 1 to n. Each employee either has ...
- xorm - Update,乐观锁,更新时间updated,NoAutoTime()
更新数据使用Update方法 Update方法的第一个参数为需要更新的内容,可以为一个结构体指针或者一个Map[string]interface{}类型. 当传入的为结构体指针时,只有非nil和非0的 ...
- Spring Cloud Alibaba学习笔记(17) - Spring Cloud Gateway 自定义路由谓词工厂
在前文中,我们介绍了Spring Cloud Gateway内置了一系列的路由谓词工厂,但是如果这些内置的路由谓词工厂不能满足业务需求的话,我们可以自定义路由谓词工厂来实现特定的需求. 例如有某个服务 ...
- java 正则和连接json
前面已经写了不少关于C# 怎么使用正则,有兴趣,可以翻译成java代码. 以图片为例子: import java.util.regex.Matcher; import java.util.regex. ...
- Java身份证处理工具
身份证处理工具 /** * <html> * <body> * <P> Copyright 1994 JsonInternational</p> * & ...
- centos安装docker以及docker-compose
1.yum更新 # sudo yum update 2.如果安装docker旧版本,旧版本的卸载 # sudo yum remove docker docker-common docker-selin ...
- 原子性atomic/nonatomic
原子性:并发编程中确保其操作具备整体性,系统其它部分无法观察到中间步骤,只能看到操作前后的结果. 决定编译器生成的getter和setter是否原子(natomic)操作. i 因此,atomic ...
- https小结
目录: 1.什么是https 2.https实现过程描述(https和证书小结) 3.(在客户端)https抓包解密 4.wireshark分析https数据包解密前后的特点 正文 1.什么是http ...