JS实现网站悬浮广告的代码

本文主要和大家分享JS实现网站悬浮广告的代码,大家可以先看一下效果图,希望能帮助到大家。

如图

JS实现网站悬浮广告的代码

黄色区块会沿着浏览器的上下左右碰撞移动,可关闭,鼠标移上去会停止

nbsp;html>广告*{pding:0px;margin:0px;}#ad{position:absolute;left:0px;top:0px;width:200px;height:50px;line-height:50px;text-align:center;color:black;background-color:orange;border-rius: 2%;}

广告位招商

//获取imgad=document.getElementById("ad");//初始化横坐标x=0;//设置纵坐标y=0;//设置加速度yv=10;xv=10;function fun(){//范围//左右if(xwindow.innerWidth-ad.offsetWidth){xv=-xv;}//上下if(ywindow.innerHeight-ad.offsetHeight){yv=-yv;}x+=xv;y+=yv;//获取到的x值赋值给ad的leftad.style.left=x+"px";//获取到的y值赋值给ad的topad.style.top=y+"px";}mytime=setInterval(fun,100);//给ad绑定鼠标移入事件ad.onmouseover=function(){//清除定时器clearInterval(mytime);}//鼠标移出ad.onmouseout=function(){mytime=setInterval(fun,100);}

登录后复制

相关推荐:

JS实现悬浮移动窗口(悬浮广告)的特效

以上就是JS实现网站悬浮广告的代码的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2777616.html

(0)
上一篇 2025年3月8日 15:11:07
下一篇 2025年3月8日 15:11:19

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JS正则表达式验证数字的实战归纳

    这次给大家带来JS正则表达式验证数字的实战归纳,JS正则表达式验证数字的注意事项有哪些,下面就是实战案例,一起来看一下。 正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串、将匹…

    编程技术 2025年3月8日
    200
  • JS实现判断鼠标是否滚动的代码

    本文主要和大家分享js实现判断鼠标是否滚动,主要以代码的形式和大家分享,希望能帮助到大家。 var scrollFunc = function (e) { var direct = 0; e = e || window.event; if …

    编程技术 2025年3月8日
    200
  • JS里最基础的正则表达式使用详解

    这次给大家带来JS里最基础的正则表达式使用详解,在JS里使用基础正则表达式的注意事项有哪些,下面就是实战案例,一起来看一下。 正则表达式是一个很牛逼的东东,今天在这里只是简单的给刚刚接触JS的人普及一下,里面若有争议的地方欢迎大家留言! 1…

    2025年3月8日
    200
  • 正则的数字验证详解(附代码)

    这次给大家带来,的注意事项有哪些,下面就是实战案例,一起来看一下。 第一部分:数值验证 1.验证只包含数字、指定长度(N)的字符串 比如我要验证只包含数字,长度为6的字符串,如123456,则可以使用下面几种效果相同的验证方式 d{6}[0…

    2025年3月8日 编程技术
    200
  • JS的正则如何校验非零的正整数

    这次给大家带来JS的正则如何校验非零的正整数,正则校验非零正整数的注意事项有哪些,下面就是实战案例,一起来看一下。 话不多说,请看实例代码 function validation() { var val = document.getElem…

    2025年3月8日 编程技术
    200
  • JS的正则如何校验非零的负整数

    这次给大家带来JS的正则如何校验非零的负整数,正则校验非零负整数的注意事项有哪些,下面就是实战案例,一起来看一下。 话不多说,请看代码 function validation() { var val = document.getElemen…

    编程技术 2025年3月8日
    200
  • AngularJS之前端框架

    本文主要为大家分享一篇JAngularJS之前端框架的请求方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。 使用: 登录后复制登录后复制 一、常用属性:     ng-app:可以再任何元素上使用,代…

    编程技术 2025年3月8日
    200
  • js实现断点调试

    本文主要和大家分享js实现断点调试,主要以图文的形式和大家分享,希望能帮助到大家。 1.断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了。操作起来…

    2025年3月8日 编程技术
    200
  • js中正则知识总结

    本文主要和大家分享js中正则知识总结,主要以代码的方法和大家讲解,希望能帮助到大家。 方法: 1、 testvar string=”abvfddsadew”;var reg=/ D/;reg.test(string) //记住test是正则…

    编程技术 2025年3月8日
    200
  • js回调详解

    本文主要和大家介绍js回调详解,在用js时候,刚接触了个回调,差点把自己饶进去,好再出来了,现在屡屡思路。 先来个简单的代码: var rows = [{name:”123″},{name:”456″}];var each = functi…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论