JQuery photo scaling does not affect the layout of other elements
- 2020-03-30 02:56:46
- OfStack
See this kind of special effect on the Internet before, but there was no collection of url, resulting in a time later do not know how this special effect is achieved. Today, I searched on the Internet, and I found it.
I tried to write it myself:
But it's just a simple magnification of the image, and it also affects the layout of the elements around the image (because the magnification takes up more space).
Later, I found that the purpose could be achieved by using the two properties of overflow and position flexibly. In fact, I think CSS(CSS3) overflow and position(top,bottom,left,right) is an unsolved combination of web effects. Of course, js(jquery) is the boss.
After all this nonsense, I'm sure you're still wondering: what special effects are they? Alas, my language expression ability is still very average, the following I screenshot to illustrate:
This is what the web page looks like when it opens:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405090950532.gif? 2014499517 ">
When the mouse hovers over any one of the above 6 images, the effects I'm referring to appear (I'm using the mouse over the third image as an example) :
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405090951383.gif? 20144995151 ">
You will notice that the image is zooming out and zooming out (back to its original state) without spilling out and without affecting the layout of other images and elements.
The following code is pasted:
I tried to write it myself:
But it's just a simple magnification of the image, and it also affects the layout of the elements around the image (because the magnification takes up more space).
Later, I found that the purpose could be achieved by using the two properties of overflow and position flexibly. In fact, I think CSS(CSS3) overflow and position(top,bottom,left,right) is an unsolved combination of web effects. Of course, js(jquery) is the boss.
After all this nonsense, I'm sure you're still wondering: what special effects are they? Alas, my language expression ability is still very average, the following I screenshot to illustrate:
This is what the web page looks like when it opens:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405090950532.gif? 2014499517 ">
When the mouse hovers over any one of the above 6 images, the effects I'm referring to appear (I'm using the mouse over the third image as an example) :
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405090951383.gif? 20144995151 ">
You will notice that the image is zooming out and zooming out (back to its original state) without spilling out and without affecting the layout of other images and elements.
The following code is pasted:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Photo zoom </title>
</head>
<!-- The Style -->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-family: "Myriad Pro", "Trebuchet MS", Helvetica, sans-serif;
font-size: 12px;
color: #fff;
}
#col {
width: 600px;
height:400px;
margin: 20px auto 0px auto;
border: 1px solid #2D353F;
}
.pic {
width: 200px;
height: 200px;
margin: 0px;
overflow: hidden;
position: relative;
float: left;
}
.pic a img {
height: 500px;
border: none;
position: absolute;
top: -66.5px;
left: -150px;
opacity: 0.5;
-moz-opacity: 0.5;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
</style>
<!-- The JavaScript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#col img').hover(
function(){
var $this = $(this);
$this.stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});
},
function(){
var $this = $(this);
$this.stop().animate({'opacity':'0.5','height':'500px','top':'-66.5px','left':'-150px'});
}
);
});
</script>
<body>
<div id="col">
<div class="pic">
<a href="#">
<img src="Images/1.jpg"/>
</a>
</div>
<div class="pic">
<a href="#">
<img src="Images/2.jpg"/>
</a>
</div>
<div class="pic">
<a href="#">
<img src="Images/3.jpg"/>
</a>
</div>
<div class="pic">
<a href="#">
<img src="Images/4.jpg"/>
</a>
</div>
<div class="pic">
<a href="#">
<img src="Images/5.jpg"/>
</a>
</div>
<div class="pic">
<a href="#">
<img src="Images/6.jpg"/>
</a>
</div>
</div>
</body>
</html>