原生js实现类似弹窗抖动效果
网络编程 2021-07-04 21:47www.168986.cn编程入门
这篇文章主要介绍了原生js实现类似弹窗抖动效果的相关资料,推荐给大家，需要的朋友可以参考下
先在之前做的抖动窗口上做了点动作 无限变色
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{text-align: center;line-height: 150px;font-weight: bold;}
#dv{width: 300px;height: 150px;position: absolute;left: 200px;: 100px;background: red;}
#dv2{width: 300px;height: 150px;position: absolute;left: 600px;: 100px;background: yellow;}
</style>
<script>
window.onload=function(){
// 得到0--255的随机数
function getRandNumber(rmin,rmax){
var cha = rmax-rmin;
var rand = Math.random();
return rmin+Math.round(charand)
}
var oDv = document.getElementById('dv')
var oDv2 = document.getElementById('dv2')
//抖动需要获取的值一个数组
var arr=[];
// 随机变色
setInterval(function(){
var arr2 = [
getRandNumber(0,255),
getRandNumber(0,255),
getRandNumber(0,255)
];
oDv.style.backgroundColor="rgb("+arr2[0]+","+arr2[1]+","+arr2[2]+")"
},130)
// 抖动获取值放到数组中
for(var i=20;i>0;i-=2){
arr.push(i,-i)
}
// 第一个盒子抖动
oDv.onclick=function(){
sb(oDv,'left',function(){
sb(oDv,'')
})
}
// 第二个盒子抖动
oDv2.onclick=function(){
sb(oDv2,'left',function(){
sb(oDv2,'')
})
}
// 抖动
function sb(obj,attr,fnEnd){
var timer=null;
var num=0;
clearInterval(timer)
timer=setInterval(function(){
obj.style[attr]=parseInt(getStyle(obj,attr))+arr[num]+'px'
num++;
if(num===arr.length){
clearInterval(timer)
fnEnd&&fnEnd()
obj.innerHTML='我是'+getStyle(obj,'backgroundColor')+'色'
//alert(1)
}
},50)
}
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]
}
};
</script>
</head>
<body>
<div id="dv">点我呀</div>
<div id="dv2">点我呀</div>
</body>
</html>
演示图
以上所述就是本文的全部内容了，希望大家能够喜欢。
编程语言
- 宿迁百度关键词排名指南：实现精准营销的关键
- 四川SEO优化怎么做网络推广
- 立昂技术备案老域名收购：如何为您的业务赋能
- 安徽百度关键词seo贵不贵，一般需要多少钱
- 吉林百度快照排名怎么做电话营销
- 多伦新手做SEO怎么做
- 甘肃优化关键词排名推广怎么做论坛营销
- 沙雅SEO网站推广：提升您的在线可见性
- 四川SEO优化如何提升销售额和销售量
- 聂荣网站排名优化：提升网站可见性的全方位指
- 涞水SEO：提升地方企业在线可见性的策略
- 辽宁百度seo排名怎样做网站排名
- 临湘哪有关键词排名优化：提升网站可见度的关
- 黑龙江百度网站优化有没有优惠
- 凉城优化关键词排名推广：提升您的网络可见性
- 萝北整站优化：提升您网站流量和排名的全面指