您的位置:首页 > Web前端 > JQuery

jquery 漂浮图片广告代码

2015-10-09 17:33 806 查看
(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: '链接地址'

        });

    })

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: