在网页上怎么实现图片特效-ASP.NET教程-爱易网页

在网页上怎么实现图片特效

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

在网页上如何实现图片特效
在网页上添加4张图片，用div覆盖，然后实现淡出淡入特效，怎么搞啊

------解决方案--------------------
http://www.baidu.com/s?wd=asp.net+jquery+%CD%BC%C6%AC%B5%AD%C8%EB%B5%AD%B3%F6&rsv_bp=0&ch=&tn=monline_5_dg&bar=&rsv_spt=3&oq=asp.net+j&sug=asp.net+jquery&rsv_n=1&rsp=1&inputT=7360
哎
------解决方案--------------------
这些用JS 实现就可以了。
DIV 覆盖只要用 CSS控制就行了。

HTML code


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>图片的淡入淡出效果</title> 
<SCRIPT> 
var intTimeStep=20; 
var isIe=(window.ActiveXObject)?true:false; 
var intAlphaStep=(isIe)?5:0.05; 
var curSObj=null; 
var myobj=null;
var mypacity=null;
var curOpacity=null; 
function startObjVisible(objId) 
{ 
curSObj=document.getElementById(objId); 
setObjState(); 
} 
function setObjState(evTarget) 
{ 
if (curSObj.style.display==""){curOpacity=1;mypacity=0;setObjClose();} 
else{ 
if(isIe) 
{ 
curSObj.style.cssText='DISPLAY: none;Z-INDEX: 1; FILTER: alpha(opacity=0); POSITION: absolute;'; 
curSObj.filters.alpha.opacity=0; 
}else 
{ 
curSObj.style.opacity=0 ;
myobj.style.opacity=1;
} 
curSObj.style.display=''; 
document.getElementById("MyDiv").style.display="none";
curOpacity=0; 
mypacity=1;
setObjOpen(); 
} 
} 
function setObjOpen() 
{ 
if(isIe) 
{ 
curSObj.filters.alpha.opacity+=intAlphaStep; 
if (curSObj.filters.alpha.opacity<100) setTimeout('setObjOpen()',intTimeStep); 
}else{ 
curOpacity+=intAlphaStep; 
curSObj.style.opacity =curOpacity; 
if (curOpacity<1) setTimeout('setObjOpen()',intTimeStep); 
} 
} 
function setObjClose() 
{ 
if(isIe) 
{ 
curSObj.filters.alpha.opacity-=intAlphaStep; 
if (curSObj.filters.alpha.opacity>0) { 
setTimeout('setObjClose()',intTimeStep);} 
else {curSObj.style.display="none";document.getElementById("MyDiv").style.display="block";} 
}else{ 
curOpacity-=intAlphaStep; 
if (curOpacity>0) { 
curSObj.style.opacity =curOpacity; 
setTimeout('setObjClose()',intTimeStep);} 
else {curSObj.style.display='none';document.getElementById("MyDiv").style.display="block";} 
} 
} 
</SCRIPT> 
</head> 
<body> 
<table width=80%><tr><td><input type=button onClick="startObjVisible('objDiv');if(this.value=='点击展现'){this.value='点击隐藏'}else{this.value='点击展现'}" value="点击展现"></td> 
</tr> 
<tr><td><DIV id="objDiv" style="DISPLAY: none;"> 
<img src="/jscss/demoimg/logo_demo1.gif">效果怎么样？<img src="/jscss/demoimg/logo_demo1.gif"></DIV>
<DIV id="MyDiv" style="DISPLAY:block;"><img src="/jscss/demoimg/logo_demo1.gif">文字也会跟着变哟！<img src="/jscss/demoimg/logo_demo1.gif"></DIV>
</td></tr> 
</table> 
</body>
</html>

------解决方案--------------------
js搞定网上有很多

------解决方案--------------------

去搜一个Jquery gallery插件。。。


easing这个Jquery库可以做很多效果。。。

------解决方案--------------------
用css层把

------解决方案--------------------
www.open-lib.com

------解决方案--------------------
http://www.open-lib.com/Type/146-1.jsp

------解决方案--------------------
网上找找哈，

------解决方案--------------------
网上是很多那，一般都是用js实现的。用jquery的话会更方便点

------解决方案--------------------

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

在网页上怎么实现图片特效

相关资料更多>

推荐阅读更多>