Jquery实现图片放大两种方式
- JS
- 时间：2021-03-06 01:40
- 5764人已阅读
简介
在开发过程中，有时候，我们遇到的需求：需要图片放大缩小。下面凯哥就介绍两种实习方式一：弹窗层显示放大后的图片二：鼠标悬浮放大后的图片以下正文说明：jquery.min.js和图片请自行修改一：弹窗层显示放大后的图片，点击图片后缩小效果图：代码：<head><style type="text/css">.fillbg { ba
🔔🔔🔔好消息!好消息!🔔🔔🔔
有需要的朋友👉:联系凯哥
在开发过程中，有时候，我们遇到的需求：需要图片放大缩小。
下面凯哥就介绍两种实习方式
一：弹窗层显示放大后的图片
二：鼠标悬浮放大后的图片
以下正文
说明：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>