zoukankan      html  css  js  c++  java
  • 好用的漂浮广告 jquery

    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.js" type="text/javascript" charset="utf-8"></script>
    <div id="imgDiv" style="position:absolute;left:50px;top:43px;z-index: 100;">
    <a href="http://xuanchuanbu.henau.edu.cn/plus/list.php?tid=27" target="_blank"><img src="/templets/default/images/ads2.jpg" border="0" width="345" height="72" /></a>
    </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>
    <script>
    $(".banshitab").mouseover(function(){
    $('.banshitab').removeClass("cur");
    $(this).addClass("cur");
    var likey = $(".banshitab").index(this);

    $('.banshi_box').addClass("hide").removeClass("block");
    $(".banshi_box:eq("+likey+")").addClass("block").removeClass("hide");
    });

    $(".downtab").mouseover(function(){
    $('.downtab').removeClass("cur");
    $(this).addClass("cur");
    var likey = $(".downtab").index(this);

    $('.down_box').addClass("hide").removeClass("block");
    $(".down_box:eq("+likey+")").addClass("block").removeClass("hide");
    });
    </script>

  • 相关阅读:
    jsp九大内置对象和4个域对象
    小甜点
    response编码
    request请求编码处理
    防盗链模拟
    request浏览器判断
    request获取ip
    ServletConfig
    HttpServlet原理
    Servlet,GenericServlet,httpServlet区别
  • 原文地址:https://www.cnblogs.com/snowhite/p/9143986.html
Copyright © 2011-2022 走看看