原生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漂浮广告效果相关推荐

  1. html漂浮广告随页面移动代码,JS漂浮广告代码,慢慢漂移的广告JS代码

    JS漂浮广告代码,慢慢漂移的广告js代码,可以漂浮到任何位置,哈哈...直接贴代码,很简单. var xin = true, yin = true var step = 1 var delay = 5 ...

  2. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html> <html lang="en"> ...

  3. 原生js实现放大镜效果

    记录一次原生js实现放大镜效果. 文章目录 效果图 设计思路 基本架子 蒙版 放大效果图 逻辑设计 蒙版跟放大的图肯定要先隐藏 鼠标移入图片显示蒙版 鼠标移动蒙版跟着移动 处理边界情况 大图移动 小优 ...

  4. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  5. html制作满天星,怎样使用原生js做出满天星效果

    这次给大家带来怎样使用原生js做出满天星效果,使用原生js做出满天星效果的注意事项有哪些,下面就是实战案例,一起来看一下. 代码如下://图片自己加入改变路径 html{height: 100%;} ...

  6. js漂浮广告代码(简洁!)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org ...

  7. 原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框。5秒后恢复正常。

    原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框.5秒后恢复正常. 第一种方式: 使用函数节流的方式(就是设置一个变量,来一个判断语句,判断这个变量的值.为真或假执 ...

  8. Js浮动广告效果实现

    第一种 漂浮广告 不符合W3CJavaScript漂浮广告代码,很不错,代码精简,不过一次只有漂一个,复制就能用了.希望站长朋友喜欢. <html> <head> <ti ...

  9. 原生js添加动画效果

    原生js添加动画效果 html 这个图片是使用阿里图标需要下载 <div class="content"><div class="contAnimati ...

最新文章

  1. 爬虫的步骤解析内容xpath介绍_爬虫入门到精通-网页的解析(xpath)
  2. Hibernate_13_QBC查询
  3. Filter_快速入门
  4. 出现ping: unknown host www.baidu.com 问题解决
  5. 应用程序已被java 1.6_Apple Java更新1.6.0_51之后,Swing应用程序卡住了
  6. 洛谷4316绿豆蛙的归宿
  7. (转)Spring实现IoC的多种方式
  8. 【单片机】51单片机烧录那些事儿
  9. Windows10安装Matlab 2018b教程
  10. Windows安装Oracle与PlSql教程
  11. JavaScript ES6新特性
  12. java 开发 cms_10 个最受欢迎的 Java 开发的 CMS 系统
  13. 非常实用全面的风水知识
  14. 阿里云对象存储OSS文件上传
  15. oracle rman crosscheck 命令
  16. ▷Scratch课堂丨【编程趣味卡3】制作音乐
  17. 人脸属性分析--性别、年龄和表情识别(转)
  18. jQuery appendTo() 方法
  19. pythonocc 等步长平分周长的分割曲线
  20. LaTeX排版(一):字体、页眉页脚、页边距、行距的设置

热门文章

  1. 推荐几个好用又好玩的vscode插件!(转载)
  2. Fortran语言学习记录
  3. Vscode配置XDebug
  4. 在envi做随机森林_基于模糊孤立森林算法的多维数据异常检测方法
  5. 下载W ndows桌面,《如何制作WndowsMoble手机的桌面主题.doc
  6. 闲云旅游网04(基于vue+element ui)完成机票数据列表渲染
  7. 用Go语言 轻松实现插入排序 (Golang经典编程案例)
  8. 武汉往事之治疗微信病
  9. 解决SDWebimage加载过多过大图片导致内存爆表崩溃的问题
  10. busybox配置telnetd