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 还是自己动手写了一遍。
  • 相关阅读:
    linux软件安装方式
    docker 安装 jenkins touch: cannot touch ‘/var/jenkins_home/copy_reference_file.log’: Permission denied Can not write to /var/jenkins_home/copy_reference_file.log. Wrong volume permissions?
    [ERR] Node goodsleep.vip:6379 is not empty. Either the node already knows other nodes (check with CLUSTER NODES) or contains some key in database 0.
    Linux 常用命令 服务器间scp 用户 export 创建文件、软连接
    redis 安装 集群 主从 哨兵 docker
    WPF密码框中禁止复制、粘贴
    Application 统计在线人数
    【转义字符】HTML 字符实体&lt; &gt: &amp;等
    SQL语句统计每天的数据
    正则表达式计算代码数
  • 原文地址：https://www.cnblogs.com/anyuqi/p/2726288.html
Copyright © 2011-2022 走看看