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 相关文章推荐
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
JS前端轻量fabric.js系列物体基类
Aug 05 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
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
php实现数据库的增删改查
2017/02/26 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
python批量生成本地ip地址的方法
2015/03/23 Python
python文件的md5加密方法
2016/04/06 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
Python实现的堆排序算法示例
2018/04/29 Python
Python中字符串List按照长度排序
2019/07/01 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
python识别验证码的思路及解决方案
2020/09/13 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
新大陆软件面试题
2016/11/24 面试题
殡葬服务心得体会
2014/09/11 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书