最新消息:

第20款插件:zoomi.js 图片绽放特效插件(只有一个大图的使用方法)

图片幻灯插件 杨红伟 1256浏览 0评论

描述:当“鼠标放置在图片上时”或“者单击图片时”自动显示扩大的图片,使用其基本功能时不需要任何额外的javascript代码。
这篇教程指的是只有一个大图的使用方法!
兼容浏览器:
IE6-9/Firefox/Google Chrome
官方链接:
http://www.sunsean.com/zoomi
JS下载:
http://www.ijquery.cn/js/zoomi.js
预览:
http://www.ijquery.cn/demo/zoomi2
打包下载:
http://www.ijquery.cn/demo/zoomi2/zoomi2.zip
参数说明:

图片展示:

11

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>

[/js]

HTML代码:
在这里随便使用一个图片,在class设置zoomi,图片有400px,只要指定它的宽度即可,即style=”width:200px;”。

[html]

<a href="#"><img src="images/bamboo.jpg" style="width:200px;"></a>
<a href="#"><img src="images/bamboo.jpg" style="width:200px;"></a>
<a href="#"><img src="images/bamboo.jpg" style="width:200px;"></a>
<a href="#"><img src="images/bamboo.jpg" style="width:200px;"></a>

[/html]

CSS代码:不使用!

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址