Un complemento de jquery todos los días: enfoque de imagen de fondo
Enfoque de la imagen de fondo
Uh, no pensé en qué hacer hoy, así que obtuve los resultados que había visto antes. Es algo muy simple, pero realmente está hecho después de tomar notas.
El efecto es el siguiente
el código se muestra a continuación
<!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>
Explicación de la idea
- Nada