A jquery plug-in every day-background image focus
Background image focus
Um, I didn’t think about what to do today, so I just got the results I’ve seen before. It’s a very simple thing, but it’s really done after taking notes.
The effect is as follows
code show as below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图聚焦</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
}
.div{
border: 1px solid lightgray;
height: 400px;
width: 90%;
margin: 30px auto;
background-repeat: no-repeat;
background-position:0px 0px;
background-size: 100% 100%;
transition: all 0.2s linear;
}
#div1{
background-image: url(img/1.png);
}
#div2{
background-image: url(img/2.png);
}
</style>
</head>
<body>
<div id="div1" class="div"></div>
<div id="div2" class="div"></div>
</body>
</html>
<script>
//第一种
$("#div1").mouseenter(function(){
$(this).css({
'background-size':'200% 200%',
'background-position':'50% 50%'
})
}).mouseleave(function(){
$(this).css({
'background-size':'100% 100%',
'background-position':'0px 0px'
})
})
//第二种
$("#div2").mousemove(function(e){
var w= $(this).width();
var h= $(this).height();
var x = e.offsetX;
var y = e.offsetY;
var tempx = x-w/2;
var tempy = y-h/2;
$(this).css({
'background-size':'100% 100%',
'background-position':''+tempx+'px '+tempy+'px'
})
}).mouseleave(function(){
$(this).css({
'background-size':'100% 100%',
'background-position':'0px 0px'
})
})
</script>
Idea explanation
- Nothing