网页设计代码.txt对的时间遇见对的人是一生幸福;对的时间遇见错的人是一场心伤;错的时间遇见对的人是一段荒唐;错的时间遇见错的人是一声叹息。1.加细边框:
2.滚动文字:<MARQUEE onmouseover=this.stop() onmouseout=this.start() scrollDelay=200 direction=up >
</MARQUEE>
去除超链接下划线:<style>a{TEXT-DECORATION:none}</style>
<script type="text/javascript">linkSize();StartRollV();</script>
3.发光的文字:<HTMl>
<HEAD>
<TITLE>css demo</TITLE>
<meta content="text/html;charset=gb2312"http-equiv="Content-Type">
<script>
function zap(){//定义产生发光效果的函数
//如果已经在发光状态,则取消发光
if(myimg.abled==1){
myimg.abled=0;
}
//如果不发光,则开始发光
if(myimg.filters.blendTrans.status==0){
myimg.filters.blendTrans.apply();
myimg.abled=1
myimg.filters.blendTrans.play();
}
}
</script>
</HEAD>
<body bgcolor="#000000" text="#FF66CC">
<DIV id="myimg" onclick="zap()"
rtcscls-2-s_r_1 rtcscls-2-s_p_2 rtcscls-2-r_0 rtcscls-2-s_sn_9_rId_PlainText rtcscls-2-s_r_10_rId_PlainText rtcscls-2-s_sn_3_rId_Normal rtcscls-2-s_r_4_rId_Normal rtcscls-2-s_p_5_rId_Normal">blendTrans(duration=2);FONT-SIZE:35px;HEIGHT:200px;text-Align:center;">
发光的文字
</DIV>
</BODY>
</HTML>
4.BlendTrans 滤镜功能代码:
BlendTrans滤镜是页面设计代码CSS的高级滤镜之一,语法与一般滤镜类似:filter: BlendTrans(duration=秒数)
其中:duration是图片切换时间,以秒为单位。
实例:图片淡入淡出切换
思路:准备好互相淡入淡出切换的一组图片,图片尽量使用相同的尺寸。然后用Javascript给图片的相对路径定义数组,再将BlendTrans滤镜加载到各个图片切换的过程中。代码如下:
<head runat="server">
<title>图片淡入淡出切换</title>
<style type ="text/css" >
<!--
body{
background:#000000;
}
img{
filter:BlendTrans(duration=3); /*设置的转换时间为3秒*/
border:none;
}
-->
</style>
</head>
<body>
<script type ="text/javascript" >
function img1(x){ //获取数组记录数
this.length=x;
}
//说明数组并给数组元素赋值,也就是把图片的相对路径保存起来
//若是图片较多,可增加数组元素的个数
//本例使用了5张图片,所有数组元素个数为5
iname=new img1(5);
iname[0]="../photo/01.jpg";
iname[1]="../photo/02.jpg";
iname[2]="../photo/03.jpg";
iname[3]="../photo/04.jpg";
iname[4]="../photo/05.jpg";
var i=0;
function play1() //演示变换效果
{
if(i==4) i=0; //当进行到iname[4]时,返回iname[0]
else
i++;
tp.filters[0].apply(); //tp为图片的名字,在<img>标记中定义
tp.src=iname[i];
tp.filters[0].play();
mytimeout=setTimeout("play1()",4000);
//设置演示时间,以毫秒为单位,所以4000是指每张图片的演示时间为4秒
//这个时间值要大于滤镜中设置的转换时间值,如此在转换结束后还能停留一段时间,便于观察
}
</script>
<p><img src="../photo/01.jpg" name="tp" alt ="" /></p>
<script type ="text/javascript" >play1();</script>
</body>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论