首页 > 特效插件 > 图像特效 >  zoomImage图片缩放、切换效果正文

zoomImage图片缩放、切换效果

特效介绍


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>
具体的参数配置,已经在上面给出来了。