JS+CSS 实现悬停广告

最新推荐文章于 2022-04-09 17:59:58 发布

geekzsp

最新推荐文章于 2022-04-09 17:59:58 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签： css 广告移动 javascript

本文链接：https://blog.csdn.net/mixi9760/article/details/52052760

版权

前端专栏收录该内容

25 篇文章 2 订阅

订阅专栏

效果图

这里写图片描述

第一种

在onscroll方法中调用move方法
move方法中直接设置广告top为body卷曲的高度
缺点：没有缓慢移动的效果


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动的小广告</title>
</head>
<body onscroll="move()">
<textarea rows="500" cols="500">sfewr</textarea>
<div id="xgg" style="position: absolute;left: 0px;top: 0;">
    <img src="images/123.jpg" alt="">
</div>

<script>
    function  move(){
        var xgg=document.getElementById("xgg");
        xgg.style.top=document.body.scrollTop;
         }
</script>
</body>
</html>

第二种

有平滑移动的效果
原理:设置定时器每次设置top为一定高度多次设置后达到卷曲的高度

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>悬浮平滑移动的小广告</title>
</head>
<body>
<textarea cols="500" rows="500">
     我的目的是为了出来滚动条 好实现scroll
 </textarea>
<div id="test" style="position: absolute;left: 0;top:50px">
    <img src="images/123.jpg" alt="" >
</div>
<script>
    var ScrollYLength=0;//body滚动的距离
    var lastScrollyLength=0;//div已经滚动的距离
    var percent=0;//百分比 一次移动多少百分比
    function  move() {
        ScrollYLength=document.body.scrollTop;
        percent=(ScrollYLength-lastScrollyLength)*0.1;
        percent=Math.ceil(percent);
        document.getElementById("test").style.top=parseInt(document.getElementById("test").style.top)+percent+"px";
        lastScrollyLength+=percent;
    }
    setInterval(move,10);

</script>
</body>

封装

function  Xgg(node){
        this.node=node;
        var that=this;
        var ScrollYLength=0;//body滚动的距离
        var lastScrollyLength=0;//div已经滚动的距离
        var percent=0;//百分比 一次移动多少百分比
        this.move=function(){
            setInterval(function(){
                ScrollYLength=document.body.scrollTop;
                percent=(ScrollYLength-lastScrollyLength)*0.1;
                percent=Math.ceil(percent);
                 that.node.style.top=parseInt(that.node.style.top)+percent+"px";
                lastScrollyLength+=percent;
            },10)
        }
    }

   var xgg=new Xgg(document.getElementById("test"));
    xgg.move();