每天一个jquery插件-背景图聚焦
背景图聚焦
额，今天没想好做啥，所以就弄一下之前看过的效果，很简单的东西，不过做了笔记才是真的弄过吧
效果如下
代码如下
<!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>
思路解释
- 啥也没有