JavaScript 仿关机效果的图片层


Posted in Javascript onDecember 26, 2008

首先下载JavaScript包:
http://thecodecentral.com/wp-content/uploads/2007/08/yuilightboxwdep.zip
<html>
<head>
//根据下载的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()...{
//制作一个数据源,含原本图片
//用法: 图片ID: {url: "原本图片路径", title:"标题" }
var dataSource = ...{
id_1:...{url:"image-big.jpg", title: '测试图片'}
};

//创建 Lightbox 对象:
//用法:
//imageBase: Lightbox.js 的路径
//dataSource: 数据源
var lightbox = new YAHOO.com.thecodecentral.Lightbox(...{
imageBase:'js/lightbox',
dataSource: dataSource
});
}
//这行保持原貌
YAHOO.util.Event.on(window, 'load', init);
</script>

</head>
<body>
//加一个预览图片
//用法:<img src="预览.jpg" id="图片ID"/>
//注意:保持图片ID和数据源ID一致
<img src="image-small.jpg" id="id_1"/>
</body>
</html>
代码无注解:
<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: '测试图片'}
};

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>
JavaScript 仿关机效果的图片层

Javascript 相关文章推荐
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
JavaScript插入动态样式实现代码
Feb 22 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
采用call方式实现js继承
May 20 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
jquery 插件 任意位置浮动固定层
Dec 25 #Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 #Javascript
jquery 图片预加载 自动等比例缩放插件
Dec 25 #Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 #Javascript
ASP SQL防注入的方法
Dec 25 #Javascript
jQuery 位置插件
Dec 25 #Javascript
jQuery 浮动广告实现代码
Dec 25 #Javascript
You might like
PHP实现的memcache环形队列类实例
2015/07/28 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
JS查看对象功能代码
2008/04/25 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
跟老齐学Python之Python安装
2014/09/12 Python
python求众数问题实例
2014/09/26 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
将python安装信息加入注册表的示例
2019/11/20 Python
Python colormap库的安装和使用详情
2020/10/06 Python
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
客服服务心得体会
2013/12/30 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
离婚财产处理协议书
2014/09/30 职场文书
电影地道战观后感
2015/06/04 职场文书
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS
关于mysql中string和number的转换问题
2022/06/14 MySQL
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技