Jquery实现放大镜效果

原创已于 2023-01-20 20:35:32 修改 · 487 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #前端

于 2023-01-14 21:47:59 首次发布

笔记专栏收录该内容

60 篇文章

订阅专栏

该文章展示了如何使用JavaScript和jQuery创建一个图片放大镜效果。点击小图后，大图显示并可跟随鼠标移动进行局部放大。主要涉及HTML结构、CSS样式及事件处理函数。

不多说了，上代码：
首先来看一下放大镜.html:
这是放大镜.html

再来看一下放大镜的style.css:
这是style.css

最后如何实现操作呢？

$(function(){
	$(".img ul li img").click=function(){
		$(this).addClass("active").parent().find("li").siblings().removeClass("active");
		$(".left img").attr("src","$(this).src");
		$(".right img").attr("src","$(this).src");
	}
	$(".left img").mousemove=function(e){
		$("b").show();
		$(".right img").show();
		var x=e.pageX()-$(this).offset().left-$("b").width()/2;
		var y=e.pageY()-$(this).offset().top-$("b").height()/2;
		var width=$(this).width()-$("b").width();
		var height=$(this).height()-$("b").height();
		if(x<0){
			x=0;
		}else if(x>width){
			x=width;
		}
		if(y<0){
			y=0;
		}else if(y>height){
			y=height;
		}
		
	}
	
	$("b").css({left:"x",top:"y"});
	$(".right img").css({left:"-2*x",top:"-2*y"});
})