DDjs步步为营:JavaScript查看大图效果[DDbox]

 

 

时常看到一种js效果,点击网页上一个图片,背景变灰,前景出现一个图片框,框里显示被点击图片的大图。著名的实现有lightbox和thickbox。

 

以前看到这种效果觉得很酷,现在自己也来简单实现一个(就叫DDbox哈哈)。

 

第一步:设计

 

页面标记

 

首先要考虑的是在页面文档中要怎么标记这样一个位置:当你点击该位置的时候会出现上文所述效果。

 

考虑到当JavaScript被禁用时,仍能确保一定的用户体验,我们使用带有href属性的a标签。当JavaScript被允许的时候,点击该标签可以展示我们的动画,并且阻止跳转。当JavaScript被禁用的时候,我们通过<a>标签的链接地址转到图片所在位置。

 

这里我们会考虑到图片可能需要一些注释。注释的获取考虑借用属性rel(之前考虑过用自定义的属性字段,但是发现除了IE之外其他浏览器都读不出这些自定义的属性字段),我们把注释相关语句的字符串在页面中写入到rel属性中去。

 

是了,不要忘了,我们还要标记怎样的一个<a>标签才是我们要实现效果的一个位置,加上class属性 class="DDbox"。

 

图片效果

 

接下来设计一下这样的<a>标签被点击时,想要达到的效果。

 

设计大致流程如下:点击class为DDbox的<a>标签

- > 出现灰色覆盖层

- > 图片框在页面中间位置以适宜的大小纵向展开,接着图片渐现(这里暂不考虑图片载入时未能显示的问题)

- > 图片框最终展开,图片框上部是图片,下部是图片注释

- > 鼠标点击覆盖层

- > 图片框与覆盖层同时渐隐消失

 

页面元素

 

根据上面的需求设计页面元素如下,这个比较简单,就不多说了。

 

Code

 

CSS

 

样式表简单设计如下:

 

Code

 

 

使用IE6.0的朋友请注意,这里演示效果的js代码没有考虑IE6.0的兼容性,IE6.0中覆盖层将滑到页面最底部,关闭图片框请到页面底部点击灰色覆盖层。

有时间我再改好,不好意思……

 

第二步:准备工具

 

根据第一步设计的页面标记与图片效果,我们需要准备一些工具,实现以下功能:

 

1. 在文档中获取class属性为"DDbox"标签为<a>的元素,我们可以调用之前介绍过的一个函数hasClass;

2. 阻止默认事件(本例中为页面跳转)的函数,这一个在之前也介绍过stopDefault函数;

3. 元素渐现函数和渐隐函数,我们将其取名为fade,待会会尝试去实现;

4. 考虑到浏览器兼容问题,我们需要封装一个setOpacity函数来设置元素的透明度,用于实现渐隐渐现;

5. 元素展开函数,这个用之前发布过的natrualSlide可以实现,不过这里我们还是重新写一个比较简单的slide函数;

6. 当然不要忘了很重要的一点,如何去实现图片框的适宜大小以及居中定位,这里可能会比较复杂。我们要设计一个函数,通过传入元素长和宽来定位居中位置。

 

暂时想到这些,接下来一个一个实现

 

hasClass函数

Code

 

这里考虑到一个class属性中可能写入多个class style,所以用正则表达式进行检测而不是直接判断相等。

 

stopDefault函数

Code

 

由于ie和其他浏览器的兼容问题,这里必须使用两种方式来阻止默认事件。

  

setOpacity函数

Code

 

第一个分支是处理ie的元素透明度设置,第二个分支是处理其他浏览器的元素透明度设置。

 

这里顺便提醒一下,在ie中要使alpha滤镜起作用,必须搭配position:absolute样式设置,否则透明设置可能不起作用。

 

fade函数

Code

 

slide函数

Code

 

一系列获取当前页面或窗口相关长宽和位置的并具有兼容性的函数

Code

 

getCenterPos函数:通过传入长宽值获取中心位置的left和top值

Code

  

第三步:代码实现

 

工具都准备得差不多了,开始进入主体编码阶段,首先要创建我们需要的html结构(前文提到的页面元素),并将其添加到body元素的末尾。

 

createBox函数

 

Code

 

 

接着获取所有的class为DDbox的<a>标签绑定onclick响应函数。

Code

 

其中指定标签click事件的响应函数showDDbox如下:

Code

 

可能有些冗长呵呵,没有仔细推敲。

 

另外还要为覆盖层的单击事件绑定一个关闭图片框的函数,这里就简单隐藏掉图片框和覆盖层,不加什么动画效果了。

Code

 

第四步:整理打包

 

DDbox.css

 

#DDoverlay  {
    display
:  none  ;
    position 
:  fixed  ;  top  :  0px  ;  left  :  0px  ;
    height 
:  100%  ;  width  :  100%  ;
    background-color 
:  #000  ;  z-index  :  2000  ;  
    filter 
:  alpha(opacity=60)  ;  opacity  :  0.6  ;
}
#DDimgBox 
{
    display 
:  none  ;
    position 
:  absolute  ;  
    border 
:  3px solid #000  ;
    background-color 
:  #EEE  ;
    padding 
:  8px  ;  z-index  :  2100  ;
    overflow 
:  hidden  ;  font-size : 12px ;
}
#DDimgBox .imgFrame 
{
    display 
:  block  ;
    border 
:  1px solid #333  ;
    background-color
:  #DDD  ;
}
#DDimgBox .imgNote 
{
    display 
:  block  ;  padding  :  10px  ;
    text-align 
:  center  ;  color  :  #333  ;
    height 
:  auto  ;
}

 

DDutil.js

 

Code

 

DDbox.js

 

addEvent(window,  ' load ' , runDDbox);

function  runDDbox() {
    createBox();
    
var  ol  =  document.getElementById( ' DDoverlay ' );
    
var  box  =  document.getElementById( ' DDimgBox ' );
    
var  im  =  pb.getElementsByTagName( ' img ' )[ 0 ];
    
var  note  =  pb.getElementsByTagName( ' div ' )[ 1 ];
    
var  mg  =   50 ;
    
    
var  elems  =  hasClass( ' DDbox ' ' a ' );
    
for  ( var  i  =   0 ; i  <  elems.length; i ++ ) {
        elems[i].onclick 
=  showDDbox;
    }
    
    
function  showDDbox(e) {
        which 
=   this ;    // 习惯性做法,这样可以避免this在函数闭包里面的误用
        
        
//  初始化box里面的一系列元素
        box.style.width  =   ' auto ' ;
        box.style.height 
=   ' auto ' ;
        note.innerHTML 
=  which.rel;
        im.style.height 
=   ' auto ' ;
        im.style.height 
=   ' auto ' ;
        im.src 
=  which.href;
        im.alt 
=  which.rel;
        setOpacity(im, 
0 );
        
        im.onerror 
=   function () {
            alert(
' 图片载入失败! ' );
        }
        
        im.onload 
=   function () {
            ol.style.display 
=   ' block ' ;
            box.style.visibility 
=   ' hidden ' ;
            setOpacity(box, 
100 );
            box.style.display 
=   ' block ' ;
            
            
// 自适应调整图片长宽
             var  boxX  =  box.clientWidth  +  mg  *   2 ;
            
if  ( boxX  >  windowWidth()) {
                im.style.width 
=  (windowWidth()  -   20   -  mg  *   2 +   ' px ' ;
                im.style.height 
=   ' auto ' ;
            }
            
var  boxY  =  box.clientHeight  +  mg  *   2 ;
            
if ( boxY  >  windowHeight()) {
                im.style.height 
=  (windowHeight()  -   60   -  mg  *   2 +   ' px ' ;
                im.style.width 
=   ' auto ' ;
            }
            
            
// 获取并设置居中位置
             var  pos  =  getCenterPos(box.clientWidth, box.clientHeight);
            box.style.left 
=  pos[ 0 +   ' px ' ;
            box.style.top 
=  pos[ 1 +   ' px ' ;
            
            
//  图片框展开同时渐显
             var  boxHeight  =  box.clientHeight - 15 ;
            box.style.height 
=   ' 0px ' ;
            box.style.visibility 
=   ' visible ' ;
            slide(box, 
' height ' 0 , boxHeight,  800 );
            fade(im, 
0 100 900 );
        };
        
//  阻止默认事件响应函数,即页面跳转
         return   false ;
    }
    
    ol.onclick 
=   function () {
        
// 图片框向上浮动同时渐隐
        slide(box,  ' top ' , parseInt(box.style.top), scrollY(),  300 );
        fade(box, 
100 0 250 );
        ol.style.display 
=   ' none ' ;
        setTimeout(
function () {
            box.style.display 
=   ' none ' ;
        }, 
250 );
    }
    
    
function  createBox() {
        
//  创建覆盖层DDoverlay
        ol  =  document.createElement( ' div ' );
        ol.id 
=   ' DDoverlay ' ;
        
        
//  创建图片框DDimgBox
        pb  =  document.createElement( ' div ' );
        pb.id 
=   ' DDimgBox ' ;
        pb.innerHTML 
=   ' <div class="imgFrame"><img src="" alt="" /></div><div class="imgNote"></div> ' ;
        
        
//  在body元素内部末尾绑定覆盖层和图片框
        document.body.appendChild(ol);
        document.body.appendChild(pb);
    }
    
}

 

 

 

你可能感兴趣的:(JavaScript)