首頁 > 開發者 > JavaScript
jQuery實現滑鼠響應式透明度漸層動畫效果樣本，jquery樣本
本文執行個體講述了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> <div id="box"> <span>移動</span> </div><script>window.onload=function(){ var div1=document.getElementById("box"); div1.onmouseover=function(){ startMove(100); } div1.onmouseout=function(){ startMove(30); }}var timer=null;var alpha=30;function startMove(itarget){ clearInterval(timer); var div1=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; div1.style.filter="alpha(opacity:"+alpha+")"; div1.style.opacity=alpha/100; } },100)}</script></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
