图形控件实行了眨眼之间间改动,把前边在JavaScript水墨画馆的案例应用在那

www.ca88.com

修正的 lightbox 版本是 2.04 版。 上边是选择大家在选择 lightbox
来显示图片时的为主设置: 复制代码
代码如下: content
首固然给连接加了一个 rel=”lightbox” 属性 以地点的试设置好连接时,
当点击此三回九转,lightbox 将会显得三翻五次上的图样,并利用连接的 title
属性作为图片的验证,假使要为图片增多详细的图片表达,并为图片的印证设置有个别格式,如字体的高低、颜色等,那么使用
title 那特本性来设置那几个注解音讯是不能贯彻的。
由于顾客自然要此意义,所以只能去查看 lightbox
的源代码,检查是或不是能够对其进展更换,以满意那些须求,幸运的是 lightbox
主要的代码量不是比非常大,并且可以对其张开一个纤维校勘,就可以满意那一个须求,主借使对
prototype.js 那一个JS 框架不太熟练。 以下是更改的经过 : 张开 lightbox.js
文件,原 218 行的代码为: this.imageArray.push([imageLink.href,
imageLink.title]); 能够阅览此间是间接读取连接对象的 title
属性,所以大家只要求把 imageLink.title 改一下就足以了:
this.imageArray.push([imageLink.href,
document.getElementById.innerHTML]); 把 imageLink.title 改成了
document.getElementById.innerHTML 了;
从这一句能够看出来,大家须求为接连几日来对象设置一个 contentId
属性,那脾气情的值是有些 DOM 成分的 ID
号,图片的辨证便是此成分的情节了。 匡正完之后就足以在 HTML
那样设置图片表达了: 复制代码 代码如下:

风度翩翩、photos.html页面,点击每一张缩略图,就在占位符的岗位这里,展现相应的大图。

description

 

content

阅览的页面效果是如此的:

 

 

 

1、完毕思路

 

以此作用在事先的JavaScript水墨画馆这里已经落到实处了。

 

先是在页面中采取ul列表突显出装有的缩略图,然后接收JavaScript,for循环检查出脚下点击的是哪一张图纸,最终把那张图纸给展现出来。

 

用到多少个函数:展现图片函数、创设占位符预装图片、点击呈现图片

 

2、代码

 

(1卡塔尔制作四张400px*300px的图纸,然后把那四张图片收缩到100*100px的缩略图。把那八张图纸都放进images/photos的文件夹里。

 

(2卡塔尔新建二个photos.html

 

首先,把template.html的代码拷贝到photos.html中;

 

接下来,讲div为content的局地替换为如下:

 

复制代码

<div id=”content”>

            <h1>Photos of the band</h1>

            <ul id=”imagegallery”>

                <li>

                    <a href=”images/photos/basshead.jpg”
title=”作者的图样1″><img src=”images/photos/thumbnail_basshead.jpg”
alt=”赏心悦目标图形”/></a>

                </li>

                <li>

                    <a href=”images/photos/bassist.jpg”
title=”小编的图样2″><img src=”images/photos/thumbnail_bassist.jpg”
alt=”美丽的图形”/></a>

                </li>

                <li>

                    <a href=”images/photos/drummer.jpg”
title=”笔者的图样3″><img src=”images/photos/thumbnail_drummer.jpg”
alt=”雅观的图形”/></a>

                </li>

                <li>

                    <a href=”images/photos/lineup.jpg”
title=”我的图样4″><img src=”images/photos/thumbnial_lineup.jpg”
alt=”雅观的图形”/></a>

                </li>

            </ul>

        </div>

复制代码

 

 

3、修改webdesign.css样式

 

扩充如下样式:#imagegallery li{

 

                      display:inline;      

 

                    }

 

 

 

4、创设photos.js。用来编排photos页面包车型大巴js效果

 

复制代码

/***********************展现图片*********************/

function showPic(whichpic){

    //浏览器  对象检查评定

    if(!document.getElementById(“placeholder”)) return false;

    

    //获取成分

    var source = whichpic.getAttribute(“href”);

    var placeholder = document.getElementById(“placeholder”);

    

    //展现图片

    placeholder.setAttribute(“src”,source);                            
//把当前图片的src赋值给占位符图片

    

    //设置展现描述图片的文字

    if(!document.getElementById(“description”)) return false;

    if(whichpic.getAttribute(“title”)){

        var text = whichpic.getAttribute(“title”);

    }else{

        var text = “”;

    }

    var description = document.getElementById(“description”);

    if(description.firstChild.nodeType == 3){

        description.firstChild.nodeValue = text;

    }

    return false;

}

 

 

/***************创造定位符预装图片***********************/

function preparePlaceholder(){

    //浏览器对象检验

    if(!document.getElementById) return false;

    if(!document.createTextNode) return false;

    if(!document.createElement) return false;

    if(!document.getElementById(“imagegallery”)) return false;

    

    //设置新成立成分的性质

    var placeholder = document.createElement(“img”);

    placeholder.setAttribute(“id”,”placeholder”);

    placeholder.setAttribute(“src”,”./images/placeholder.png”);

    placeholder.setAttribute(“alt”,”笔者的图样”);

    var description = document.createElement(“p”);

    description.setAttribute(“id”,”description”);

    var desctext = document.createTextNode(“请选拔一张图片:”);

    description.appendChild(desctext);

    

    //挂载展现新创制作而成分

    var gallery = document.getElementById(“imagegallery”);

    insertAfter(description,gallery);

    insertAfter(placeholder,description);

}

 

 

 

 

/***************点击,彰显图片*************************/

function prepareGallery(){

    //对象检查评定

    if(!document.getElementById) return false;

    if(!document.getElementsByTagName) return false;

    if(!document.getElementById(“imagegallery”)) return false;

    

    //获取成分

    var gallery = document.getElementById(“imagegallery”);

    var links = document.getElementsByTagName(“a”);

    

    //显示当前图片(for循环达成卡塔 尔(阿拉伯语:قطر‎

    for(var i=0; i<links.length; i++){

        links[i].onclick = function(){

            return showPic(this);

        }

    }

}

 

 

 

addLoadEvent(preparePlaceholder);

addLoadEvent(prepareGallery);

复制代码

 

 

5、张开浏览器浏览,见到功能,photos页面ok啦!

 

二、学与思

 

1、li的样式设置为inline

 

#imagegallery li{

 

                      display:inline;      

 

                    }

 

块级成分变为行内成分,这样子全部的li就能够水平显得。

 

2、nodeType==3为文本节点类型

 

description.firstChild.nodeType == 3

见到的页面效果是这般的: 1、达成思路 这么些功用在之…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图