<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
.product-service-title {
text-align: center;
height: 146px;
padding: 21px 0 19px;
cursor: pointer;
}
.title-img {
margin: 0 auto;
width: 64px;
height: 64px;
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100%;
background-position-y: 0;
}
.title-desc {
margin-top: 4px;
text-align: center;
font-size: 14px;
color: #181818;
line-height: 24px;
font-weight: 400;
margin-bottom: 0;
transition: color .3s ease;
}
.title-content-underLine {
transform: scaleX(0);
transform-origin: 50% 50%;
transition: transform .3s ease;
width: 100%;
margin: 11px auto 0;
border-bottom: 3px solid #ff6a00;
}
.product-service-title:hover .title-desc{
color:#ff6a00;
}
</style>
</head>
<body>
<div id="app">
<div class="product-service-title" ind="0" num_margin="0">
<div class="title-img"
style="background-image: url("https://img.alicdn.com/tfs/TB1cHirmP39YK4jSZPcXXXrUFXa-128-2688.png"); background-position-y: 0px;">
<!-- style="background-image: url("https://img.alicdn.com/tfs/TB111c4mz39YK4jSZPcXXXrUFXa-128-2688.png"); background-position-y: 0px;"> -->
</div>
<h3 class="title-desc">网络与CDN</h3>
<div class="title-content-underLine"></div>
</div>
</div>
<script type="text/javascript">
var aaa=bbb="";
$('.title-img').mouseover(function () {
clearInterval(bbb)
var count=$(".title-img").css("background-position-y")
var i=Number(count.substring(0,count.length-2));
aaa=setInterval(() => {
if(i>-1280){
i=i-64;
$(".title-img").css("background-position-y",i+"px");
}else{
clearInterval(aaa)
}
}, 30);
}).mouseout(function () {
clearInterval(aaa)
var count=$(".title-img").css("background-position-y")
var i=Number(count.substring(0,count.length-2));
bbb=setInterval(() => {
if(i<0){
i=i+64;
$(".title-img").css("background-position-y",i+"px");
}else{
clearInterval(bbb)
}
}, 30);
})
</script>
</body>
</html>
js小动画
最新推荐文章于 2023-02-05 10:13:37 发布