特效介绍
zoomImage图片缩放、切换效果
zoomImage是基于jquery的图片放大缩小，支持滚轮滚动，图片切换，删除，旋转等效果。
使用方法
1、在head引入相关的js和css：
<link rel="stylesheet" href="css/zoomImage.css" /> <script src="https://5.jimth.com/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>
具体的参数配置，已经在上面给出来了。