jquery漂浮广告代码

来源：互联网发布：js代码高亮插件编辑：程序博客网时间：2024/05/17 09:21

jquery漂浮广告代码有好多种实现方式，本文介绍的这种方法应该算得上是简单、实用、逻辑清晰的方法了。

<!doctype html><html><head><meta charset="utf-8"><title>jquery漂浮广告代码</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><style></style></head><body><div id="imgDiv" style="position:absolute;left:50px;top:60px;">    <div id="a" style="width:20px;height:20px;position:absolute;left:160px;background:salmon;text-align: center;">×</div>    <!-- <img src="01.jpg" border="0" /> -->    <div style="width:180px;height:180px;background:red;"></div></div><script>var xin = true,    yin = true;var step = 1;var delay = 10;var $obj;$(function() {    $obj = $("#imgDiv");    var time = window.setInterval("move()", delay);    $obj.mouseover(function() {        clearInterval(time)    });    $obj.mouseout(function() {        time = window.setInterval("move()", delay)    });});function move() {    var left = $obj.offset().left;    var top = $obj.offset().top;    var L = T = 0; //左边界和顶部边界    var R = $(window).width() - $obj.width(); // 右边界    var B = $(window).height() - $obj.height(); //下边界    //难点:怎样判断广告的4个边框有没有超出可视化范围!    if (left < L) {        xin = true; // 水平向右移动    }    if (left > R) {        xin = false;    }    if (top < T) {        yin = true;    }    if (top > B) {        yin = false;    }    //根据有没有超出范围来确定广告的移动方向    left += step * (xin == true ? 1 : -1);    top  += step * (yin == true ? 1 : -1);    // 给div 元素重新定位    $obj.offset({        top: top,        left: left    })}    //关闭$(function() {    $("#a").click(function() {        var b = $("#a").parent();        $(b).remove();    })})</script></body></html>

阅读全文

0 0