请选择 进入手机版 | 继续访问电脑版

【插件分享】图片放大镜效果插件分享

发表于 12-06 18:48 显示全部楼层 4 34

今天分享一个插件,名字叫ZooMove,是一个用于制造图片放大镜效果的插件,使用简单而且效果好。如图所示的效果:


zoomimg.gif


使用方式:


插件的使用方式其实都是类似的,首先引入需要用到的文件,这个插件的效果需要有两个文件,一个zoomove.min.css文件,一个zoomove.min.js文件;该插件是依赖于jQuery来进行使用,因此需要在插件文件前先引入jQuery文件;


另外,这个插件的图片显示是通过background-image来控制的,因此HTML标签不需要用img,可以是其他HTML标签,例如div等,案例中用的是figure媒体标签;


代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="zoomove.min.css">
	<style>
		*{
			padding: 0;
			margin: 0;
			list-style: none;
		}
		.pic li{
			width: 400px;
			height: 200px;
			margin: 50px auto;
			position: relative;
		}
	</style>
</head>
<body>
	<ul class="pic">
		<li><figure class="zoo-item" data-zoo-image="image/pic1.jpg" data-zoo-scale="1.5" data-zoo-move="true" data-zoo-over="true" data-zoo-cursor="true"></figure></li>
		<li><figure class="zoo-item" data-zoo-image="image/pic2.jpg"></figure></li>
		<li><figure class="zoo-item" data-zoo-image="image/pic3.jpg"></figure></li>
	</ul>
	

	
	<script src="jquery-1.7.2.min.js"></script>
	<script src="zoomove.min.js"></script>

	<script>
		$('.zoo-item').ZooMove(); //执行插件功能;
	</script>
</body>
</html>


效果如下:


zoomimg2.gif


参数讲解:


1、添加效果的HTML标签要添加一个类名,后面调用功能的时候才能选择到,默认是 zoo-item ;

2、图片的显示,效果设置可以通过标签属性来进行控制;详细的标签属性配置如下:

        data-zoo-image="url"        显示图片的URL;

        data-zoo-scale="1.5"         图片的缩放比例,默认值是1.5(150%);

        data-zoo-move="true"      图片是否随着鼠标而移动,默认值是 true;

        data-zoo-over="false"         图片是否整体产生效果,默认值是false;

        data-zoo-cursor="false"        设置鼠标指针的效果,例如 true 是小手;


3、插件也提供js的设置方式,设置方式如下:

        $('.zoo-item').ZooMove({

            image: '[value]',

            scale: '[value]',

            move: '[value]',

            over: '[value]',

            cursor: '[value]'

           });


demo文件和插件文件下载:

ImageZoomoveDemo.zip



回复 使用道具
举报
为你守候

发表于 12-12 20:47 显示全部楼层

回复 支持 反对 使用道具
举报
高分中二病

发表于 12-09 16:25 显示全部楼层

提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对 使用道具
举报
今夜为你想

发表于 12-07 16:21 显示全部楼层

回复 支持 反对 使用道具
举报
大道至简

发表于 12-06 20:22 显示全部楼层

以诚感人者,人亦诚而应。一点回复,敬请笑纳!

回复 支持 反对 使用道具
举报

发表新文章
蓝明周老师

小码哥名师团队

0

学分

2320

学币

2511

积分

小码哥名师团队

Rank: 5Rank: 5

积分
2511

小码哥一周年勋章

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育