原生js漂浮广告效果

静态页面代码

<body><div id="box"><img src="1.jpg" alt=""></div>
</body>

css样式

 *{padding: 0;margin: 0;}#box{width: 200px;height: 200px;border: solid 1px black;position: absolute;top: 0;left: 0;background: url("../../img/20160912160251944.jpg")no-repeat;}img{width: 20px;height: 20px;float: right;}

这些样式只供参考，可根据个人喜好更改

js代码区域

 //获取元素var box = document.getElementById('box');var close = document.getElementsByTagName("img")[0];//允许的left最大值var maxleft = document.documentElement.clientWidth-box.offsetWidth;//允许的top最大值var maxtop=  document.documentElement.clientHeight-box.offsetHeight;//设置一下响应式 当屏幕变化的时候获取新值window.onresize=function () {maxleft = document.documentElement.clientWidth-box.offsetWidth;maxtop=  document.documentElement.clientHeight-box.offsetHeight;}//距上距离每次变化的值  单位pxvar t=4;//距左距离每次变化的值  单位pxvar l=4;//漂浮函数function  piaofu() {//获取初始距左的距离var oldleft=box.offsetLeft;//设置新距左的距离var newleft =oldleft+l;//获取初始距上的距离var oldtop=box.offsetTop;//设置新距上的距离var newtop =oldtop+t;//如果距上的距离超过高度最大值，重新赋值为高度最大值if(newtop>maxtop){newtop=maxtop;}//如果距左的距离超过距左的最大值，重新赋值为距左最大值if(newleft>maxleft){newleft=maxleft;}//如果距上的距离小于高度最小值，重新赋值为高度最小值if(newtop<0){newtop=0}//如果距左的距离小于距左的最小值，重新赋值为距左最小值if(newleft<0){newleft=0}box.style.left=newleft+"px";box.style.top=newtop+"px";//进行判断if(newtop==maxtop ||newtop==0){t=-1*t;}if(newleft==maxleft ||newleft==0){l=-1*l;}// if(box.style.display=="none"){//     setTimeout(function () {//         box.style.display="block"//     },3000)// }}//设置定时器var timer= setInterval(piaofu,20)//当鼠标放上的时候清楚定时器box.onmouseover=function () {clearInterval(timer)}//当鼠标移走的时候定时器继续box.onmouseout=function () {timer= setInterval(piaofu,20)}//当点击关闭按钮时隐藏close.onclick=function () {box.style.display='none'}

以上这些是我个人的想法，欢迎大家进行讨论、提出意见或建议，共同进步，感谢大家的浏览！

原生js漂浮广告效果相关推荐

html漂浮广告随页面移动代码,JS漂浮广告代码，慢慢漂移的广告JS代码
JS漂浮广告代码,慢慢漂移的广告js代码,可以漂浮到任何位置,哈哈...直接贴代码,很简单. var xin = true, yin = true var step = 1 var delay = 5 ...
原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html> <html lang="en"> ...
原生js实现放大镜效果
记录一次原生js实现放大镜效果. 文章目录效果图设计思路基本架子蒙版放大效果图逻辑设计蒙版跟放大的图肯定要先隐藏鼠标移入图片显示蒙版鼠标移动蒙版跟着移动处理边界情况大图移动小优 ...
React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
html制作满天星,怎样使用原生js做出满天星效果
这次给大家带来怎样使用原生js做出满天星效果,使用原生js做出满天星效果的注意事项有哪些,下面就是实战案例,一起来看一下. 代码如下://图片自己加入改变路径 html{height: 100%;} ...
js漂浮广告代码(简洁!)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org ...
原生js实现如下效果：一个按钮，点击它会弹出对话框，但5秒内再点击不会再弹出对话框。5秒后恢复正常。
原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框.5秒后恢复正常. 第一种方式: 使用函数节流的方式(就是设置一个变量,来一个判断语句,判断这个变量的值.为真或假执 ...
Js浮动广告效果实现
第一种漂浮广告不符合W3CJavaScript漂浮广告代码,很不错,代码精简,不过一次只有漂一个,复制就能用了.希望站长朋友喜欢. <html> <head> <ti ...
原生js添加动画效果
原生js添加动画效果 html 这个图片是使用阿里图标需要下载 <div class="content"><div class="contAnimati ...

原生js漂浮广告效果

原生js漂浮广告效果

静态页面代码

css样式

js代码区域

原生js漂浮广告效果相关推荐

最新文章

热门文章