第20款插件:zoomi 图片绽放特效插件(含有缩略图与大图)

Zoomi是一款轻量级的图片放大插件,无需额外JavaScript代码即可实现鼠标悬停或点击图片时自动显示放大效果。兼容多种浏览器,包括IE6-9及主流现代浏览器。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

描述:当“鼠标放置在图片上时”或“者单击图片时”自动显示扩大的图片,使用其基本功能时不需要任何额外的javascript代码。
这篇教程指的是含有缩略图与大图,使用的!

兼容浏览器:IE6-9/Firefox/Google Chrome

官方链接:
 http://www.sunsean.com/zoomi

JS下载:
 http://ijquery.360sites.cn/js/zoomi.js

预览: 
http://ijquery.360sites.cn/demo/zoomi

打包下载: 
http://ijquery.360sites.cn/demo/zoomi/zoomi.zip

参数说明:


图片展示:


JS引用代码:
这里引入jquery和zoomi两个JS脚本,为方便重复使用,我这里引用绝对地址,你也可以使用的!

  1. <script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery-1.3.2.min.js"></script>
  2. <script type="text/javascript" src="http://ijquery.360sites.cn/js/zoomi.js"></script>
复制代码
HTML代码:
在这里随便使用一个图片,在class设置zoomi,在src使用缩略图,在alt使用大图。
  1. <a href="#"><img class="zoomi" src="images/small.jpg" alt="images/big.jpg"></a>
  2. <a href="#"><img class="zoomi" src="images/small.jpg" alt="images/big.jpg"></a>
  3. <a href="#"><img class="zoomi" src="images/small.jpg" alt="images/big.jpg"></a>
  4. <a href="#"><img class="zoomi" src="images/small.jpg" alt="images/big.jpg"></a>
复制代码

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=20

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值