使用AdMove.js制作全屏随机漂浮广告效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

文章内容

AdMove.js可以实现全屏飘窗效果,即移动广告框。它的内容可以是图片也可以是文字视频等等div可以包含得元素，AdMove.js使用非常简单几行代码就可以实现飘窗效果，代码如下：

关键代码

<!DOCTYPE html >
<html>
<head> 
    <script src="jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="AdMove.js" type="text/javascript"></script>  
</head>
<body>
    <div id="ad" style="z-index: 999">
        <!--漂浮开始-->
        <a id="close" class="close" href="javascript:void(0);" style="position: absolute;
            right: 10px; top: 10px;">
            <img src="images/close.png" alt="">
        </a><a href="#">
            <img src="images/1.jpg">
        </a>
        <!--漂浮结束-->
    </div>
    <script>
        $(function () {

            var ad = new AdMove("ad");
            ad.Run();

            //绑定关闭按钮事件
            $("#close").click(function () {
                var ad = $("#ad");
                ad.hide();
                //多组漂浮
            });

        });

    </script>
</body>
</html>

在AdMove.js中，ad.Run()来启动广告飘窗的显示和运动。ad.hide()函数是用来隐藏广告或公告的。通过调用这个函数，开发者可以控制广告的显示与隐藏