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 相关文章推荐
Javascript - HTML的request类
Jan 09 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
javascript实现日历效果
Jun 17 Javascript
小程序点击图片实现png转jpg
Oct 22 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
PHP简单判断手机设备的方法
2016/08/23 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
JavaScript修改css样式style
2008/04/15 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
使用PYTHON创建XML文档
2012/03/01 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
使用Python进行目录的对比方法
2018/11/01 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
python单例模式的多种实现方法
2019/07/26 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
领导班子个人对照检查剖析材料
2014/09/29 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python