JQuery广告（新闻）浮动（漂浮）框

1、效果图如下：

2、代码如下：

<!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>

JQuery广告（新闻）浮动（漂浮）框相关推荐

php 获取下拉框选中的文本,jQuery实现select下拉框获取当前选中的文本
本文主要介绍了jQuery实现select下拉框获取当前选中文本.值.索引以及添加/删除Select的Option项的相关知识,具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 话不多 ...
jquery ajax下拉联动,jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List TeamLeaderList = FinanceD ...
jQuery如果选中复选框
本文翻译自:jQuery if checkbox is checked I have a function below that I want to only trigger when a check ...
获取jQuery中的复选框值
如何在jQuery中获取复选框的值? #1楼尝试这个小解决方案: $("#some_id").attr("checked") ? 1 : 0; 要么 $(&q ...
java下拉框查询_[Java教程]jQuery实现联动下拉列表查询框
[Java教程]jQuery实现联动下拉列表查询框 0 2015-12-07 18:00:04 厂商:请选择品牌:请选择型号:请选择效果如下: 本文网址:http://www.shaoqun.c ...
html css 多选下拉框,jQuery多选下拉框插件
jquery.multi-select.js是一款jQuery多选下拉框插件.该插件可以将select元素转换为带checkbox的多选下拉框,非常实用. 使用方法在页面中引入下面的文件. lt;l ...
点击输入框弹出文字html,jQuery实现点击文本框弹出热门标签的提示效果
jQuery实现点击文本框弹出热门标签的提示示例_网页代码站 body { font-size:12px;font-family:Arial; } #m_tagsItem { background:# ...
【jquery】select下拉框赋值
前言 jquery操作select下拉框 select <select id="type" name="type"><option value ...
JavaScript jQuery获取radio/下拉框的选中值
JavaScript获取radio选中值 <ww:iterator value="proceList" status="rowstatus" id=&qu ...
jquery ajax下拉联动,基于jQuery Ajax实现下拉框无刷新联动
本文实例为大家分享了jQuery Ajax实现下拉框无刷新联动的具体代码,供大家参考,具体内容如下 HTML代码: @{ Layout = null; } @using DAL; @using Sys ...

JQuery广告（新闻）浮动（漂浮）框

1、效果图如下：

2、代码如下：

JQuery广告（新闻）浮动（漂浮）框相关推荐

最新文章

热门文章