您的位置：首页 → 网页设计 → HTML/CSS  → 鼠标实现图片的渐有渐无

鼠标实现图片的渐有渐无

时间：2004/11/7 2:41:00来源：本站整理作者：蓝点我要评论(0)

　

1，CSS，JS，IMG一个都不能少

运行代码框
<style　type="text/css"><BR> <!--<BR> .trans_img<BR> 　　{filter:alpha(opacity=30,enabled=1)　blendtrans(duration=1);<BR> 　　　border:0　solid　black}<BR> --><BR> </style><BR> <script　language=javascript><BR> function　transImg(obj,enable) {<BR> obj.filters.blendtrans.Apply();<BR> obj.filters[0].enabled=enable;<BR> obj.filters.blendtrans.Play();<BR> }<BR> </script><BR> <img　src="http://www.cnbruce.com/images/cnrose/a.gif"　class="trans_img"　onmouseover="transImg(this,0)"　onmouseout="transImg(this,1)"><BR> <BR>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

2，JS & IMG

运行代码框
<script　language="JavaScript">　<BR> nereidFadeObjects　=　new　Object();<BR> nereidFadeTimers　=　new　Object();<BR> function　nereidFade(object,　destOp,　rate,　delta){<BR> if　(!document.all)<BR> return<BR> 　　　　if　(object　!=　"[object]"){　　file://do　this　so　I　can　take　a　string　too<BR> 　　　　　　　　setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);<BR> 　　　　　　　　return;<BR> 　　　　}<BR> 　　　　clearTimeout(nereidFadeTimers[object.sourceIndex]);<BR> 　　　　diff　=　destOp-object.filters.alpha.opacity;<BR> 　　　　direction　=　1;<BR> 　　　　if　(object.filters.alpha.opacity　>　destOp){<BR> 　　　　　　　　direction　=　-1;<BR> 　　　　}<BR> 　　　　delta=Math.min(direction*diff,delta);<BR> 　　　　object.filters.alpha.opacity+=direction*delta;<BR> 　　　　if　(object.filters.alpha.opacity　!=　destOp){<BR> 　　　　　　　　nereidFadeObjects[object.sourceIndex]=object;<BR> 　　　　　　　　nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);<BR> 　　　　}<BR> }<BR> </script><BR> <a 　href="http://www.cnbruce.com/"　target="_blank" rel="nofollow"><BR> <img　border="0"　src=http://www.cnbruce.com/images/cnrose/a.gif　onMouseOut=nereidFade(this,50,10,5)　onMouseOver=nereidFade(this,100,10,5)　　style="FILTER:　alpha(opacity=50)　"　border=0><BR> </a><BR>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

3，用htc文件，不用JS从而减轻工作量。
下载alpha.htc: http://www.cnbruce.com/js/alpha.htc

效果页查看：http://www.cnbruce.com/js/a.html 

 4，有点Flash的味道，一闪而过。

运行代码框
<SCRIPT　language=Javascript　type=text/javascript><BR> function　trains(id,text){document.all[id].innerHTML=' '+text}<BR> function　trainpic(id,text){document.all[id].innerHTML='<img　src="'+text+'.gif">'}<BR> function　high(which2){<BR> theobject=which2;theobject.filters.alpha.opacity=0<BR> highlighting=setInterval("highlightit(theobject)",50)}<BR> function　low(which2){<BR> clearInterval(highlighting)<BR> which2.filters.alpha.opacity=100}<BR> function　highlightit(cur2){<BR> if　(cur2.filters.alpha.opacity<100)<BR> cur2.filters.alpha.opacity+=15<BR> else　if(window.highting)<BR> clearInterval(highlighting)}<BR> </SCRIPT><BR> <a 　href="http://www.cnbruce.com/" rel="nofollow"><BR> <IMG　onmouseover="this.style.filter='alpha(opacity=100)';high(this)"　onmouseout="low(this)"　src="http://www.cnbruce.com/images/cnrose/a.gif"　　border="0"><BR> </a><BR>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

5，还有图片的“黑白转彩色”

运行代码框
<SCRIPT><BR> function　doTrans(filterCode)　<BR> {<BR> imgObj.filters[0].apply();<BR> oImg.style.filter　=　filterCode<BR> imgObj.filters[0].play();<BR> }<BR> </SCRIPT><BR> <SPAN　id=imgObj　<BR> onmouseleave='doTrans("gray")'　<BR> style="FILTER:　progid:DXImageTransform.Microsoft.Fade(Overlap=1.00);　WIDTH:　1px"　<BR> onmouseenter='doTrans("")'><BR> <IMG　id=oImg　style="FILTER:　gray"　src="http://www.cnbruce.com/images/cnrose/a.gif">　<BR> </SPAN><BR>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

 

相关阅读 Windows错误代码大全 Windows错误代码查询激活windows有什么用Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新windows 10 rs4快速预览版17017下载错误问题Win10秋季创意者更新16291更新了什么 win10 16291更新内容windows10秋季创意者更新时间 windows10秋季创意者更新内容kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么

文章评论

查看所有0条评论>>

发表评论

我来说两句...

提交评论