JQ 图片放大镜样式插件

最新推荐文章于 2024-09-11 09:45:43 发布

萧萧可乐

最新推荐文章于 2024-09-11 09:45:43 发布

阅读量2.1k

点赞数

分类专栏： JQuery 文章标签： function border url scroll div table

本文链接：https://blog.youkuaiyun.com/NIHAOX1/article/details/7736707

版权

JQuery 专栏收录该内容

19 篇文章

订阅专栏

这个插件在算法上未考量。。。在局部展示方面有些出入。。

回家后我在改改。。。。

各位看官就放轻点喷啦。。。。

<!DOCTYPE html>
<html>
<meta charset='utf-8' />
<script type="text/javascript" src="JS/JQ.js"></script>
<style>
/* CSS Document */
body{background:#ffffff;}
body,form,ul,ol,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,table,fieldset,hr,div{margin:0; padding:0;}
body, input,select,textarea{color:#000; font:12px/1.8 "微软雅黑",Arial, Helvetica, sans-serif;}
img{border:0; vertical-align:middle;}
table{width:100%; border:0; border-collapse:collapse; border-spacing:0;}
ul,ol,li{list-style-type:none;}
a{color:#000; outline:none; text-decoration:none;}
a:hover{text-decoration:underline;}
.main{width:960px; height:500px; margin:0 auto;}
</style>
<body>
<div class="main">
	<div id="img_scale" style="width:150px; height:80px;">
		<img src="https://img-my.youkuaiyun.com/uploads/201203/11/8066067_1331462843Pzdp.jpg">
    </div>
</div>
</body>
<script type="text/javascript">
$.fn.extend({
	scale:function(){
		this.css({'position':'relative','cursor':'pointer'});
		var _obj=this;
		var _big_width;
		var _big_height;
		var _img=new Image();
		var _width=$(this).width();
		var _height=$(this).height();
		var _offset_left=$(this).offset().left+_width+5;
		var _offset_top=$(this).offset().top;
		var _img_url=$(this).find('img:eq(0)').attr('src');
		$(this).find('img:eq(0)').css({'width':_width,'height':_height,'margin':'0px','border':'0px'});
		
		var cb_tool={
			init:function(){
				$(_obj).append('<div id="cb_img" style="width:50px; height:50px; background:#666; opacity:0.25; filter:aplha(opacity=25); position:absolute; top:0px; left:0px; display:none;"></div>');
				$('body').append('<div id="cb_show" style="width:225px; height:225px; position:absolute; left:'+_offset_left+'px; top:'+_offset_top+'px; border:1px solid #aaa; background:url('+_img_url+') no-repeat; display:none;"></div>');
				
				$(_obj).mouseenter(function(){
					$('#cb_img').css({'display':'block'});
					$('#cb_show').css({'display':'block'});
				}).mousemove(function(e){
					cb_tool.limit_e(e);
					cb_tool.img_show();
				}).mouseleave(function(){
					$('#cb_img').css({'display':'none'});
					$('#cb_show').css({'display':'none'});
				});
			},
			limit_e:function(e){
				var _x=e.pageX;
				var _y=e.pageY;
				var _left=_x-$(_obj).offset().left;
				var _top=_y-$(_obj).offset().top;
				if(_left <25)
					$('#cb_img').css({'left':"0px"});
				else if(_left>_width-25)
					$('#cb_img').css({'left':_width-50+"px"});
				else 
					$('#cb_img').css({'left':_left-25+"px"});
					
				if(_top < 25)
					$('#cb_img').css({'top':"0px"});
				else if(_top>_height-25)
					$('#cb_img').css({'top':_height-50+"px"});
				else 
					$('#cb_img').css({'top':_top-25+"px"});
				cb_tool.get_img_size();
			},
			img_show:function(){
				var _left=parseInt($('#cb_img').css('left'))+2;
				var _top=parseInt($('#cb_img').css('top'))+2;
				var _cell_x=_big_width/(_width-2);
				var _cell_y=_big_height/(_height-2);
				var _str='url('+_img_url+') no-repeat scroll '+(-1*_cell_x*_left)+'px '+(-1*_cell_y*_top)+'px';
				$('#cb_show').css('background',_str);
			},
			get_img_size:function(){
				_img.src=$(_obj).find('img:eq(0)').attr('src');
				_big_width=_img.width;
				_big_height=_img.height;
			}
		};
		cb_tool.init();
	}
});
function start(){
	$('#img_scale').eq(0).scale();  //调用的地方
};
$(document).ready(function(e) {
    start();
});
</script>
</html>