• 售前

  • 售后

热门帖子
入门百科

JS实现弹性漂泊广告代码

[复制链接]
城外606 显示全部楼层 发表于 2022-1-16 17:12:26 |阅读模式 打印 上一主题 下一主题
目次
弹性悬浮广告效果图
1.功能(鼠标移入移出事故、点击事故、定时器控制移动)
2.div初始样式设置
2.获取div可以移动的页面巨细
3.定时器控制移动,鼠标移入事故制止移动,鼠标移出继承移动。
4.点击事故点击让div消散
5.实现悬浮广告的完备代码

弹性悬浮广告效果图






1.功能(鼠标移入移出事故、点击事故、定时器控制移动)

div实现在页面上移动,并判定碰到页面边框反弹,鼠标移入div制止移动,鼠标移出div举行移动,点击div让它从页面消散,定时器控制它的移动。
2.div初始样式设置

  1.         //div(广告)获取节点
  2.         var div1 = document.getElementById("div1");
  3.         // div(广告)初始的位置
  4.         var offsetx = 0;
  5.         var offsety = 0;
  6.         //div(广告)每次移动的距离
  7.         var stepx = 10;
  8.         var stepy = 10;
  9.         //div(广告)的大小
  10.         div1.style.width="100px"
  11.         div1.style.height="100px"
  12.         //设置定位
  13.         div1.style.position="absolute"
  14.         div1.style.top = offsetx;
  15.         div1.style.left = offsety;
  16.         //广告图片
  17.         div1.style.backgroundImage="url(./img/ggao.webp)"
  18.         div1.style.backgroundSize="cover"
复制代码
2.获取div可以移动的页面巨细

  1.         //网页可视化宽高--div(广告)可以移动的区域
  2.         var seeWidth = document.documentElement.clientWidth;
  3.         var seeHeight = document.documentElement.clientHeight;
  4.         //div(广告)最大可移动的宽度、高度
  5.         var maxLeft = seeWidth -100;
  6.         var maxTop = seeHeight -100;
复制代码
3.定时器控制移动,鼠标移入事故制止移动,鼠标移出继承移动。

  1.        //启动定时器
  2.         var t= setInterval(move,30);
  3.         //鼠标移入清除定时器
  4.         div1.onmouseenter = function(){
  5.             clearInterval(t);
  6.         }
  7.         //鼠标移出恢复
  8.         div1.onmouseleave = function(){
  9.             t = setInterval(move,30);
  10.         }
复制代码
4.点击事故点击让div消散

  1.         //点击事件,点击后消失
  2.         div1.onclick = function(){
  3.             div1.style.display = "none"
  4.         }
复制代码
5.实现悬浮广告的完备代码

[code]  
    <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=maxLeft||offsetx

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作