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 相关文章推荐
很好用的js日历算法详细代码
Mar 07 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
关于尾递归的使用详解
2013/05/02 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
一个原生的用户等级的进度条
2010/07/03 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
Vue前后端不同端口的实现方法
2018/09/19 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
Python实现二分法算法实例
2015/02/02 Python
window下eclipse安装python插件教程
2017/04/24 Python
Python切片操作实例分析
2018/03/16 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
python hough变换检测直线的实现方法
2019/07/12 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
幼教毕业生自我鉴定
2014/01/12 职场文书
《社戏》教学反思
2014/04/15 职场文书
化工操作工岗位职责
2014/04/29 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
详细介绍python操作RabbitMq
2022/04/12 Python
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python
Nginx跨域问题解析与解决
2022/08/05 Servers