JavaScript 仿关机效果的图片层

首先下载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>

赞 (0)

相关推荐

  • JavaScript 仿关机效果的图片层

    JavaScript 仿关机效果的图片层

    首先下载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&qu

  • JavaScript 仿歌词效果

    JavaScript仿歌词效果 var message="Welcome to JavaScript Fairyland!" var neonbasecolor="gray" var neontextcolor="33ff33" var flashspeed=100 var n=0 if (document.all){ document.write('') for (m=0;m'+message.charAt(m)+'') document.wr

  • JavaScript仿京东轮播图效果

    JavaScript仿京东轮播图效果

    本文实例为大家分享了JavaScript实现京东轮播图效果展示的具体代码,供大家参考,具体内容如下 做了一个仿京东的轮播图,当然没有人家官网的精美啦. 主要技术点: 每隔3秒自动切换图片: 鼠标移入图片自动暂停切换,鼠标移出则继续: 点击左右方向按钮手动切换图片: 鼠标移到灰色圆点,显示对应的图片,并加亮显示. HTML代码: <body> <h1>轮播图展示</h1> <div id="did"> <!-- 图片 --> &

  • JavaScript仿小米轮播图效果

    本文是自己仿写的小米轮播图的写法,通过透明度改变进行轮播的,新手,写的可能不是很好,有啥不合理的情况,望提出,指正,全部的代码放最下面 有很多写法重复,有空的时候,我把重复的代码封装一下 关于透明度渐变的动画效果 比如 delayOpacity(OliArray[pre],0,-0.1); 就是将OliArray[pre]这个对象的透明度转换成0,速度为0.1 function delayOpacity(obj,target,speed){ clearInterval(timer); timer

  • javascript仿XP关机效果的弹出窗口功能

    不管是做网站还是一些应用系统,都免不了要用到一些弹出的效果,在ZJ-BLOG V1.0 Beta2版本我在一些功能使用了网络上比较流行的仿XP关机效果的弹出功能,按目前的反应来说还是效果不错的,下面将此功能整一下儿,如果有需要大家可以直接使用到自己的网站或是应用系统中去. 不在详细的说明代码了,帖出代码之前需要说明一点儿的是IE环境下,由于下拉框(select元素)优先级太高了,弹出的div元素无法盖住下拉框元素,很烦人的一个IE的BUG(个人认为是BUG ^o^),我使用的方法是在弹出时隐藏掉

  • 用JavaScript实现仿Windows关机效果

    基本原理分析 Windows关机效果分析 使用Windows系统的用户在关机的时候,出现的界面只允许用户选择关机.注销或取消动作,而桌面上的程序都不能使用,并且屏幕呈现灰色状态. 本例将仿照这种高亮显示的效果在网页上实现. 在网页上运用这种关机效果有什么好处呢?首先,由于单击某一链接后,将用户此时不可用的操作隐藏在后台,将可用的操作放在屏幕最上层,并高亮显示,可以避免用户的误操作.其次,将信息高亮显示,也可以提醒用户应该注意的事项. 网页中实现关机效果分析 在网页中实现这种效果的原理很简单.创建

  • Javascript仿新浪游戏频道鼠标悬停显示子菜单效果

    Javascript仿新浪游戏频道鼠标悬停显示子菜单效果

    本文实例讲述了Javascript仿新浪游戏频道鼠标悬停显示子菜单效果,分享给大家供大家参考.具体如下: 这里演示使用JS实现的网页栏目分类菜单,从新浪游戏频道扣下来的,操作方式类似于滑动门的效果,鼠标无需点击,只需把鼠标放在一级主菜单上,就可显示出二级分类菜单,这弹出的这个二级菜单中,实际上又重新进行了分类,可以说整体上,这是一款支持三级分类的网站菜单,目前新浪游戏还在用的效果哦. 先来看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-gam

  • JavaScript仿flash遮罩动画效果

    本文实例为大家分享了JavaScript仿flash遮罩动画的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>仿flash遮罩动画</title> <meta name="keywords" content=""> <meta name="

  • JavaScript仿微博输入框效果(案例分析)

    JavaScript仿微博输入框效果(案例分析)

    这篇文章给大家分享一个小的JavaScript的案例,就是模仿微博输入框的效果. 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿微博输入框效果</title> <script src="jquery.js"></script> </h

  • Android GridView仿微信添加多图效果

    Android GridView仿微信添加多图效果

    本文实例为大家分享了GridView仿微信添加多图效果展示的具体代码,供大家参考,具体内容如下 栗子惯例,先上GIF 在项目中这种添加⑨图的效果应该是非常常见的,后面有个添加的按钮应该怎么实现,这也许让一部分小白抓狂了吧~来吧,淡漠带你飞,走起~~啦啦啦...... 起飞前先说下,本篇只是讲解九宫格添加图片的效果,至于选择图片的效果是别人写的库,我只是接过来做选择图片用的~ 1.首先这是用GridView实现的 xml布局就一个GridView <GridView android:id="

随机推荐