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 相关文章推荐
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
js输出列表实现代码
Sep 12 Javascript
Javascript 类型转换方法
Oct 24 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 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注册登录系统简化版
2020/12/28 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
python实现html转ubb代码(html2ubb)
2014/07/03 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
500行python代码实现飞机大战
2020/04/24 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
新媒传信软件测试面试题
2013/02/24 面试题
超市实习总结自我鉴定
2013/09/19 职场文书
给导游的表扬信
2014/01/10 职场文书
大课间活动实施方案
2014/03/06 职场文书
担保书格式及范文
2014/04/01 职场文书
给市场的环保建议书
2014/05/14 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
五年级语文教学反思
2016/03/03 职场文书
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python
Hive日期格式转换方法总结
2022/06/25 数据库
基于Python实现西西成语接龙小助手
2022/08/05 Golang