三零网 www.q3060.com -- 技术、分享、进步
当前位置: > 网络编程 > CSS/HTML > html5实例:相当漂亮的幻影特效的导航窗的综合应用代码

html5实例:相当漂亮的幻影特效的导航窗的综合应用代码

投稿:mmqxmq2p  发布时间:2018-01-01  【手机版】  人气:

导读:三零(q3060.com)小编琪琪接下来为你介绍一下关于综合应用的技巧,希望对您有帮助。那么下面我们一起看看,具体内容所述如下:

<html>
<title>相当漂亮的幻影效果的导航窗</title>
<body onLoad="initiate()">
<script LANGUAGE="JavaScript">
<!-- Beginning of JavaScript - 
// Your messages. Add as many as you like
var message=new Array()
message[0]="欢迎光临国内最大的新闻站点---新浪网!"
message[1]="欢迎光临国内综合网页特效站点---三零网!"
message[2]="欢迎光临国内最大的综合性站点---网易!"
message[3]="欢迎光临国内最大的搜索引擎站点---搜狐!"

// the URLs of your messages
var messageurl=new Array()
messageurl[0]="http://www.sina.com.cn/"
messageurl[1]="http://www.q3060.com/"
messageurl[2]="http://www.163.com/"
messageurl[2]="http://www.sohu.com/"

// the targets of the links
// accepted values are '_blank' or '_top' or '_parent' or '_self'
// or the name of your target-window (for instance 'main')
var messagetarget=new Array()
messagetarget[0]="_blank"
messagetarget[1]="_blank"
messagetarget[2]="_blank"

// the text of your links. In this sample it's the word 'more'
var linktext="去看看"
// font-size
var fntsize=11

// font-color
var fntcolor="FFFF00"

// font-family
var fntfamily="Verdana"

// font-weight: 1 means bold, 0 means normal
var fntweight=0

// standstill of each image(seconds)
var pause=3

var backgroundcolor="444444"

// horizontal position of the slideshow (distance to the left margin of the browser-window, pixels)
var posleft=5

// vertical position of the slideshow (distance to the top margin of the browser-window, pixels)
var postop=5

// width of the textbox (pixels)
var scrollerwidth=200

// height of the textbox (pixels)
var scrollerheight=150

// width of the border (pixels)
var scrollerborder=2

// width of the textpadding (pixels)
var textpadding=15

// do not edit the variables below
var textwidth=scrollerwidth-(2*textpadding)
var textcontent=""
var bgcontent=""
var I_message=0
var I_stepwave=0
var I_maxstepwave=20
pause=pause*1000
if (fntweight==1) {fntweight="700"}
else {fntweight="100"}

function initiate() {
gettextcontent()
getbgcontent()
if (document.all) {
wavemessage.innerHTML=textcontent
wavemessagebg.innerHTML=bgcontent
wavemessagebg.style.posLeft=posleft
wavemessagebg.style.posTop=postop
wavemessage.style.posLeft=posleft+textpadding
wavemessage.style.posTop=postop+textpadding
enlargewave()
}
if (document.layers) {
document.wavemessage.left=posleft+textpadding
document.wavemessage.top=postop+textpadding
document.wavemessagebg.document.write(bgcontent)
document.wavemessagebg.document.close()
document.wavemessagebg.left=posleft
document.wavemessagebg.top=postop
changemessage()
}
}

function enlargewave() {
if (I_stepwave<=I_maxstepwave) {
wavemessage.filters.wave.phase=I_stepwave
wavemessage.filters.wave.strength=I_stepwave
wavemessage.filters.wave.lightstrength=I_stepwave
wavemessage.filters.wave.freq=I_stepwave
I_stepwave++
var timer=setTimeout("enlargewave()",50)
}
else {
clearTimeout(timer)
changemessage()
}
}

function reducewave() {
if (I_stepwave>0) {
wavemessage.filters.wave.phase=I_stepwave
wavemessage.filters.wave.strength=I_stepwave
wavemessage.filters.wave.lightstrength=I_stepwave
wavemessage.filters.wave.freq=I_stepwave
I_stepwave--
var timer=setTimeout("reducewave()",50)
}
else {
clearTimeout(timer)
var timer=setTimeout("enlargewave()",pause)
}
}

function changemessage() { 
I_message++
if (I_message>=message.length) {I_message=0}
gettextcontent()

if (document.all) { 
wavemessage.innerHTML=textcontent
reducewave()
}

if (document.layers) {
document.wavemessage.document.write(textcontent)
document.wavemessage.document.close()
var timer=setTimeout("changemessage()",pause)
}

}

function gettextcontent() {
textcontent="<span style='font-size:"+fntsize+"pt;font-family:"+fntfamily+";font-weight:"+fntweight+";width:"+textwidth+"px'>"
textcontent+="<font color="+fntcolor+">"+message[I_message]+"</font> "
textcontent+="<a href="+messageurl[I_message]+" target="+messagetarget[I_message]+">"
textcontent+="<br><br><font color="+fntcolor+">"+linktext+"</font></a></span>"
}

function getbgcontent() {
bgcontent="<table width="+scrollerwidth+" height="+scrollerheight+" border="+scrollerborder+"><tr><td bgcolor="+backgroundcolor+">&nbsp;</td></tr></table>"
}

// - End of JavaScript - -->
</script> 
<div ID="wavemessagebg" style="position:absolute;">
</div>
<div ID="wavemessage" style="position:absolute; filter:wave()">
</div>
<div id="deletethisblock" style="position:absolute;top:5px;left:220px;">
</div> 
</body>
</html>

<p align="right">本特效由 <a href="http://www.q3060.com">三零网</a>丨 收集于互联网,只为兴趣与学习交流,不作商业用途。</p>

结语:以上就是分享给大家的综合应用内容了,希望大家多多支持三零网站。更多知识点,可以能过本站网页顶端的搜索或进入相关专题,如果有任何疑问都可以一起留言交流。

●【往下看,下一页更精彩】●
1  2  3  4  5  6  7  下一页 
延伸阅读:
·html5实例:CSS+JS实现的好玩的2D桌球游戏的综合应用代码
·html5实例:超简单的JS获取当前页面的网址的综合应用代码
·html5实例:JS动画测试:透明度渐变、位置移动、尺寸变化的综合应用代码
·html5实例:JS询问确认程序对话框,改进版的“你好”程序的综合应用代码
·html5实例:纯CSS代码表现一座漂亮的房子的特效的综合应用代码
·html5实例:非常不错的评分特效的综合应用代码
·html5实例:JS配合CSS实现的个性漂亮滚动条的综合应用代码
·html5实例:用一款按钮把输入框中一段英文的首字母全部大写的综合应用代码
·html5实例:漂亮的加入收藏夹和收藏到网摘特效的综合应用代码
·html5实例:颜色选择程序脚本,鼠标指向即显示颜色代码的综合应用代码
  
温馨提示:以上内容整理于网络,仅供参考,如果对您有帮助,请收藏本网站!
大家感兴趣的内容
最新的内容
热门搜索
三零网 | 网站地图| 最近更新 | 关于我们 | 联系方式 | |

Copyright © 2012-2020,Q3060.COM All Rights Reserved.