您正在使用IPV4(3.92.28.52)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情       【腾讯云】爆款1核2G云服务器首年48元,还有iPad Pro、Bose耳机、京东卡等你来抽!      
虚位以待
2021年 冬至节 20
2021年 圣诞节 24
2022年 元 旦 31
2022年 春 节 62
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    JavaScript实现跟随广告的示例代码
    内容摘要: 浮动广告是目前网站很常见的一种广告形式,浮动广告能实时跟随用户的浏览,有效的传达产品要表达的意思,达到很好的传播效果。那么浮动广告是怎么实现的呢,其实实现浮动广告并不难,具体如下:*{margin:0;padding:0;}img{position:absolute;left:0;}p{text-align:center;line-height:40px;}......
    浮动广告是目前网站很常见的一种广告形式,浮动广告能实时跟随用户的浏览,有效的传达产品要表达的意思,达到很好的传播效果。那么浮动广告是怎么实现的呢,其实实现浮动广告并不难,具体如下:

    *{

    margin:0;

    padding:0;

    }

    img{

    position:absolute;

    left:0;

    }

    p{

    text-align:center;

    line-height:40px;

    }

    <imgsrc="images/left_ad.png"alt="">

    <p>我是正文1</p>

    <p>我是正文2</p>

    <p>我是正文3</p>

    <p>我是正文4</p>

    <p>我是正文5</p>

    <p>我是正文6</p>

    <p>我是正文7</p>

    <p>我是正文8</p>

    <p>我是正文9</p>

    <p>我是正文10</p>

    <p>我是正文11</p>

    <p>我是正文12</p>

    <p>我是正文13</p>

    <p>我是正文14</p>

    <p>我是正文15</p>

    <p>我是正文16</p>

    <p>我是正文17</p>

    <p>我是正文18</p>

    <p>我是正文19</p>

    <p>我是正文20</p>

    <p>我是正文21</p>

    <p>我是正文22</p>

    <p>我是正文23</p>

    <p>我是正文24</p>

    <p>我是正文25</p>

    <p>我是正文26</p>

    <p>我是正文27</p>

    <p>我是正文28</p>

    <p>我是正文29</p>

    <p>我是正文30</p>

    <p>我是正文31</p>

    <p>我是正文32</p>

    <p>我是正文33</p>

    <p>我是正文34</p>

    <p>我是正文35</p>

    <p>我是正文36</p>

    <p>我是正文37</p>

    <p>我是正文38</p>

    <p>我是正文39</p>

    <p>我是正文40</p>

    <p>我是正文41</p>

    <p>我是正文42</p>

    <p>我是正文43</p>

    <p>我是正文44</p>

    <p>我是正文45</p>

    <p>我是正文46</p>

    <p>我是正文47</p>

    <p>我是正文48</p>

    <p>我是正文49</p>

    <p>我是正文50</p>

    //1.拿到需要操作的元素

    constoAdImg=document.querySelector("img");

    //2.计算广告图片top的值=(视口高度-广告高度)/2

    constscreenHeight=getScreen().height;

    constimgHeight=oAdImg.offsetHeight;

    constoffsetY=(screenHeight-imgHeight)/2;

    //console.log(offsetY);

    //3.将计算之后的top值,设置给广告图片

    //oAdImg.style.top=offsetY+'px';

    easeAnimation(oAdImg,{

    "top":offsetY

    });

    //4.监听网页的滚动事件

    window.onscroll=function(){

    //获取到网页滚动的距离

    //广告图片top的值+网页滚动的距离

    letpageOffsetY=getPageScroll().y;

    easeAnimation(oAdImg,{

    "top":offsetY+pageOffsetY

    });

    };

    //浏览器视口宽高

    functiongetScreen(){

    letwidth,height;

    if(window.innerWidth){

    width=window.innerWidth;

    height=window.innerHeight;

    }elseif(document.compatMode==="BackCompat"){

    width=document.body.clientWidth;

    height=document.body.clientHeight;

    }else{

    width=document.documentElement.clientWidth;

    height=document.documentElement.clientHeight;

    }

    return{

    width:width,

    height:height

    }

    }

    //缓动动画

    functioneaseAnimation(ele,obj,fn){

    clearInterval(ele.timerId);

    ele.timerId=setInterval(function(){

    //flag变量用于标记是否所有的属性都执行完了动画

    letflag=true;

    for(letkeyinobj){

    lettarget=obj[key];

    //1.拿到元素当前的位置

    letstyle=getComputedStyle(ele);

    letbegin=parseInt(style[key])||0;

    //2.定义变量记录步长

    //公式:(结束位置-开始位置)*缓动系数(0~1)

    letstep=(target-begin)*0.3;

    //3.计算新的位置

    begin+=step;

    if(Math.abs(Math.floor(step))>1){

    flag=false;

    }else{

    begin=target;

    }

    //4.重新设置元素的位置

    ele.style[key]=begin+"px";

    }

    //判断动画是否执行完

    if(flag){

    //动画执行完后关闭定时器

    clearInterval(ele.timerId);

    //判断是否传入fn函数,有才执行反之不执行

    fn&&fn();

    }

    },100);

    }

    //网页滚动距离

    functiongetPageScroll(){

    letx,y;

    if(window.pageXOffset){

    x=window.pageXOffset;

    y=window.pageYOffset;

    }elseif(document.compatMode==="BackCompat"){

    x=document.body.scrollLeft;

    y=document.body.scrollTop;

    }else{

    x=document.documentElement.scrollLeft;

    y=document.documentElement.scrollTop;

    }

    return{

    x:x,

    y:y

    }

    }

    上一篇:jquery判断密码强度的验证代码 下一篇:通过javascript获取iframe里的值示例代
    发布日期:2021/11/8
    手机扫二维码直达本页
    发布时间:16:29:33
    点击:238
    录入:壹家怡园
    相关文章
    Baidu
    YiJiaCMS 6.0.9.10888 Build 21.11.30(MSSQL) 闽ICP备05000814号-1
    本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
    ©2000-2021