第23款插件:zoomi 图片绽放特效插件(单击图片变大再单击回到原形的使用方法)

最新推荐文章于 2023-12-26 11:40:34 发布

skAce

最新推荐文章于 2023-12-26 11:40:34 发布

阅读量717

点赞数

jQuery plug-in 专栏收录该内容

33 篇文章

订阅专栏

Zoomi是一款轻量级的jQuery插件，用于实现图片点击放大功能。无需额外JavaScript代码，兼容IE6-9及主流浏览器。通过简单的HTML和JS配置即可启用。

摘要生成于 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/zoomi4

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

参数说明：无

图片展示：

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

<script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://ijquery.360sites.cn/js/zoomi.js"></script>
<script type="text/javascript">
$(function(){
$('#zoomme img').zoom1().click(function(){
$(this).zoom2().fadeIn().click(function(){
$(this).hide(); return false; })
.end().parent().addClass('red'); return false; });
});
</script>

复制代码

HTML代码：

<a class="red" id="zoomme" href="#" title="Click me to toogle zoomi"><img src="images/sexy_002.jpg" alt="images/sexy.jpg"></a>
<a class="red" id="zoomme" href="#" title="Click me to toogle zoomi"><img src="images/sexy_002.jpg" alt="images/sexy.jpg"></a>
<a class="red" id="zoomme" href="#" title="Click me to toogle zoomi"><img src="images/sexy_002.jpg" alt="images/sexy.jpg"></a>
<a class="red" id="zoomme" href="#" title="Click me to toogle zoomi"><img src="images/sexy_002.jpg" alt="images/sexy.jpg"></a>

复制代码

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