这次给大家带来鼠标响应式透明度渐变效果的实现，做出鼠标响应式透明度渐变效果的注意事项有哪些，下面就是实战案例，一起来看一下。
本文实例讲述了jQuery实现鼠标响应式透明度渐变动画效果。分享给大家供大家参考，具体如下：
先来看看运行效果：
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>js动画-透明度变化</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
font-family:"微软雅黑"
}
#box{
height:100px;
width:100px;
background-color:#0099CC;
margin-top:200px;
position:relative;
/*透明度变化*/
left:0px;
filter:alpha(opacity:30);
opacity:0.3;
}
span{
display:block;
color:blue;
width:25px;
height:100px;
background-color:#FFFF99;
position:absolute;
left:100px;
}
</style>
</head>
<body>
<p id="box">
<span>移动</span>
</p>
<script>
window.onload=function(){
var p1=document.getElementById("box");
p1.onmouseover=function(){
startMove(100);
}
p1.onmouseout=function(){
startMove(30);
}
}
var timer=null;
var alpha=30;
function startMove(itarget){
clearInterval(timer);
var p1=document.getElementById("box");
timer=setInterval(function(){
var speed=0;
if(alpha>itarget){
speed=-10;
}else{
speed=10;
}
if(alpha==itarget){
clearInterval(timer);
}else{
alpha+=speed;
p1.style.filter="alpha(opacity:"+alpha+")";
p1.style.opacity=alpha/100;
}
},100)
}
</script>
</body>
</html>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci 鼠标响应式透明度渐变效果的实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk menetapkan ketelusan warna fon html
Peranan mendaftar pelayan awan
Alat muat turun dan pemasangan Linux biasa
Bagaimana untuk menyelesaikan kod ralat deletefile 5
iPhone 16 dijangka masa pelancaran
oicq
Penggunaan strncpy
Bagaimana untuk mengalih keluar orang daripada senarai hitam di WeChat
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
