JavaScript 仿關(guān)機(jī)效果的圖片層
首先下載JavaScript包：
http://thecodecentral.com/wp-content/uploads/2007/08/yuilightboxwdep.zip
<html>
<head>
//根據(jù)下載的JavaScript包修改以下的路徑
<link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/container.css" />
<script type="text/javascript" src="js/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="js/yui/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="js/yui/container/container-min.js"></script>
<script type="text/javascript" src="js/lightbox/Lightbox.js"></script>
<script type="text/javascript">...
//加載 lightbox
init = function()...{
//制作一個(gè)數(shù)據(jù)源，含原本圖片
//用法: 圖片ID: {url: "原本圖片路徑", title:"標(biāo)題" }
var dataSource = ...{
id_1:...{url:"image-big.jpg", title: '測(cè)試圖片'}
};
//創(chuàng)建 Lightbox 對(duì)象:
//用法:
//imageBase: Lightbox.js 的路徑
//dataSource: 數(shù)據(jù)源
var lightbox = new YAHOO.com.thecodecentral.Lightbox(...{
imageBase:'js/lightbox',
dataSource: dataSource
});
}
//這行保持原貌
YAHOO.util.Event.on(window, 'load', init);
</script>
</head>
<body>
//加一個(gè)預(yù)覽圖片
//用法：<img src="預(yù)覽.jpg" id="圖片ID"/>
//注意：保持圖片ID和數(shù)據(jù)源ID一致
<img src="image-small.jpg" id="id_1"/>
</body>
</html>
代碼無(wú)注解：
<html>
<head>
<link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/container.css" />
<script type="text/javascript" src="js/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="js/yui/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="js/yui/container/container-min.js"></script>
<script type="text/javascript" src="js/lightbox/Lightbox.js"></script>
<script type="text/javascript">
init = function(){
var dataSource = {
id_1:{url:"image-big.jpg", title: '測(cè)試圖片'}
};
var lightbox = new YAHOO.com.thecodecentral.Lightbox({
imageBase:'js/lightbox',
dataSource: dataSource
});
}
YAHOO.util.Event.on(window, 'load', init);
</script>
</head>
<body>
<img src="image-small.jpg" id="id_1"/>
</body>
</html> 
相關(guān)文章
JS數(shù)組扁平化的方法合集(遞歸，while循環(huán)，flat)
數(shù)組扁平化也是面試常考題之一,今天就和大家簡(jiǎn)單分享一下常見(jiàn)的數(shù)組扁平方法,這題其實(shí)主要考察的是遞歸思想,因?yàn)楫?dāng)數(shù)組里面嵌套非常多層數(shù)組的時(shí)候只能通過(guò)循環(huán)遞歸來(lái)進(jìn)行扁平,本次分享主要也是分享本題的遞歸思想,需要的朋友可以參考下2024-06-06
JavaScript 異步調(diào)用框架 (Part 5 - 鏈?zhǔn)綄?shí)現(xiàn))
在上一篇文章里面，我們?yōu)楫惒秸{(diào)用框架設(shè)計(jì)了一種鏈?zhǔn)秸{(diào)用方式，來(lái)增強(qiáng)異步調(diào)用隊(duì)列的代碼可讀性，現(xiàn)在我們就來(lái)編寫實(shí)現(xiàn)這部分功能的代碼。2009-08-08
原生js的ajax和解決跨域的jsonp(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇原生js的ajax和解決跨域的jsonp(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
BootStrap 圖標(biāo)icon符號(hào)圖標(biāo)glyphicons不正常顯示的快速解決辦法
這篇文章主要介紹了BootStrap 圖標(biāo)icon符號(hào)圖標(biāo)glyphicons不正常顯示的快速解決辦法,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了JS仿百度自動(dòng)下拉框模糊匹配提示 的相關(guān)資料,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了jscript讀寫二進(jìn)制文件的方法,涉及javascript中ActiveXObject對(duì)象的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
js實(shí)現(xiàn)對(duì)table動(dòng)態(tài)添加、刪除和更新的方法
這篇文章主要介紹了js實(shí)現(xiàn)對(duì)table動(dòng)態(tài)添加、刪除和更新的方法,涉及javascript針對(duì)html中table表格節(jié)點(diǎn)的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
webpack學(xué)習(xí)--webpack經(jīng)典7分鐘入門教程
這篇文章主要介紹了webpack學(xué)習(xí)--webpack經(jīng)典7分鐘入門教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
基于JS制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)版地圖
本文將利用JS實(shí)現(xiàn)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)版地圖，這個(gè)簡(jiǎn)單的網(wǎng)頁(yè)版地圖能根據(jù)城市名進(jìn)行位置查詢。文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2022-05-05
javascript 事件處理程序介紹，學(xué)習(xí)js的朋友可以參考下2012-06-06