jquery 漂浮图片广告代码


(function($) {
    $.fn.floatAd = function(options) {
        var defaults = {
            imgSrc:"",
            url:"",
            openStyle: 1,
            speed: 30
        };
        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.url + "' " + _target + "><img src='" + options.imgSrc + "' border='0' class='float_ad_img'/></a>";
        html += "<div id='close_f_ad' style='position:absolute;width:14px;height:14px;top:0px;right:0px;cursor:pointer;float:right;font-size:14px;color:#FFF'>×</div></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) {
                        xin = false;
                        x = DW - OW - 1;
                    }
                    y = y + step * (yin ? 1 : -1);
                    if (y > DH - OH - 10) {
                        yin = false;
                        y = DH - OH - 10;
                    }
                    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)
                })
            })
        }
        init();
$('#close_f_ad').click(function(){
                    $('#float_ad').css('display','none');
clearInterval(itl);
                });
    }
})(jQuery);


$(document).ready(function() {
    $(function() {
        $("body").floatAd({
            imgSrc:'图片.jpg',
            url: '链接地址'
        });
    })
});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值