浮动广告基于jQuery

最新推荐文章于 2021-06-09 11:38:31 发布

ianyours

最新推荐文章于 2021-06-09 11:38:31 发布

阅读量492

点赞数

文章标签： jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>跟随广告实例</title>
    <script src="/com/js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        (function ($) {
            $.fn.floatAd = function (options) {
                var defaults = {
                    imgSrc: "http://www.xed2k.com/static/image/common/logo.png", //漂浮图片路径
                    url: "http://www.xed2k.com/", //图片点击跳转页
                    openStyle: 1, //跳转页打开方式 1为新页面打开  0为当前页打开
                    speed: 10 //漂浮速度 单位毫秒
                };
                var options = $.extend(defaults, options);
                var _target = options.openStyle == 1 ? "target='_blank'" : '';
                var html = "<div id='float_ad' style='position:absolute;left:0px;top:0px;z-index:1000000;cleat:both;'>";
                html += "  <a href='" + options.imgJumpToUrl + "' " + _target + "><img src='" + options.imgSrc + "' border='0' class='float_ad_img'/></a> <a href='javascript:;' id='close_float_ad' style=''>x</a>";
                html += "</div>";

                $('body').append(html);

                function init() {
                    var x = 0, y = 0
                    var xin = true, yin = true
                    var step = 1
                    var delay = 10
                    var obj = $("#float_ad")
                    obj.find('img.float_ad_img').load(function () {
                        var float = function () {
                            var L = T = 0;
                            var OW = obj.width();//当前广告的宽
                            var OH = obj.height();//高
                            var DW = $(document).width(); //浏览器窗口的宽
                            var DH = $(document).height();

                            x = x + step * (xin ? 1 : -1);
                            if (x < L) {
                                xin = true; x = L
                            }
                            if (x > DW - OW - 1) {//-1为了ie
                                xin = false; x = DW - OW - 1
                            }

                            y = y + step * (yin ? 1 : -1);
                            if (y > DH - OH - 1) {

                                yin = false; y = DH - OH - 1;
                            }
                            if (y < T) {
                                yin = true; y = T
                            }

                            var left = x;
                            var top = y;

                            obj.css({ 'top': top, 'left': left });
                        }
                        var itl = setInterval(float, options.speed);
                        $('#float_ad').mouseover(function () { clearInterval(itl) });
                        $('#float_ad').mouseout(function () { itl = setInterval(float, options.speed) })
                    });
                    // 点击关闭
                    $('#close_float_ad').live('click', function () {
                        $('#float_ad').hide();
                    });
                }

                init();

            }; //floatAd

        })(jQuery);
    </script>
    
    <script type="text/javascript">
        $(function () {
            //调用漂浮插件
            $("body").floatAd({
                imgSrc: 'http://www.xed2k.com/static/image/common/logo.png',
                url: 'http://www.xed2k.com/'
            });
        })
    </script>
</head>
<body>
    Demo
</body>
</html>

ianyours

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
浮动广告基于jQuery

跟随广告实例 (function ($) { $.fn.floatAd = function (options) { var defaults = { imgSrc: "http://www.xed2k.com/static/image/common/logo.png
复制链接

扫一扫