vue实现浮动广告（浏览器范围内匀速移动）

原理：写一个让dom匀速移动的方法，然后用定时器每隔一定时间调用这个方法，然后鼠标放上去停止定时器，移除时继续定时器，下面直接上代码

<template><div><div id="thediv" ref="thediv" @mouseover="clearFdAd" @mouseout="starFdAd">我是浮动广告</div></div></template><script>
var intervalexport default {data() {return {xPos:300,yPos:200,step:1,delay:8,height:0,Hoffset:0,Woffset:0,yon:0,xon:0,pause:true,};},mounted() {interval=setInterval(this.changePos,10)},methods: {changePos(){let width=document.documentElement.clientWidth;let height=document.documentElement.clientHeight;this.Hoffset=this.$refs.thediv.offsetHeight;this.Woffset=this.$refs.thediv.offsetWidth;this.$refs.thediv.style.left=(this.xPos+document.body.scrollLeft+document.documentElement.scrollLeft)+"px";this.$refs.thediv.style.top=(this.yPos+document.body.scrollTop+document.documentElement.scrollTop)+"px";if(this.yon){this.yPos=this.yPos+this.step;}else{this.yPos=this.yPos-this.step;}if(this.yPos<0){this.yon=1;this.yPos=0;}if(this.yPos>=(height-this.Hoffset)){this.yon=0;this.yPos=(height - this.Hoffset);}if(this.xon){this.xPos=this.xPos + this.step;}else{this.xPos=this.xPos - this.step;}if(this.xPos < 0){this.xon = 1;this.xPos = 0;}if(this.xPos >= (width - this.Woffset)){this.xon = 0;this.xPos = (width - this.Woffset);}},clearFdAd(){clearInterval(interval)},starFdAd(){interval=setInterval(this.changePos,10)},}
};
</script>
#thediv {z-index: 100;position: absolute;top: 43px;left: 2px;height: 100px;width: 100px;background-color: red;
}

vue实现浮动广告（浏览器范围内匀速移动）相关推荐

360浏览器的js兼容与360拦截浮动广告
360浏览器对页面过滤的地方非常之多,先说两个我前两天用到的: 前几天用写了点(http://www.nycfgl.com/)东西,用js写的,在ie和chrome中都没用问题,在360中就出问题了, ...
2021最新最全前端面试题（包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等）
整理了一些前端面试题,希望对正在找前端工作的伙伴有用.本篇文章内容篇幅较大,主要针对初中级前端开发工程师. 篇幅过长,大家可以先点赞收藏以后慢慢看. 关于HTML 的title和alt属性有什么区别 ...
js 让鼠标右下角有一排小字_JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码...
基于JavaScript代码实现随机漂浮图片广告,javascript图片广告在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上类似标签之后,漂浮效果就会失效,下面分享一个符合标准的漂浮 ...
php页面浮动窗口代码,JavaScript浮动广告窗口实例
浮动广告窗口浮动广告窗口 #mydiv{ width:100px; height:100px; background:#f00; } #content{ text-align:center; } # ...
【HTML】制作一个简单的浮动广告页面
HTML三分钟实现浮动广告页面一.程序效果二.程序实现一.程序效果最终实现会在浏览器窗口内自由移动,遇到边界自动反射,程序出于好奇,仅供参考! 二.程序实现 <html><h ...
JavaScript浮动广告
js的浮动广告代码,复制就能用自己修改图片的地址 <html> <head><meta charset="utf-8"><title&g ...
java 屏蔽广告js_用js屏蔽被http劫持的浮动广告实现方法
最近发现网站经常在右下角弹出一个浮动广告,开始的时候以为只是浏览器的广告. 后来越来越多同事反映在家里不同浏览器也会出现广告.然后深入检查了下,发现网站竟然被劫持了. 然后百度了一大堆资料,什么htt ...
标准网页两侧浮动广告代码支持FF及IE
点击这里使用RSS订阅本Blog:网页两侧浮动广告代码经测试支持IE.Firefox等浏览器 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
经典网页布局浮动广告
文章目录前言 css盒子模型 css工作流程定位生成盒子通过外边距控制content的位置通过内边距实现填充效果 css盒子的放置 position的相对布局 position的绝对布局 p ...

vue实现浮动广告（浏览器范围内匀速移动）

vue实现浮动广告（浏览器范围内匀速移动）相关推荐

最新文章

热门文章