zoukankan      html  css  js  c++  java

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

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

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

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

    l2Overlay

    参看演示效果可以到：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 还是自己动手写了一遍。
  • 相关阅读:
    Magento 安装时文件权限 设置
    进度十（10.28）
    进度九（10.27）
    进度八（10.26）
    进度六（10.24）
    进度五（10.23）
    进度四（10.22）
    进度三（10.21）
    进度二（10.20）
    进度一（10.19）
  • 原文地址：https://www.cnblogs.com/anyuqi/p/2726288.html
Copyright © 2011-2022 走看看