目录
1、缓动动画——美团外卖下拉框菜单
效果：
点击美食后弹出菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>美团外卖菜单--下拉框</title>
</head>
<body>
<style type="text/css">
.drop {
width: 200px;
height: 40px;
overflow: hidden;
text-align: center;
color: white;
font-size: 16px;
}
ul,
li {
list-style: none;
margin: 0px;
padding: 0px;
}
li {
width: 200px;
height: 40px;
background-color: gold;
border: 1px solid lightcyan;
line-height: 40px;
}
.title {
color: white;
font-size: 20px;
color: #C15900;
font-weight: 700;
cursor: pointer;
}
</style>
<div class="drop">
<ul class="drop_menu">
<li class="title">美食</li>
<li>面食粥点</li>
<li>简餐便当</li>
<li>汉堡披萨</li>
<li>异国料理</li>
<li>小吃夜宵</li>
<li>甜品饮品</li>
<li>果蔬生鲜</li>
</ul>
</div>
<script type="text/javascript">
window.onload = function () {
var drop = document.querySelector(".drop")
var flag = true
var timer=null
var result
var drop_menu=document.querySelector(".drop_menu")
drop.addEventListener("click",function(e){
clearInterval(timer)
if(flag=!flag){
result=40
}else{
result=340
}
timer=setInterval(()=>{
let h=window.getComputedStyle(drop).height
drop.style.height=parseInt(h)+(result-parseInt(h))*0.7+"px"
},20)
})
}
</script>
</body>
</html>
2、半透明——信息滑入
效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>半透明底部滑动进入</title>
<style type="text/css">
.div1 {
width: 300px;
height: 450px;
position: absolute;
left: 400px;
top: 50px;
background-image: url(src/8.jpg);
background-size: 100% 100%;
overflow: hidden;
}
.info {
width: 300px;
height: 180px;
position: absolute;
left: 0px;
top: 550px;
background-color:rgba(255,255,255,0.8);
}
.info p{
display: flex;
justify-content: space-around;
align-content: center;
color:#666666;
}
.info p span{
color: #ff6960;
}
</style>
</head>
<body>
<div class="div1">
<div class="info"><br><p>风景<span>云南</span></p>
<p>住宿：200元/晚</p>
<p>三餐：50元/人</p>
</div>
</div>
<script type="text/javascript">
var div1 = document.querySelector(".div1")
var timer1,timer2;
div1.onmouseenter = function() {
clearInterval(timer2);
timer1=setInterval(() => {
var nowtop = parseInt(getComputedStyle(this.firstElementChild).top)
console.log(nowtop)
this.firstElementChild.style.top = nowtop + (450 -180- nowtop)*0.7 + "px"
}, 50)
}
div1.onmouseleave=function () {
clearInterval(timer1);
timer2=setInterval(() => {
var nowtop = parseInt(getComputedStyle(this.firstElementChild).top)
this.firstElementChild.style.top = nowtop + (450- nowtop)*0.7 + "px"
}, 50)
}
</script>
</body>
</html>
3、模态窗口拖拽效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="loginbtn1">登录</button>
<style>
.modelbox{
width:100%;
height: 800px;
background-color: rgba(129,148,170,0.8);
position: fixed;
left: 0px;
top: 0px;
z-index: 10000;
}
.loginbox{
width:400px;
height: 240px;
border-radius: 10px;
background-color:white;
position: absolute;
top: 200px;
left: 400px;
cursor: move;
}
</style>
<script>
document.querySelector("#loginbtn1").onclick=function() {
console.log(66666)
//创建半透明的蒙版层
var modelbox=document.createElement("div")
modelbox.classList.add("modelbox")
document.body.appendChild(modelbox)
var loginbox=document.createElement("div")
loginbox.classList.add("loginbox")
modelbox.appendChild(loginbox)
loginbox.addEventListener("mouseup",(e)=>{
document.onmousemove=null
})
loginbox.addEventListener("mousedown",(e)=>{
//获取鼠标按下时的xy:相对于视口
let x=e.screenX
let y=e.screenY
let divtop=loginbox.offsetTop
let divleft=loginbox.offsetLeft
document.onmousemove=(e2)=>{
//获取鼠标滑动过程中的xy:相对于视口
let x2=e2.screenX
let y2=e2.screenY
console.log(loginbox.offsetTop)
loginbox.style.top=divtop+(y2-y)+"px"
loginbox.style.left=divleft+(x2-x)+"px"
}
})
}
</script>
</body>
</html>4、放大镜效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>缓动动画</title>
</head>
<body>
<style type="text/css">
.div1{
width: 200px;
height: 40px;
background-color: lightgreen;
}
</style>
<div class="div1"></div>
<script type="text/javascript">
var div1=document.querySelector(".div1")
div1.onclick=function(){
setInterval(()=>{
var nowH=parseInt(getComputedStyle(this).height)
this.style.height=nowH+(400-nowH)*0.9+"px"
},200)
}
</script>
</body>
</html>
5、滚动条滑到一定位置的固定导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定导航栏</title>
</head>
<body>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.top {
width: 100%;
height: 100px;
background-color: lightblue;
position: relative;
}
.nav {
width: 100%;
height: 60px;
background-color: lightcyan;
position: relative;
left: 0px;
top: 0px;
z-index: 100;
}
.content {
width: 100%;
height: 4000px;
background-color: lightsalmon;
position: relative;
}
</style>
<div class="top"></div>
<div class="nav"></div>
<div class="content"></div>
<script type="text/javascript">
var nav = document.querySelector(".nav")
document.onscroll = function (e) {
var top = window.pageYOffset || document.documentElement.scrollTop
if (top > nav.offsetTop) {
nav.style.position = "fixed"
} else if (top <= nav.offsetTop) {
nav.style.position = "relative"
}
}
</script>
</body>
</html>6、12306购票网站多级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
.container {
width: 100px;
background-color: darkgrey;
overflow: auto;
float: left;
border-right: 1px solid black;
}
.btn {
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: brown;
margin-bottom: 1px;
cursor: pointer;
}
</style>
<div class="container"></div>
<script>
var data = [{
name: "四川",
next: [{
name: '成都1',
next: ["东站1", "北站2", "南站3"]
}, {
name: '成都2',
next: ["东站4", "北站5", "南站6", "东站7", "北站8", "南站9"]
}, {
name: '成都3',
next: ["东站11", "北站12"]
}]
}, {
name: "云南",
next: [{
name: '云南1',
next: ["东站13", "北站14", "南站15"]
}, {
name: '云南2',
next: ["东站16", "北站17", "南站18", "东站19", "北站21", "南站22"]
}, {
name: '云南3',
next: ["东站23", "北站24"]
}, {
name: '云南4',
next: ["东站25", "北站26", "南站27"]
}, {
name: '云南5',
next: ["东站23", "北站33", "南站34", "东站35", "北站36", "南站37"]
}, {
name: '云南6',
next: ["东站41", "北站42"]
}]
},{
name: "dnf",
next: [{
name: '四川',
next: ["一区", "二区", "三区","四区",'五区',"六区"]
}, {
name: '北京',
next: ["1区", "2区"]
}, {
name: '山东',
next: ["壹区", "贰区","叁区","肆区"]
}]
}]
console.log(data)
let container1=document.querySelector(".container")
for(let i=0;i<data.length;i++){
console.log(data[i].name)
let btn=document.createElement("div")
btn.innerHTML=data[i].name
btn.className="btn"
container1.appendChild(btn)
btn.onclick=function(){
//清除第一列的弟弟们
let containers=document.querySelectorAll(".container")
containers.forEach((el,index)=>{if(index!=0){el.remove()}})
//创建下一列
let container2=document.createElement("div")
container2.className="container"
document.body.appendChild(container2)
//把当前数据的next数组属性中的所有数据添加到container2中
for(let j=0;j<data[i].next.length;j++){
let btn=document.createElement("div")
btn.innerHTML=data[i].next[j].name
btn.className="btn"
container2.appendChild(btn)
btn.onclick=function(){
//清除第二列的弟弟们
let containers=document.querySelectorAll(".container")
containers.forEach((el,index)=>{if(index>1){el.remove()}})
//创建下一列
let container3=document.createElement("div")
container3.className="container"
document.body.appendChild(container3)
//把当前数据的next数组属性中的所有数据添加到container3中
for(let k=0;k<data[i].next[j].next.length;k++){
let btn=document.createElement("div")
btn.className="btn"
btn.innerHTML=data[i].next[j].next[k]
container3.appendChild(btn)
btn.onclick=function(){
console.log(data[i].name+data[i].next[j].name,data[i].next[j].next[k])
}
}
}
}
}
}
</script>
</body>
</html>
7、斗鱼TV无规则弹幕特效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>斗鱼TV弹幕</title>
<style>
html,
body {
font-size: 10px;
overflow: hidden;
margin: 0;
padding: 0;
}
#box {
width: 100%;
height: 100%;
}
#dm {
width: 100%;
height: 90vh;
background: lightcyan;
}
#dm span {
width: auto;
height: 3rem;
font-size: 2rem;
line-height: 2rem;
position: absolute;
white-space: nowrap;
}
#idDom {
width: 100%;
height: 10vh;
background:#9A6E3A;
position: absolute;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
#content {
width: 50rem;
height: 10vh;
display: flex;
align-items: center;
justify-content: center;
}
.title {
font-size: 16px;
color: #fff;
line-height: #ccc;
}
.text {
width: 30rem;
height: 2.5rem;
border: none;
border-radius: .5rem;
font-size: 1.4rem;
margin: 0 .5rem;
padding: 0 1rem;
}
.btn {
width: 6rem;
height: 3rem;
border: none;
background: brown;
color: #fff;
}
</style>
</head>
<body>
<div class="box" id="box">
<div id="dm"></div>
<div class="idDom" id="idDom">
<div id="content">
<p class="title">发弹幕:</p>
<input type="text" class="text" id="text" placeholder="请输入你想说的话" />
<button type="button" class="btn" id="btn">发送</button>
</div>
</div>
</div>
<script>
//用户输入完毕 然后点击发送或者敲击回车 就把输入的内容显示到页面 然后滚动起来
h=400
function send () {
if(text.value==""){return}
var span=document.createElement("span")
span.innerHTML=text.value
text.value=""
span.style.left="100%"
var r=~~(Math.random()*255)
var g=~~(Math.random()*255)
var b=~~(Math.random()*255)
span.style.color=`rgb(${r},${g},${b})`
span.style.top=Math.random()*(h-10)+10+"px"
dm.appendChild(span)
}
var text=document.querySelector("#text")
var dm=document.querySelector("#dm")
document.onkeydown=function(e){
console.log(e.keyCode)
if(e.keyCode==13){
send()
}
}
btn.onclick=send
//动画效果 让dm元素内部的所有span动起来
setInterval(()=>{
var sons=document.querySelector("#dm").children
Array.from(sons).forEach(el=>{
el.style.left=el.offsetLeft-5+'px'
})
},20)
</script>
</body>
</html>
8、百度搜索条动态输入下拉瀑布
首先进入网页：字节跳动静态资源公共库，搜索JQuery，再复制Tag=>JQuery.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"
type="application/javascript"></script>
</head>
<body>
<input type="text" oninput="load1(this.value)">
<div class="box"></div>
<script>
function load1(v) {
let url=`http://suggestion.baidu.com/su?wd=${v}&cb=?`
$.getJSON(url, function(data){ //这是网络请求
//清空瀑布流
var box=document.querySelector(".box")
box.innerHTML=""
//把数据显示到box中
for(var i=0;i<data.s.length;i++){
var p1=document.createElement("p")
p1.innerHTML=data.s[i]
box.appendChild(p1)
}
})
}
</script>
</body>
</html>
3898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
