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 = truevar timer=nullvar resultvar 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).heightdrop.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.screenXlet y=e.screenYlet divtop=loginbox.offsetToplet divleft=loginbox.offsetLeftdocument.onmousemove=(e2)=>{//获取鼠标滑动过程中的xy:相对于视口let x2=e2.screenXlet y2=e2.screenYconsole.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.scrollTopif (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].namebtn.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].namebtn.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=400function  send () {              if(text.value==""){return}var span=document.createElement("span")span.innerHTML=text.valuetext.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").childrenArray.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>

DOM 案例——(美团外卖下拉框菜单、半透明——信息滑入、模态窗口拖拽效果、放大镜效果、滚动条滑到一定位置的固定导航栏、12306购票网站多级联动、斗鱼TV无规则弹幕特效、百度搜索条动态输入下拉瀑布)相关推荐

js实现省市区联动调节下拉框菜单
在我们平时的网页制作中,经常需要使用到一种控件,能够实现对省市区级联调节的下拉框菜单,如下图所示: 一共有三个下拉控件,后一个下拉控件中的内容根据前一个下拉框的内容来定,比如,第一个控件中为江苏省,那 ...
java省市县联动下拉框选择_原生JavaScript实现动态省市县三级联动下拉框菜单实例代码...
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做 ...
nw.js FrameLess Window下的窗口拖拽与窗口大小控制
nw.js FrameLess Window下的窗口拖拽与窗口大小控制很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...
百度站内搜索代码php,网页嵌入百度搜索条（含站内搜索功能）
网页嵌入百度搜索条(含站内搜索功能) 样式一: 代码: function g(formname) { var url = "http://www.baidu.com/baidu"; ...
使用SeleniumWebdriver操作下拉框菜单DropDown
本文将介绍如何处理下拉框选项和多选操作,首发于微信公众号[软测小生] 从下拉框中选择–>选项在控制下拉框之前,我们必须做以下两件事: 导入包org.openqa.selenium.suppor ...
java动态生成下拉框，标注信息，HSSFDataValidation和数据有效性等设置
POI的基础使用 java动态生成下拉框属性,设置下拉框数据有效性 /*** 设置下拉框元素** @param firstRow 起始行* @param endRow 结束行* @param firs ...
【Spark分布式内存计算框架——Spark Streaming】11. 应用案例：百度搜索风云榜（下）实时窗口统计
5.5 实时窗口统计 SparkStreaming中提供一些列窗口函数,方便对窗口数据进行分析,文档: http://spark.apache.org/docs/2.4.5/streaming-pro ...
百度地图，自动获取定位，拖拽获取地点，模糊查询获取当前位置
先看下效果图,因为没有美化,只是做一下功能. 完整代码如下 <!DOCTYPE html> <html> <head><meta charset=" ...
Android音乐播放器开发(5)—播放界面（播放、暂停、上一首、下一首，顺序播放、随机播放、拖拽进度条…）
1. 说明源码已同步到Gitee仓库,Github仓库,觉得还不错的话帮忙点个"star"吧,非常感谢. Android播放器专栏其它文章: 服务端:Android音乐播放器开发 ...

DOM 案例——(美团外卖下拉框菜单、半透明——信息滑入、模态窗口拖拽效果、放大镜效果、滚动条滑到一定位置的固定导航栏、12306购票网站多级联动、斗鱼TV无规则弹幕特效、百度搜索条动态输入下拉瀑布)

1、缓动动画——美团外卖下拉框菜单

2、半透明——信息滑入

3、模态窗口拖拽效果

4、放大镜效果

5、滚动条滑到一定位置的固定导航栏

6、12306购票网站多级联动

7、斗鱼TV无规则弹幕特效

8、百度搜索条动态输入下拉瀑布

DOM 案例——(美团外卖下拉框菜单、半透明——信息滑入、模态窗口拖拽效果、放大镜效果、滚动条滑到一定位置的固定导航栏、12306购票网站多级联动、斗鱼TV无规则弹幕特效、百度搜索条动态输入下拉瀑布)相关推荐

最新文章

热门文章