jquery透视镜效果

来源:https://www.sucaihuo.com/js/1674.html 2017-04-10 12:29浏览(937) 收藏

这是一款非给给力的透视镜可以放大形状可以改变,不错的特效。
jquery透视镜效果
分类:图片代码 > 放大镜 难易:初级
查看演示 下载资源 下载积分: 20 积分
(function($){
		$.fn.chajian=function(options){
			var defaults={
				key_val:[38,40],
				type:'keydown',
				types:'mousemove',
				targets:'.wrap',
				shape:'square'		//或者'circular'
			}
			var set=$.extend({},defaults,options)
			if(set.shape=='circular'){
				$(set.targets).children('div').css('border-radius','50%')
			}
			$(set.targets).on(set.types,function(e){
				var x=e.pageX-$(this).offset().left-$(this).children('div').width()/2
				var y=e.pageY-$(this).offset().top-$(this).children('div').height()/2
				if(x<0)x=0;
				if(y<0)y=0;
				if(x>$(this).width()-$(this).children('div').width())x=$(this).width()-$(this).children('div').width()
				if(y>$(this).height()-$(this).children('div').height())y=$(this).height()-$(this).children('div').height()
				$(this).children('div').css({top:y,left:x,cursor:'none'}).show()
				$(this).find('div img').css({top:-y,left:-x})
				var that=$(this);
				var sum=$(this).children('div').width();
				$(document).on(set.type,function(e){
					if(e.keyCode==set.key_val[0]){
						sum++;
						that.children('div').width(sum);
						that.children('div').height(sum);
					}
					if(e.keyCode==set.key_val[1]){
						sum--;
						that.children('div').width(sum);
						that.children('div').height(sum);
					}
				})
			}).trigger(set.types)
		}
		$('body').chajian({

		})
	}($))
标签: 放大镜透视镜
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2