当前位置:萝卜系统下载站 > 网页设计教程 > 详细页面

鼠标完成图片的渐有渐无

鼠标完成图片的渐有渐无

更新时间:2020-12-25 文章作者:未知 信息来源:网络 阅读次数:

网站建设是指使用标识语言(markup language),通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输,最终以图形用户界面(GUI)的形式被用户所浏览。简单来说,网页设计的目的就是产生网站。简单的信息如文字,图片(GIF,JPEG,PNG)和表格,都可以通过使超文件标示语言、可扩展超文本标记语言等标示语言放置到网站页面上。
1,CSS,JS,IMG一个都不能少运行代码框
<style type="text/css"><!--.trans_img {filter:alpha(opacity=30,enabled=1) blendtrans(duration=1); border:0 solid black}--></style><script language=javascript> function transImg(obj,enable) { obj.filters.blendtrans.Apply(); obj.filters[0].enabled=enable; obj.filters.blendtrans.Play(); }</script><img src="http://www.fixdown.comhttp://www.fixdown.com/article/UploadPic/2006-1/200618112344826.gif" class="trans_img" onmouseover="transImg(this,0)" onmouseout="transImg(this,1)">
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]2,JS & IMG运行代码框
<script language="JavaScript"> nereidFadeObjects = new Object();nereidFadeTimers = new Object();function nereidFade(object, destOp, rate, delta){if (!document.all)return if (object != "[object]"){ file://do this so I can take a string too setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); return; } clearTimeout(nereidFadeTimers[object.sourceIndex]); diff = destOp-object.filters.alpha.opacity; direction = 1; if (object.filters.alpha.opacity > destOp){ direction = -1; } delta=Math.min(direction*diff,delta); object.filters.alpha.opacity+=direction*delta; if (object.filters.alpha.opacity != destOp){ nereidFadeObjects[object.sourceIndex]=object; nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate); }}</script><a href="http://www.cnbruce.com/" target="_blank"><img border="0" src=http://www.fixdown.comhttp://www.fixdown.com/article/UploadPic/2006-1/200618112344826.gif onMouseOut=nereidFade(this,50,10,5) onMouseOver=nereidFade(this,100,10,5) style="FILTER: alpha(opacity=50) " border=0></a>
[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>function trains(id,text){document.all[id].innerHTML=' '+text}function trainpic(id,text){document.all[id].innerHTML='<img src="'+text+'.gif">'}function high(which2){theobject=which2;theobject.filters.alpha.opacity=0highlighting=setInterval("highlightit(theobject)",50)}function low(which2){clearInterval(highlighting)which2.filters.alpha.opacity=100}function highlightit(cur2){if (cur2.filters.alpha.opacity<100)cur2.filters.alpha.opacity+=15else if(window.highting)clearInterval(highlighting)}</SCRIPT><a href="http://www.cnbruce.com/"><IMG onmouseover="this.style.filter='alpha(opacity=100)';high(this)" onmouseout="low(this)" src="http://www.fixdown.comhttp://www.fixdown.com/article/UploadPic/2006-1/200618112344826.gif" border="0"></a>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]5,还有图片的“黑白转彩色”运行代码框
<SCRIPT>function doTrans(filterCode) {imgObj.filters[0].apply();oImg.style.filter = filterCodeimgObj.filters[0].play();}</SCRIPT><SPAN id=imgObj onmouseleave='doTrans("gray")' style="FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); WIDTH: 1px" onmouseenter='doTrans("")'><IMG id=oImg style="FILTER: gray" src="http://www.fixdown.comhttp://www.fixdown.com/article/UploadPic/2006-1/200618112344826.gif"> </SPAN>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行] (出处:蓝色理想)大多数人在上网的时候,都会浏览网页提供给我们的信息。

温馨提示:喜欢本站的话,请收藏一下本站!

本类教程下载

系统下载排行