Jquery 飘窗

 1 <script type="text/javascript" src="jquery.js"></script>
 2 <script type="text/javascript">
 3 (function($) {
 4     $.fn.floatAd = function(options) {
 5         var defaults = {
 6             imgSrc:"",
 7             url:"",
 8             openStyle: 1,
 9             speed: 30
10         };
11         var options = $.extend(defaults, options);
12         var _target = options.openStyle == 1 ? "target=‘_blank‘": ‘‘;
13         var html = "<div id=‘float_ad‘ style=‘position:absolute;left:0px;top:0px;z-index:1000000;cleat:both;‘>";
14         html += "  <a href=‘" + options.url + "‘ " + _target + "><img src=‘" + options.imgSrc + "‘ border=‘0‘ class=‘float_ad_img‘/></a>";
15         html += "<div id=‘close_f_ad‘ style=‘position:absolute;width:30px;height:16px;top:-18px;right:0px;cursor:pointer;float:right;font-size:14px‘>关闭</div></div>";
16         $(‘body‘).append(html);
17         function init() {
18             var x = 0,
19             y = 0;
20             var xin = true,
21             yin = true;
22             var step = 1;
23             var delay = 10;
24             var obj = $("#float_ad");
25             obj.find(‘img.float_ad_img‘).load(function() {
26                 var float = function() {
27                     var L = T = 0;
28                     var OW = obj.width();
29                     var OH = obj.height();
30                     var DW = $(document).width();
31                     var DH = $(document).height();
32                     x = x + step * (xin ? 1 : -1);
33                     if (x < L) {
34                         xin = true;
35                         x = L;
36                     }
37                     if (x > DW - OW - 1) {
38                         xin = false;
39                         x = DW - OW - 1;
40                     }
41                     y = y + step * (yin ? 1 : -1);
42                     if (y > DH - OH - 10) {
43                         yin = false;
44                         y = DH - OH - 10;
45                     }
46                     if (y < T) {
47                         yin = true;
48                         y = T;
49                     }
50                     var left = x;
51                     var top = y;
52                     obj.css({
53                         ‘top‘: top,
54                         ‘left‘: left
55                     })
56                 };
57                 var itl = setInterval(float, options.speed);
58                 $(‘#float_ad‘).mouseover(function() {
59                     clearInterval(itl)
60                 });
61                 $(‘#float_ad‘).mouseout(function() {
62                     itl = setInterval(float, options.speed)
63                 })
64             })
65         }
66         init();
67         $(‘#close_f_ad‘).click(function(){
68                     $(‘#float_ad‘).css(‘display‘,‘none‘);
69                     clearInterval(itl);
70                 });
71     }
72 })(jQuery);
73
74 $(document).ready(function() {
75     $(function() {
76         $("body").floatAd({
77             imgSrc: ‘http://www.customs.gov.cn/Portals/114/images/zxftyg2014010601.jpg‘,
78             url: ‘http://www.customs.gov.cn/tabid/66651/Default.aspx‘
79         });
80     })
81 });
82 </script>

Jquery 飘窗

时间: 2025-01-02 15:38:19

Jquery 飘窗的相关文章

js控制下的飘窗

今天有学员反映说昨天去面试,有个考官问他会写飘窗吗?在反复的斟酌之后,她回答了不会.然后考官问她,有没有什么思路?她竟然说老师没教过!!! 到底还是小女生,其实考官的目的很明显,他的目的是想知道你的思考能力和解决问题的思路,毕竟不可能面试到的所有问题你都是接触过或研究过的. 最后重点说下,这个飘窗,小寻哥是真的教过,只不过当时觉得太简单,所以一笔带过,想不到啊,想不到啊... 早上一生气,特意带全班同学重新写了一遍,顺便贴上这处代码,其实很简单,重点的是思路,思路啊! <!DOCTYPE HTM

基于jquery开发的UI框架整理分析

根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据jQuery研发出来的产品,现在也很常见了. 国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.设计目标是简单实用,快速开发,降低ajax开发成本. jQuery 部件布局

微信生成二维码 只需一个网址即刻 还有jquery生成二维码

<div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text=http://123.net/index.php?s=/Home/Index/yanzheng/mai/{$dange.id}" style="width: 5rem; margin-bottom: 1rem;" > </div> http://qr.tops

Jquery基础总结

jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置. 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1. <ul> <li id=&quo

初识jQuery

jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:

zepto与jquery冲突的解决

问题出现的背景: 在light7框架下搭建的触屏版项目中,要拓展一个投票系统,其中投票系统有一个比较完善的上传组件,但是此组件是依赖zepto的,而原来的项目是依赖jQuery的,所以就会遇到冲突的问题: 解决方法1: jquery有一个方法叫noConflict() ,可以把jquery的$改掉. var jq=$.noConflict(); 这个时候用jq来代替jquery的$吧. 解决方法2: zepto的符号改掉 window.zp=window.Zepto = Zepto 在zepto

jQuery父级以及同级元素查找的实例

父级以及同级元素的查找在使用过程中还是蛮频繁的,下面为大家介绍下jQuery是如何实现的,感兴趣的朋友可以参考下 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(

jQuery EasyUI---DataGrid

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DataGrid</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="../jquery-1.4.2.min.js" ty

jQuery学习(五)——使用JQ完成复选框的全选和全不选

1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框的选中状态设置成跟上面的一致! 2.具体代码实现: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成复选框的全选和全不