<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript模拟Flash实现百叶窗图片链接 - 使用说明</title>
</head>
<body>
<h2 align="center">JavaScript模拟Flash实现百叶窗图片链接 - MyImg</h2>
<div><h3>1. MyImg 简介</h3></div>
<p>使用了以纯JavaScript代码代替Flash的方式表现网页中常见的图片百叶窗链接效果，与使用Flash的方式比起来效果几乎一样。MyImg对象封装了底层的实现细节，提供了一个通用的调用函数，允许页面使用常用的两种调用方法。</p>
<div><h3>2. MyImg 使用</h3></div>
<p>在MyImg中，通用调用函数提供了两种调用方法。在第一种方法中，我们只需直接在页面HTML中插入调用函数，以下是一个具体例子（方法1）：</p>
<table width="100%" border="0" bgcolor="#dddddd"><tr><td>
<p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br />
<title>JavaScript模拟Flash实现百叶窗图片切换 - 调用方法1</title><br />
</head></p>
<p><font color="#FF0000"><script language="javascript" src="myimg-1.1.js"></script></font><br />
<script language="javascript"><br />
var img = ["images/1.jpg",<br />
"images/2.jpg",<br />
"images/3.jpg",<br />
"images/4.jpg",<br />
"images/5.jpg",<br />
"images/6.jpg",<br />
"images/7.jpg",<br />
"images/8.jpg"<br />
];<br />
var imglink = ["http://www.baidu.com",<br />
"http://www.google.cn",<br />
"http://cn.bing.com",<br />
"http://www.baigoogledu.com",<br />
"index.html",<br />
"",<br />
"",<br />
"http://www.baidu.com/s?wd=hello"<br />
];<br />
var imgalt = ["百度一下，你就知道",<br />
"Google China",<br />
"Bing China",<br />
"百Google度官方网站",<br />
"index.html",<br />
"6",<br />
"7",<br />
"百度一下，你就知道 - hello"<br />
];<br />
</script></p>
<p><body><br />
<font color="#FF0000"><!-- MyImg 第一种调用方法 --><br />
<script language="javascript">MyImg.disp(img, imglink, imgalt, 400, 300, 5000);</script></font><br />
</body><br />
</html></p>
</td></tr></table>
<div align="center"><button onclick="window.open('myimg_test1.html');">预览效果 - 方法1</button></div>
<hr />
<p>在第二种调用方法中，我们通过在页面上设置一个指定id的元素（如：'mainDiv'），在页面HTML外部通过函数或页面加载时（onload）调用，以下是一个例子（方法2）：</p>
<table width="100%" border="0" bgcolor="#dddddd"><tr><td>
<p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br />
<title>JavaScript模拟Flash实现百叶窗图片切换 - 调用方法2</title><br />
</head></p>
<p><font color="#FF0000"><script language="javascript" src="myimg-1.1.js"></script></font><br />
<script language="javascript"><br />
var img = ["images/1.jpg",<br />
"images/2.jpg",<br />
"images/3.jpg",<br />
"images/4.jpg",<br />
"images/5.jpg",<br />
"images/6.jpg",<br />
"images/7.jpg",<br />
"images/8.jpg"<br />
];<br />
var imglink = ["http://www.baidu.com",<br />
"http://www.google.cn",<br />
"http://cn.bing.com",<br />
"http://www.baigoogledu.com",<br />
"index.html",<br />
"",<br />
"",<br />
"http://www.baidu.com/s?wd=hello"<br />
];<br />
var imgalt = ["百度一下，你就知道",<br />
"Google China",<br />
"Bing China",<br />
"百Google度官方网站",<br />
"index.html",<br />
"6",<br />
"7",<br />
"百度一下，你就知道 - hello"<br />
];<br />
</script></p>
<p><body><br />
<font color="#FF0000"><div id="mainDiv"></div></font><br />
</body><br />
</html></p>
<p><script language="javascript"><br />
document.body.onload = function() {<br />
<font color="#FF0000">// MyImg 第二种调用方法<br />
MyImg.disp(img, imglink, imgalt, 400, 300, 5000, 'mainDiv');</font><br />
}<br />
</script></p>
</td></tr></table>
<div align="center"><button onclick="window.open('myimg_test2.html');">预览效果 - 方法2</button></div>
<div><h3>3. MyImg 适用范围</h3></div>
<p>目前，MyImg支持浏览器类型为IE6、7以及Firefox3，以下分别是MyImg在IE7和Firefox3下的截图：</p>
<p><img src="1.jpg" /> <img src="2.jpg" /></p>
<div align="center">LZF All Rights Reserved</div>
</body>
</html>
JavaScript模拟Flash实现百叶窗图片链接及实例说明
需积分: 10 200 浏览量
2010-03-08
20:28:35
上传
评论
收藏 970KB RAR 举报
myimg.rar （15个子文件） 
myimg 
myimg-1.1.js 4KB
2.jpg 53KB
myimg_test1.html 1KB 1.jpg 51KB myimg_test2.html 1KB images 5.jpg 121KB 3.jpg 180KB 8.jpg 50KB 4.jpg 172KB 2.jpg 63KB 1.jpg 64KB Thumbs.db 29KB 6.jpg 127KB 7.jpg 92KB index.html 5KB资源评论
