心得技巧
JS实现弹性漂浮广告代码
发布时间：2022-06-26 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JS实现弹性漂浮广告代码，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
目录
弹性悬浮广告效果图
1.功能（鼠标移入移出事件、点击事件、定时器控制移动）
2.div初始样式设置
2.获取div可以移动的页面大小
3.定时器控制移动，鼠标移入事件停止移动，鼠标移出继续移动。
4.点击事件点击让div消失
5.实现悬浮广告的完整代码
弹性悬浮广告效果图
1.功能（鼠标移入移出事件、点击事件、定时器控制移动）
div实现在页面上移动，并判断碰到页面边框反弹，鼠标移入div停止移动，鼠标移出div进行移动，点击div让它从页面消失，定时器控制它的移动。
2.div初始样式设置
//div（广告）获取节点
VAR div1 = document.getElementById("div1");
// div(广告)初始的位置
var offsetx = 0;
var offsety = 0;
//div(广告)每次移动的距离
var stepx = 10;
var stepy = 10;
//div(广告)的大小
div1.style.width="100px"
div1.style.height="100px"
//设置定位
div1.style.posITion="absolute"
div1.style.top = offsetx;
div1.style.left = offsety;
//广告图片
div1.style.backgroundImage="url(./img/ggao.webp)"
div1.style.backgroundSize="cover"2.获取div可以移动的页面大小
//网页可视化宽高--div(广告)可以移动的区域
var seeWidth = document.documentElement.clientWidth;
var seeHeight = document.documentElement.clientHeight;
//div(广告)最大可移动的宽度、高度
var maxLeft = seeWidth -100;
var maxTop = seeHeight -100;3.定时器控制移动，鼠标移入事件停止移动，鼠标移出继续移动。
//启动定时器
var t= setInterval(move,30);
//鼠标移入清除定时器
div1.onmouseenter = function(){
clearInterval(t);
}
//鼠标移出恢复
div1.onmouseleave = function(){
t = setInterval(move,30);
}4.点击事件点击让div消失
//点击事件，点击后消失
div1.onclick = function(){
div1.style.display = "none"
} 5.实现悬浮广告的完整代码
<div id="div1"> </div>
<body>
<script>
//div（广告）获取节点
var div1 = document.getElementById("div1");
// div(广告)初始的位置
var offsetx = 0;
var offsety = 0;
//div(广告)每次移动的距离
var stepx = 10;
var stepy = 10;
//div(广告)的大小
div1.style.width="100px"
div1.style.height="100px"
//设置定位
div1.style.position="absolute"
div1.style.top = offsetx;
div1.style.left = offsety;
// div1.style.backgroundColor="black"
div1.style.backgroundImage="url(./img/ggao.webp)"
div1.style.backgroundSize="cover"
//网页可视化宽高--div(广告)可以移动的区域
var seeWidth = document.documentElement.clientWidth;
var seeHeight = document.documentElement.clientHeight;
//div(广告)最大可移动的宽度、高度
var maxLeft = seeWidth -100;
var maxTop = seeHeight -100;
function move(){
offsetx+=stepx;
offsety+=stepy;
console.LOG(offsetx);
console.log(offsety)
//大于可移动的高度或到达顶部 就让移动的距离变为它的负数
if(offsety>=;maxTop||offsety<=0){
stepy = -stepy;
}
//大于可移动的宽度或到达最左 就让移动的距离变为它的负数
if(offsetx>=maxLeft||offsetx<=0){
stepx=-stepx;
}
//div定位的位置
div1.style.top = offsety+"px"
div1.style.left = offsetx+"px"
}
//启动定时器
var t= setInterval(move,30);
//鼠标移入清除定时器
div1.onmouseenter = function(){
clearInterval(t);
}
//鼠标移出恢复
div1.onmouseleave = function(){
t = setInterval(move,30);
}
//点击事件，点击后消失
div1.onclick = function(){
div1.style.display = "none"
}
</script>这个记录下来为了方便以后使用的方便，也希望大佬们多多交流，多多留言，指出我的不足的之处啦！
有需要的小伙伴可以研究研究啦！！
脚本宝典总结
以上是脚本宝典为你收集整理的JS实现弹性漂浮广告代码全部内容，希望文章能够帮你解决JS实现弹性漂浮广告代码所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的心得技巧相关文章
- clion结合vcpkg以及GTest的使用 2022-07-07
- EGF 2022-06-06
- ExtJS 布局-Column布局（Column layout） 2022-06-05
- 颜色之ARGB与RGB、RGBA的区别与介绍 2022-04-15
- rgba中的a是什么意思 CSS之RGBA颜色指南 2022-04-15
- rootfs -根文件系统制作 2022-07-07
- 网页简单布局之结构与表现原则分享 2022-04-15
- 小项目中怎么防止Vue的闪现画面效果 2022-04-15
- 隐藏 Web 中的元素方法及优缺点教程详解 2022-04-15
- 告别硬编码让你的前端表格自动计算的实例代码 2022-04-15
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程