提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

Jquery实现图片放大两种方式

2023-02-18 16:31:17 时间

在开发过程中，有时候，我们遇到的需求：需要图片放大缩小。

下面凯哥就介绍两种实习方式

一：弹窗层显示放大后的图片

二：鼠标悬浮放大后的图片

以下正文

说明：jquery.min.js和图片请自行修改

一：弹窗层显示放大后的图片，点击图片后缩小

效果图：

代码：

<head>

<style type="text/css">
.fillbg { background-color: rgba(0, 0, 0, 0.6); bottom: 0; height: 100%; left: 0; opacity: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 1100; display:none; }
.fillbg-active { opacity: 1; display:block; }
</style>
</head>

<script src="http://localhost:8090/js/jquery.min.js"></script>

<img class="comment_pics" width="50px" height="50px" src="http://localhost:8090/profile/pic/imgs/pic7986627563.JPG"/>

<div class="bg">
    <img class="bgImg" style="max-width: 100%; max-height: 100%; position: fixed;" src="">
</div>

<script>
    var newImg;
    var clientH=$(window).height();
    var clientW=$(window).width();
    var w = '250';
    var h = '250';
    $(document).ready(function(){
        $(".comment_pics").bind("click", function(){
            newImg = $(this)[0].src;
            $("body").append('<div class="fillbg"></div>');
            $(".fillbg").addClass("fillbg-active");
            $('.bgImg').css({'width': w+"px",'height': h+"px",'top':(clientH-h)/2+"px",'left':(clientW-w)/2+"px",'z-index':1101});
            $('.bgImg').attr("src",newImg);
        });

        $(".bgImg").bind("click", function(){
            $(".fill-input").removeClass("fill-input-active");
            setTimeout(function(){
                $(".fillbg-active").removeClass("fillbg-active");
                $(".fillbg").remove();
            },300);
            $('.bgImg').css({'width': '0px','height': '0px'});
            $('.bgImg').attr("src",'');
        });
    });
</script>

二：鼠标悬浮放大后的图片

效果图：

鼠标悬浮后，放大，鼠标离开后消失。

代码：

<script src="http://localhost:8090/js/jquery.min.js"></script>


<br>
<img id="aa" width="50px" height="50px" src="http://localhost:8090/profile/pic/imgs/pic7986627563.JPG"/>

<div class="bg">
    <img class="bgImg" style="max-width: 100%; max-height: 100%; position: fixed;" src="">
</div>

<script>
     $(function(){
			        $("#aa").mouseover(function(e){
					//鼠标移入事件
					
					//1.获取图片的大小
					var width = this.width;
					var height = this.height;
					//alert(width +"     "+height);
					
					//2.获取鼠标的位置
					var x = e.clientX + 10;//e.clientX;
					var y = e.clientY + 10;
					//alert(x+"   "+y);
					
					//3.创建一个div
					var div = $("<div id='bigImg'/>").css({
						"position" : "absolute",
						"top" : y,
						"left" : x,
						"display":"none",
						//"border" :"3px red solid",
						"width" : width * 1.5,
						"height" : height * 1.5 
					});
					
					//4.创建一个图片
					var img = $("<img/>").attr({
						"src" : this.src 
					}).css({
						"width" : width * 1.5,
						"height" : height * 1.5
					});
					
					//5.将图片放到div中
					div.append(img);
					
					//6.将div放到页面中
					$("body").append(div);
					//7.将div展示出来
					div.show(1000); 
				}).mousemove(function(e){
					//鼠标在图片上的移动事件
					
					//获取鼠标当前的位置
					var x = e.clientX + 10;
					var y = e.clientY + 10;
					
					//获取页面中的div浮层
					$("#bigImg").css({
						"top" : y,
						"left" : x
					});
					
				}).mouseout(function(){
					//鼠标移出事件
					$("#bigImg").remove();
				});			
				
			});

</script>

相关文章