极酷的变色按纽

最新推荐文章于 2019-06-20 09:24:24 发布

转载最新推荐文章于 2019-06-20 09:24:24 发布 · 590 阅读

文章标签：

#transition #border #function #filter #class #null

菜单类CSS 专栏收录该内容

9 篇文章

订阅专栏

<script type="text/javascript">
//Generate transition CSS (transition=0 to 23)
document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=0.4,transition=12) }</STYLE>');

//Uncomment the next line for fading rollovers instead of dissolving:
//document.write('<STYLE TYPE="text/css">.imgTrans{ filter:blendTrans(duration=0.4) }</STYLE>');

var onImages=new Array();
function Rollover(imgName, imgSrc)
{
onImages[imgName] = new Image();
onImages[imgName].src = imgSrc;
}

function turnOn(imgName){
if(document.images[imgName].filters != null)
  document.images[imgName].filters[0].apply();
document.images[imgName].offSrc = document.images[imgName].src;
document.images[imgName].src    = onImages[imgName].src;
if(document.images[imgName].filters != null)
  document.images[imgName].filters[0].play();
}

function turnOff(imgName){
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].stop();
document.images[imgName].src = document.images[imgName].offSrc;
}

//Specify name of participating images, plus paths to their onMouseover replacements:
Rollover("home", "http://www.baron.com.cn/javascript/picture/home_on.gif");
Rollover("about", "http://www.baron.com.cn/javascript/picture/about_on.gif");
Rollover("scripts", "http://www.baron.com.cn/javascript/picture/scripts_on.gif");

</script>
<a href = "http://www.cq20.com"
onMouseOver="turnOn('home');"
onMouseOut="turnOff('home');"><img name="home" class="imgTrans"
src="http://www.baron.com.cn/javascript/picture/home_off.gif" border="0"></a><br>