鼠标放上图片按钮逐渐变亮的JS特效-JS特效-爱易网页

鼠标放上图片按钮逐渐变亮的JS特效

日期：2014-05-18　浏览次数：20223 次

以下是程序代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>例子</title>
<style>
body{
 background:#070605; 
}
span, span a{
 display:block;
 width:183px;
 height:53px; 
 background:url('http://www.c119.cn/app/sssg/images/l_button.jpg') 0 -40px no-repeat;
}
span a{
 overflow:hidden;
 text-indent:-999px;
 background-position:-183px -40px; 
 opacity:0;
 filter:alpha(opacity=0);
}
</style>
<script>
window.onload = function() {
 var oA = document.getElementsByTagName("a")[0];
 var timer = null;
 oA.onmouseover = function() {
  doMove(100)
 };
 oA.onmouseout = function() {
  doMove(0)
 };
 function doMove(iTarget) {
  clearInterval(timer);
  timer = setInterval(function() {
   var alpha = parseFloat(oA.currentStyle ? oA.currentStyle["opacity"] : getComputedStyle(oA, null)["opacity"]).toFixed(2) * 100;   
   var iSpeed = (iTarget - alpha) / 5;
   iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
   if(iTarget == alpha) {
    clearInterval(timer) 
   }
   else {
    oA.style.filter = "alpha(opacity="+ (alpha + iSpeed) +")";
    oA.style.opacity = (alpha + iSpeed) / 100
   }
  }, 30);  
 }
};
</script>
</head>
<body>
<span><a href="javascript:;">领取新手卡</a></span>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

鼠标放上图片按钮逐渐变亮的JS特效

相关资料更多>

推荐阅读更多>