当前位置：首页 > 网页特效 > 图片特效

jquery放大镜特效

分类：图片特效日期：2024-05-14 点击(5) 评论(0)

jquery放大镜特效

简介

#### html

```html
$(document).ready(function(){
	// 定义图像的实际尺寸、
	var native_width = 0;
	var native_height = 0;
	// 首先、我们应该获得图像的实际尺寸、（本地的图片）
	$('.small').load(function(){
		// 这里我们需要重新创建一个和之前相同的图像对象、
		// 因为我们不能直接获得图像尺寸的宽高、
		// 因为我们在HTML里已经指定了图片宽度为200px、
		var img_obj = new Image();
		img_obj.src = $(this).attr('src');

//  在这里这段代码写在这里是非常有必要的、
		//  如果在图像加载之前就访问的话、return的宽高值为0、
		native_width = img_obj.width;
		native_height = img_obj.height;

// 现在、我来开始写鼠标移动的函数、mousemove()
		$('.magnify').mousemove(function(e){
			// 获得鼠标X轴和Y轴的坐标
			//  先获得magnify相对与document的定位position
			var magnify_offset = $(this).offset();

// 这里我们用鼠标相对与文档的位置减去鼠标相对于magnify这个人容器的位置 来得到鼠标的位置
			var mouse_x = e.pageX - magnify_offset.left;
			var mouse_y = e.pageY - magnify_offset.top;

// 现在、我们来调整一下放大镜的隐藏与显示、
			if( mouse_x > 0 && mouse_y > 0 && mouse_x < $(this).width() && mouse_y < $(this).height() ){
				$('.large').fadeIn(100);
			}else{
				$('.large').fadeOut(100);
			}
			if($('.large').is(':visible')){
				// 放大镜图片背景的定位是根据鼠标在小图片上改变的位置来改变的、
				// 因此、我们应该先得到放大的比例、来定位这个放大镜里背景图片的定位、
				
				/*
				var ratio_x = mouse_x/$('.small').width();//得到的是缩放的比例		
				var large_x = ratio_x*native_width;
				// 我们需要让它在放大镜的中间位置显示、
				large_x = large_x - $('.large').width()/2;
				// 因为背景图片的定位、这里需要转化为负值、
				large_x = large_x*-1;
				// 现在我们来整合一下所有的计算步骤、
				*/
				var rx = Math.round(mouse_x/$('.small').width()*native_width - $('.large').width()/2)*-1;
				var ry = Math.round(mouse_y/$('.small').height()*native_height - $('.large').height()/2)*-1;
				var bgp = rx + 'px ' + ry + 'px';

// 现在我们应该来写放大镜跟随鼠标的效果、
				// 放大镜移动的位置 相对于文档的位置 减去 放大镜相对于放大这个层的offset的位置、
				// 再减去放大镜宽高的一半、保证放大镜的中心跟随鼠标

var gx = mouse_x - $('.large').width()/2;
				var gy = mouse_y - $('.large').height()/2;

$('.large').css({
					'left':gx,
					'top':gy,
					'backgroundPosition':bgp
				})
			}
		})
	})
	// 最后、我们来把这个mousemove()这个函数来放在这个load这个函数里
})
```