最新消息:

第32款插件:zoomer.js鼠标经过图像放大的特效

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

描述:zoomer.js是一款基于Jquery的仿照flash放大图片效果代码
图片展示:

11

官方网址:暂无
兼容浏览器:IE6+/Firefox/Chrome
JS下载:http://www.ijquery.cn/js/zoomer/zoomer.js
预览: http://www.ijquery.cn/demo/zoomer/
打包下载:http://www.ijquery.cn/demo/zoomer/zoomer.zip
参数说明:
speedView:200,  //鼠标移过去,放大的速度
speedRemove:400,  //鼠标移出去,缩小的速度
altAnim:true,    //是否显示文字(图像的alt文字)
speedTitle:400,  //文字显示的快慢
debug:false      //调试模式,具体体现在哪儿,目前不太清楚

HTML代码:

[html]

<ul>
<li><a href="#"><img src="one.jpg" alt="图片一" /></a></li>
<li><a href="#"><img src="two.jpg" alt="图片二" /></a></li>
<li><a href="#"><img src="three.jpg" alt="图片三" /></a></li>
<li><a href="#"><img src="four.jpg" alt="图片四" /></a></li>
</ul>

[/html]

JS引用代码:

[js]

<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/zoomer/zoomer.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(‘ul.thumb li’).Zoomer({speedView:200,speedRemove:400,altAnim:true,speedTitle:400,debug:false});
});
</script>

[/js]

CSS代码:

[css]<link rel="stylesheet" type="text/css" href="http://www.ijquery.cn/js/zoomer/zoomer.css" media="screen" />[/css]

 

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

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

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