特效介绍
zoomImage图片缩放、切换效果
zoomImage是基于jquery的图片放大缩小,支持滚轮滚动,图片切换,删除,旋转等效果。
使用方法
1、在head引入相关的js和css:
<link rel="stylesheet" href="css/zoomImage.css" /> <script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/zoomImage.js"></script>2、在html加入下面的代码:
<div id="panImage" class="pan_image"></div>3、在上面的代码加入下面的js调用:
$(function(){ var imgList = [ {"content":"我爱模板网", "src":"demoImage/1.jpg"}, {"content":"网页特效", "src":"demoImage/2.jpg"}, {"content":"建站特效", "src":"demoImage/3.jpg"}, {"content":"js特效", "src":"demoImage/4.jpg"}, {"content":"jquery特效", "src":"demoImage/5.jpg"}, {"content":"6号图片", "src":"demoImage/6.jpg"}, {"content":"7号图片", "src":"demoImage/7.jpg"}, {"content":"8号图片", "src":"demoImage/8.jpg"} ]; $("#panImage").zyImage({ imgList : imgList, // 数据列表 // mainBgColor : "ffffff", // 主图片区域背景颜色*需要6位 // thumBgColor : "ffffff", // 缩略图片区域背景颜色*需要6位 mainImageWidth : 600, // 主图片区域宽度 mainImageHeight : 330, // 主图片区域高度 thumImageWidth : 110, // 缩略图片区域宽度 thumImageHeight : 110, // 缩略图片区域高度 thumbnails : true, // 是否显示缩略图 rotate : true, // 是否旋转 zoom : true, // 是否放大和缩小 print : false, // 是否打印 showNum : true, // 是否显示总数量和索引 del : true, // 是否可以删除 changeCallback : function(index, image){ // 切换回调事件 console.info("外部回调方法:"); console.info("当前选择第"+index+"张图片"); console.info(image); }, deleteCallback : function(image){ // 删除回调事件 console.info("删除回调方法:"); console.info(image); } }); }); </script>具体的参数配置,已经在上面给出来了。