JavaScript 仿关机效果的图片层

最近发现了一用 YUI 做的 Lightbox, 只需少量的设置就能类Window关机的效果来显示图片。

http://thecodecentral.com/2007/08/17/yui-based-lightbox-revisit

首先下载JavaScript包：
http://thecodecentral.com/wp-content/uploads/2007/08/yuilightboxwdep.zip

新建一个HTML页：

<html>

<head>

//根据下载的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一致

</body>

</html>

代码无注解：

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="data:image-small.jpg" id="id_1"/>
</body>
</html>


测试地址：http://test.thecodecentral.com/demos/lightboxrev/lightbox.html

JavaScript 仿关机效果的图片层相关推荐

JavaScript：windows关机效果
JavaScript:windows关机效果 (1)JavaScript实现 var isIe=(document.all)?true:false; //主函数,页面调用 function testM ...
JavaScript实现京东轮播图效果——自动轮播，左右按钮切换图片，小圆圈跟随图片变化，点击小圆圈可跳转图片，无缝循环播放
JavaScript实现京东轮播图效果--自动轮播,左右按钮切换图片,小圆圈跟随图片变化,点击小圆圈可跳转图片,无缝循环播放静态效果图如下: CSS部分 *{margin: 0;padding: 0 ...
JavaScript仿淘宝京东放大镜效果（鼠标事件）------JavaScript学习之路10
JavaScript仿淘宝京东放大镜效果注意一定计算好放大比例,本程序放大5倍,具体放大倍数,自定效果完整源码 <!DOCTYPE html> <html lang=&quo ...
仿电视关机效果的动画
仿电视关机效果的动画效果图主要代码 package com.zhengsonglan.tvanimation;import android.graphics.Matrix; import andr ...
HTML期末学生作业 HTML+CSS+JavaScript仿猫眼电影在线网站 Hbuilder网页制作
❤ HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全) web期末结课大作业 html+css+javascript网页.电影.仿京东.天猫.服装. 企业网站制 ...
第65天：仿网易轮播图
仿网易轮播图 1.HTML部分 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta ...
【每日一练】原生js仿淘宝主图放大镜功能，附学习源码
在我们的项目中,经常会遇到各种功能效果的实现,对于每一项功能的实现方式,都有很多种,这些实现方式没有好坏之分,只有适合与否,但是我个人建议,如果项目急就选择自己擅长的方式实现,比较完成工作更加重要嘛. ...
云炬Android开发笔记 15评价晒单功能实现（自定义评分控件和仿微信自动多图选择控件）
阅读目录 1. 晒单评价 1.1 点击页面跳转的实现 1.2 自定义评价订单的布局实现 1.3 星星布局的实现 2. 仿微信自动多图及删除控件 2.1 属性值及控件的定义 2.2 图片初始化方法onM ...
Javascript 仿Flash 图片切换及 Flash 图片切换
1. Javascript 仿Flash 图片切换 http://www.fansart.com/cweb/200669141456.asp <a target=_self href=" ...

JavaScript 仿关机效果的图片层

JavaScript 仿关机效果的图片层相关推荐

最新文章

热门文章