描述:当“鼠标放置在图片上时”或“者单击图片时”自动显示扩大的图片,使用其基本功能时不需要任何额外的javascript代码。
这篇教程指的是连续几张图片的使用方法!
兼容浏览器:IE6-9/Firefox/Google Chrome
官方链接: http://www.sunsean.com/zoomi
JS下载: http://www.ijquery.cn/js/zoomi.js
预览: http://www.ijquery.cn/study/demo/zoomi3
打包下载: http://www.ijquery.cn/study/demo/zoomi/zoomi3.zip
参数说明:无
图片展示:
JS引用代码:
这里引入jquery和zoomi两个JS脚本,为方便重复使用,我这里引用绝对地址,你也可以使用的!
[js]
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/zoomi.js"></script>
<script type="text/javascript">
$(function(){
for(i=1; i<=5; ++i)
$('#bleach').append('<img src="images/'+i+'.jpg" height="110">');
$('#bleach img.zoomi').zoomi();
});
</script>
[/js]
HTML代码:
在这里随便使用一个图片,在class设置zoomi,图片有400px,只要指定它的宽度即可,即style="width:200px;"。
[html]
<div id="bleach"></div>
[/html]
CSS代码:不使用!