l2Overlay: 原生 JavaScript 实现 Hoverpop 效果插件

摘自:http://loo2k.com/blog/l2overlay-a-javascript-based-hoverpop-plugin/      特别推荐

 

最近想给自己做的项目加上类似于 Facebook 的 Namecard 效果，即鼠标移动到制定目标后浮现一个信息卡，在鼠标移开目标或者信息卡后则自动隐藏。

搜索了一下好像没有现成的插件可用，找到过几个仿 Facebook Style 的代码片段，但是感觉代码质量比我的还要糟糕，而且也不完全符合自己的要求，所以就花了一个下午的时间，用原生 JavaScript 写了一个类 Facebook Style 的 Namecard （hoverpop）插件。

参看演示效果可以到：l2Overlay 演示

l2Overlay 的 CSS 代码

l2Overlay 的样式主要是模仿 Facebook 的 Namecard，下面是根据我的 l2Overlay 编写的 CSS 样式：

1. .l2OverlayWrapper {
2. font-size:12px;
3. color:#333333;
4. line-height:1.8;
5. background-color:#FFFFFF;
6. border:1px solid #8C8C8C;
7. box-shadow:0010px#C8C8C8;
8. margin:9px0;
9. position: relative;
10. max-width:300px;
11. _width:300px;
12. }
13. .l2OverlayArrow {
14. position: absolute;
15. width:16px;
16. height:9px;
17. background:url("arrow.png") no-repeat -50px0px transparent;
18. }
19. .arrow-lt .l2OverlayArrow {
20. left:15px;
21. top:-9px;
22. }
23. .arrow-rt .l2OverlayArrow {
24. right:15px;
25. top:-9px;
26. }
27. .arrow-lb .l2OverlayArrow {
28. background-position:-17px0;
29. left:15px;
30. bottom:-9px;
31. _bottom:-15px;
32. }
33. .arrow-rb .l2OverlayArrow {
34. background-position:-17px0;
35. right:15px;
36. bottom:-9px;
37. _bottom:-15px;
38. }
39. .l2OverlayContent {
40. margin:10px;
41. }
42. .l2Action {
43. padding:010px;
44. margin:10px-10px-10px;
45. background-color:#F2F2F2;
46. border-top:1px solid #CCCCCC;
47. line-height:34px;
48. height:34px;
49. }
50. .l2Title {
51. border-bottom:1px dotted #CCCCCC;
52. font-size:14px;
53. font-weight: bold;
54. margin:0010px;
55. }

l2Overlay 的 Javascript 代码

Js 代码不压缩只有 9.88 kb，YUI 压缩后只有 4.15 kb，对于不想只为了一个效果而引用一个库的来说，绝对是很好的选择。

1. /**
2. * Plugin Name: l2Overlay
3. * Plugin Author: LOO2K
4. * Plugin Address: http://loo2k.com/blog/l2overlay-a-javascript-based-hoverpop-plugin/
5. * Plugin Edition: 0.1
6. * Last updated: 2012.05.19
7. */
8. function l2Overlay(){
9. this.initialize.apply(this, arguments);
10. }
11.  
12. l2Overlay.prototype ={
13. /*
14. * object 要应用 l2Overlay 的元素 对象或者数组
15. * content 显示内容 'function|html|string|target'
16. * option 选项
17. * option = {
18. * 'title' = 'string', // defalut undefied
19. * 'pos' = 'auto|lt|lb|rt|tb', // default auto
20. * 'cache' = 'true|false' // default false
21. * }
22. */
23. initialize:function(object, content, option){
24. this.id =(newDate()).getTime();
25. this.createElement();
26. var _this =this;
27. this.object = object;
28. this.content = content;
29. this.option ={
30. 'title': option.title ||undefined,
31. 'pos': option.pos ||'auto',
32. 'cache': option.cache ||false
33. };
34. this.hidel2Overlay;
36. this.l2Overlay.onmouseover =function(){
37. _this.cancleHide();
38. }
39. this.l2Overlay.onmouseout =function(){
40. _this.hideOverlay();
41. }
43. if(typeofthis.object ==='object'&&typeofthis.object.length ==='number'){
44. for(var i =0; i <this.object.length; i++){
45. this.addEvent(this.object[i]);
46. }
47. }elseif(typeofthis.object =='object'&&!(this.object instanceof Array)){
48. this.addEvent(this.object);
49. }else{
50. alert('传入对象错误');
51. }
52. },
53. createElement:function(){
54. // 生成基本模版
55. if(!document.getElementById('l2Overlay_'+this.id)){
56. var overlay = document.createElement('div');
57. overlay.id ='l2Overlay_'+this.id;
58. overlay.style.position ='absolute';
59. overlay.style.zIndex ='9999';
60. overlay.style.display ='none';
62. var wrapper = document.createElement('div');
63. wrapper.className ='l2OverlayWrapper';
65. var arrow = document.createElement('div');
66. arrow.className ='l2OverlayArrow';
67.  
68. var content = document.createElement('div');
69. content.className ='l2OverlayContent';
71. wrapper.appendChild(arrow);
72. wrapper.appendChild(content);
73. overlay.appendChild(wrapper);
74. document.getElementsByTagName('body')[0].appendChild(overlay);
75. }
76. this.l2Overlay = document.getElementById('l2Overlay_'+this.id);
77. var wrapper =this.l2Overlay.getElementsByTagName('div')[0].getElementsByTagName('div');
78. this.l2Content = wrapper[1];
79. this.l2Arrow = wrapper[0];
80. },
81. getPos:function(el){
82. var ua = navigator.userAgent.toLowerCase();
83. var isOpera =(ua.indexOf('opera')!=-1);
84. var isIE =(ua.indexOf('msie')!=-1&&!isOpera);
85. if( el.parentNode ===null|| el.style.display =='none'){
86. returnfalse;
87. }
88. var parent =null;
89. var pos =[];
90. var box;
91.  
92. if( el.getBoundingClientRect ){
93. // For IE
94. box = el.getBoundingClientRect();
95. var scrollTop =Math.max(document.documentElement.scrollTop, document.body.scrollTop);
96. var scrollLeft =Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
97. return{
98. x: box.left + scrollLeft,
99. y: box.top + scrollTop
100. };
101. }elseif( document.getBoxObjectFor ){
102. // For FF
103. box = document.getBoxObjectFor(el);
104. var borderLeft =(el.style.borderLeftWidth)? parseInt(el.style.borderLeftWidth):0;
105. var borderTop =(el.style.borderTopWidth)? parseInt(el.style.borderTopWidth):0;
106. pos =[box.x - borderLeft, box.y - borderTop];
107. }else{
108. // For Safari & Opera
109. pos =[el.offsetLeft, el.offsetTop];
110. parent = el.offsetParent;
111. if( parent != el ){
112. while(parent){
113. pos[0]+= parent.offsetLeft;
114. pos[1]+= parent.offsetTop;
115. parent = parent.offsetParent;
116. }
117. }
118. if( ua.indexOf('opera')!=-1||(ua.indexOf('safari')!=-1&& el.style.position =='absolute')){
119. pos[0]-= document.body.offsetLeft;
120. pos[1]-= document.body.offsetTop;
121. }
122. }
124. if( el.parentNode ){
125. parent = el.parentNode;
126. }else{
127. parent =null;
128. }
129. // account for any scrolled ancestors
130. while(parent && parent.tagName !='BODY'&& parent.tagName !='HTML'){
131. pos[0]-= parent.scrollLeft;
132. pos[1]-= parent.scrollTop;
133. if(parent.parentNode){
134. parent = parent.parentNode;
135. }else{
136. parent =null;
137. }
138. }
139. return{
140. x: pos[0],
141. y: pos[1]
142. };
143. },
144. getSize:function(element){
145. if(element.offsetWidth !==0){
146. /* 元素不是display:none的情况，这个时候是能得到尺寸的 */
147. return{
148. 'width': element.offsetWidth,
149. 'height': element.offsetHeight
150. };
151. }
152. var old ={};
153. /* 将display:none元素设成visibility:hidden */
154. var options ={
155. position:"absolute",
156. visibility:"hidden",
157. display:"block"
158. }
160. for(var name in options ){
161. old[ name ]= element.style[ name ];
162. element.style[ name ]= options[ name ];
163. }
164. var temp ={
165. 'width': element.offsetWidth,
166. 'height': element.offsetHeight
167. };
168. for(var name in options ){
169. element.style[ name ]= old[ name ];
170. }
171. return temp;
172. },
173. hideOverlay:function(){
174. var _this =this;
175. this.hidel2Overlay = setTimeout(function(){
176. _this.l2Overlay.style.display ='none';
177. },100);
178. },
179. cancleHide:function(){
180. if(this.hidel2Overlay ){
181. clearTimeout(this.hidel2Overlay);
182. }
183. },
184. getBrowser:function(){
185. var offset ={
186. 'top': document.documentElement.scrollTop || document.body.scrollTop,
187. 'left': document.documentElement.scrollLeft || document.body.scrollLeft
188. }
189. return offset;
190. },
191. addEvent:function(object){
192. var _this =this;
193. //var _object = this.object;
194. var _object = object;
196. _object.onmouseover =function(){
197. _this.cancleHide();
199. // 缓存模块
200. if( _this.option.cache &&this.l2cache ){
201. _this.l2Content.innerHTML =this.l2cache;
202. }elseif(typeof _this.content ==='function'){
203. _this.l2Content.innerHTML = _this.content.apply(this, arguments);;
204. //console.log(_this.content());
205. }else{
206. _this.l2Content.innerHTML = _this.content;
207. }
209. if( _this.option.cache &&!this.l2cache ){
210. this.l2cache = _this.l2Content.innerHTML;
211. }
213. // 定位模块
214. var position = _this.getPos(this);
215. var curTop = position.y;
216. var curLeft = position.x;
217. var offset = _this.getSize(_this.l2Overlay);
218. var self = _this.getSize(this);
219. var browser = _this.getBrowser();
221. var pos ='';
222. if( _this.option.pos ==='auto'){
223. if((curLeft - browser.left - offset.width)>0){
224. pos +='r';
225. }else{
226. pos +='l';
227. }
229. if((curTop - browser.top - offset.height)>0){
230. pos +='b';
231. }else{
232. pos +='t';
233. }
234. }else{
235. pos = _this.option.pos;
236. }
237. switch(pos){
238. case'lt':
239. _this.l2Overlay.className ='arrow-lt';
240. oTop = curTop + self.height;
241. oLeft = curLeft;
242. break;
243. case'rt':
244. _this.l2Overlay.className ='arrow-rt';
245. oTop = curTop + self.height;
246. oLeft = curLeft - offset.width + self.width;
247. break;
248. case'rb':
249. _this.l2Overlay.className ='arrow-rb';
250. oTop = curTop - offset.height;
251. oLeft = curLeft - offset.width + self.width;
252. break;
253. case'lb':
254. default:
255. _this.l2Overlay.className ='arrow-lb';
256. oTop = curTop - offset.height;
257. oLeft = curLeft;
258. break;
259. }
261. _this.l2Overlay.style.top = oTop +'px';
262. _this.l2Overlay.style.left = oLeft +'px';
263. _this.l2Overlay.style.display ='';
265. }
267. _object.onmouseout =function(){
268. _this.hideOverlay();
269. }
270. }
271. }

l2Overlay 的使用方法

l2Overlay 创建了一个函数对象 l2Overlay，接受三个参数。分别为：

1. object: 传入的必须是 HTML 元素，或者是 HTML 元素数组；
2. content： 显示内容，可以是函数，HTML 代码，或者字符串，作用域为 object；
3. option： option 对象可以设置 l2Overlay 显示的位置以及是否启用缓存；

1. var applyLinks = document.getElementById('demo').getElementsByTagName('a');
2. var content =function(){
3. var html ='<div class="l2Title">这是一个标题</div>';
4. html +='Function 内的作用域为该链接，如执行 this.href 可以得到该链接的地址：';
5. html +=this.href;
6. html +='<div class="l2Action"><a href="#">添加</a> | <a href="#">修改</a> | <a href="#">删除</a></div>';
8. return html;
9. }
10. var options ={'pos':'','cache':true};
11. new l2Overlay(applyLinks, content, options);

参看演示效果可以到：l2Overlay 演示

下载插件可以到：l2Overlay 下载

小总结

第一次写 JavaScript 插件，功夫不到家，代码仅供参考 :P

其实这个用 jQuery 等库实现会简单很多，而且代码行数也会少很多，但是为了熟悉原生的 JavaScript 还是自己动手写了一遍。