`
jinyike
  • 浏览: 28488 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

页面特效——JavaScript经典效果

阅读更多
//脚本1:进入主页以后自动播放声音
<embed src="pnm://10.13.31.90/~kayvin/mihunji.rm" hidden=true autostart=true loop=true>

//脚本2:进入主页后自动最大话,省的去在自己单击了
<script>
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
</script>

//脚本3:显示现在时间的脚本
<script language=vbscript>document.write now</script>

//脚本4:显示最后修改时间的脚本
<script>document.write(document.lastModified)</script>

//脚本5:设为首页,加为收藏,加入频道,启动outlook发信
<a style="cursor:hand" 
onclick="this.style.behavior="url(#default#homepage)";
this.setHomePage(http://10.13.31.90/~kayvin/);">">设为首页< /a>

<a style="cursor:hand"
onclick="window.external.AddFavorite(location.href,document.title);"& gt;加入收藏</a>

<a href="/javascript:window.external.addChannel"("typhoon.cdf")>加入频道< /a>

<a href="mailtkayvin@sohu.com">与我联系</a>

//脚本6:状态栏动态显示现在时间
<script>
function see(){
window.setTimeout("see()",1000);
today = new Date();
self.status = today.toString();
}
</script>
<body onload=see()>

//脚本7:关闭窗口的脚本
<a href="/javascript:close"()>[关闭窗口]</a>

//脚本8:按下F12键,直接返回首页
<script>function look(){
if(event.keyCode==123){document.location.href=http://10.13.31.90/~kayvin/}
}
if(document.onkeydown==null)
{document.onkeydown=look}
</script>

//脚本9:后退,刷新,前进
<input type=button value=后退 onclick=history.go(-1)>

<input type=button value=刷新 onclick=history.go(-0)>

<input type=button value=前进 onclick=history.go(+1)>

//脚本10:设定时间弹出窗口,4000=4秒,当然你可以自定义
<script>function l()
{
window.open(" 10.13.31.90/~kayvin/ ","name","width=500,height=150,border=0")
}
setTimeout("l()",4000)

</script>

//二 鼠标旁边的提示信息,类似与163登录后的页面提示效果

<a href="#" title="这是提示">tip</a>
<script Language="JavaScript">
//***********默认设置定义.*********************
tPopWait=50; //停留tWait豪秒后显示提示。
tPopShow=5000;//显示tShow豪秒后关闭提示
showPopStep=20;
popOpacity=99;
//***************内部变量定义*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;
document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText { background-color: #F8F8F5;color:#000000; border: 1px #000000 solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");

function showPopupText(){
var o=event.srcElement;
MouseX=event.x;
MouseY=event.y;
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
if(o.dypop!=sPop) {
sPop=o.dypop;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting);
if(sPop==null || sPop=="") {
dypopLayer.innerHTML="";
dypopLayer.style.filter="Alpha()";
dypopLayer.filters.Alpha.opacity=0;
}
else {
if(o.dyclass!=null) popStyle=o.dyclass
else popStyle="cPopText";
curShow=setTimeout("showIt()",tPopWait);
}
}
}
function showIt(){
dypopLayer.className=popStyle;
dypopLayer.innerHTML=sPop;
popWidth=dypopLayer.clientWidth;
popHeight=dypopLayer.clientHeight;
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
else popLeftAdjust=0;
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
else popTopAdjust=0;
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
dypopLayer.style.filter="Alpha(Opacity=0)";
fadeOut();
}
function fadeOut(){
if(dypopLayer.filters.Alpha.opacity<popOpacity) {
dypopLayer.filters.Alpha.opacity+=showPopStep;
tFadeOut=setTimeout("fadeOut()",1);
}
else {
dypopLayer.filters.Alpha.opacity=popOpacity;
tFadeWaiting=setTimeout("fadeIn()",tPopShow);
}
}
function fadeIn(){
if(dypopLayer.filters.Alpha.opacity>0) {
dypopLayer.filters.Alpha.opacity-=1;
tFadeIn=setTimeout("fadeIn()",1);
}
}
document.onmouseover=showPopupText;
</script>

三 如果文字过长,则将过长的部分变成省略号显示
<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;
overflow: hidden; text-overflow:ellipsis">
<NOBR>就是比如有一行文字,很长,表格内一行显示不下.</NOBR>
</DIV>

四 滚动的图片
<script language="javascript">
imgArr=new Array()
imgArr[0]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
imgArr[1]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
imgArr[2]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
imgArr[3]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
imgArr[4]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
var moveStep=4        //步长,单位:pixel
var moveRelax=100    //移动时间间隔,单位:ms
ns4=(document.layers)?true:false
var displayImgAmount=4    //视区窗口可显示个数
var divWidth=220    //每块图片占位宽
var divHeight=145    //每块图片占位高
var startDnum=0
var nextDnum=startDnum+displayImgAmount
var timeID
var outHover=false
var startDivClipLeft
var nextDivClipRight
function initDivPlace(){
if (ns4){
for (i=0;i<displayImgAmount;i++){
eval("document.divOuter.document.divAds"+i+".left="+divWidth*i)
}
for (i=displayImgAmount;i<imgArr.length;i++){
eval("document.divOuter.document.divAds"+i+".left="+divWidth*displayImgAmount)
}
}else{
for (i=0;i<displayImgAmount;i++){
eval("document.all.divAds"+i+".style.left="+divWidth*i)
}
for (i=displayImgAmount;i<imgArr.length;i++){
  eval("document.all.divAds"+i+".style.left="+divWidth*displayImgAmount)
}
}
}
function mvStart(){
timeID=setTimeout(moveLeftDiv,moveRelax)
}
function mvStop(){
clearTimeout(timeID)
}
function moveLeftDiv(){
if (ns4){
for (i=0;i<=displayImgAmount;i++){
eval("document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left=document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left-moveStep")
}
startDivClipLeft=parseInt(eval("document.divOuter.document.divAds"+startDnum+".clip.left"))
nextDivClipRight=parseInt(eval("document.divOuter.document.divAds"+nextDnum+".clip.right"))
if (startDivClipLeft+moveStep>divWidth){
eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+divWidth)
eval("document.divOuter.document.divAds"+startDnum+".left="+divWidth*displayImgAmount)
eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".left=document.divOuter.document.divAds"+nextDnum+".left+"+divWidth)
eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".clip.left=0")
startDnum=(++startDnum)%imgArr.length
nextDnum=(startDnum+displayImgAmount)%imgArr.length
startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
}else{
eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0")
startDivClipLeft+=moveStep
nextDivClipRight+=moveStep
}
eval("document.divOuter.document.divAds"+startDnum+".clip.left="+startDivClipLeft)
eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+nextDivClipRight)
}else{
for (i=0;i<=displayImgAmount;i++){
eval("document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.left=document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.pixelLeft-moveStep")
}
startDivClipLeft=parseInt(eval("document.all.divAds"+startDnum+".currentStyle.clipLeft"))
nextDivClipRight=parseInt(eval("document.all.divAds"+nextDnum+".currentStyle.clipRight"))
if (startDivClipLeft+moveStep>divWidth){
eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+divWidth+","+divHeight+",0"+")'")
eval("document.all.divAds"+startDnum+".style.left="+divWidth*displayImgAmount)
eval("document.all.divAds"+parseInt((nextDnum+1)%imgArr.length)+".style.left=document.all.divAds"+nextDnum+".style.pixelLeft+"+divWidth)
startDnum=(++startDnum)%imgArr.length
nextDnum=(startDnum+displayImgAmount)%imgArr.length
startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
}else{
startDivClipLeft+=moveStep
nextDivClipRight+=moveStep
}
eval("document.all.divAds"+startDnum+".style.clip='rect(0,"+divWidth+","+divHeight+","+startDivClipLeft+")'")
eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+nextDivClipRight+","+divHeight+",0)'")
}
if (outHover){
mvStop()
}else{
mvStart()
}
}
function writeDivs(){
if (ns4){
document.write("<ilayer name=divOuter width=750 height="+divHeight+">")
for (i=0;i<imgArr.length;i++){
document.write("<layer name=divAds"+i+">")
document.write(imgArr[i]+" ")
document.write("</layer>")
}
document.write("</ilayer>")
document.close()
for (i=displayImgAmount;i<imgArr.length;i++){
eval("document.divOuter.document.divAds"+i+".clip.right=0")
}
}else{
document.write("<div id=divOuter style='position:relative' width=750 height="+divHeight+">")
for (i=0;i<imgArr.length;i++){
document.write("<div id=divAds"+i+" style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'>")
document.write(imgArr[i]+" ")
document.write("</div>")
}
document.write("</div>")
for (i=displayImgAmount;i<imgArr.length;i++){
eval("document.all.divAds"+i+".style.clip='rect(0,0,"+divHeight+",0)'")
}
}
}
</script>
<BODY onload=javascript:mvStart()>
<SCRIPT language=javascript>writeDivs();initDivPlace();</SCRIPT> 

五 类似与QQ的好友/黑名单之类的树型菜单_极品
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script>
if (!document.getElementById)
document.getElementById = function() { return null; }
function initializeMenu(menuId, actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);
if (menu == null || actuator == null) return;
//if (window.opera) return; // I'm too tired
actuator.parentNode.style.backgroundImage = "url(/images/plus.gif)";
actuator.onclick = function() {
var display = menu.style.display;
this.parentNode.style.backgroundImage =
(display == "block") ? "url(/images/plus.gif)" : "url(/images/minus.gif)";
menu.style.display = (display == "block") ? "none" : "block";
return false;
}
}
window.onload = function() {
initializeMenu("productsMenu", "productsActuator");
initializeMenu("newPhonesMenu", "newPhonesActuator");
initializeMenu("compareMenu", "compareActuator");
}
</script>
<style>
body {
font-family: verdana, helvetica, arial, sans-serif;
}
#mainMenu {
background-color: #EEE;
border: 1px solid #CCC;
color: #000;
width: 203px;
}
#menuList {
margin: 0px;
padding: 10px 0px 10px 15px;
}
li.menubar {
background: url(/images/plus.gif) no-repeat 0em 0.3em;
font-size: 12px;
line-height: 1.5em;
list-style: none outside;
}
.menu, .submenu {
display: none;
margin-left: 15px;
padding: 0px;
}
.menu li, .submenu li {
background: url(/images/square.gif) no-repeat 0em 0.3em;
list-style: none outside;
}
a.actuator {
background-color: transparent;
color: #000;
font-size: 12px;
padding-left: 15px;
text-decoration: none;
}
a.actuator:hover {
text-decoration: underline;
}
.menu li a, .submenu li a {
background-color: transparent;
color: #000;
font-size: 12px;
padding-left: 15px;
text-decoration: none;
}
.menu li a:hover, submenu li a:hover {
/*border-bottom: 1px dashed #000;*/
text-decoration: underline;
}
span.key {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="mainMenu">
<ul id="menuList">

网页特效、JavaScript经典效果

www.firnow.com    时间 : 2007-09-07  作者:佚名   编辑:本站 点击:  684 [ 评论 ]
-
-
/><li class="menubar">
<a href="#" id="productsActuator" class="actuator">图秀地带收藏夹</a>
<ul id="productsMenu" class="menu">
<li>
<a href="#" id="newPhonesActuator" class="actuator">我的好友</a>
<ul id="newPhonesMenu" class="submenu">
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001"> 张三[10000001]</a></li>
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001"> 李四[10000002]</a></li>
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001"> 张三[10000001]</a></li>
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001"> 李四[10000002]</a></li>
</ul>
</li>
<li>
<a href="#" id="compareActuator" class="actuator">陌生人</a>
<ul id="compareMenu" class="submenu">
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001"> 张三[10000001]</a></li>
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001"> 李四[10000002]</a></li>
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001"> 张三[10000001]</a></li>
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001"> 李四[10000002]</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</BODY>
</HTML>
六 漂亮的脚本日历

<Script LANGUAGE="JavaScript">
var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二");
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);
var days = new Array("日","一", "二", "三","四", "五", "六");
var classTemp;
var today=new getToday();
var year=today.year;
var month=today.month;
var newCal;
function getDays(month, year) {
if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) ||(0 == year % 400) ? 29 : 28;
else return daysInMonth[month];
}
function getToday() {
this.now = new Date();
this.year = this.now.getFullYear();
this.month = this.now.getMonth();
this.day = this.now.getDate();
}
function Calendar() {
newCal = new Date(year,month,1);
today = new getToday();
var day = -1;
var startDay = newCal.getDay();
var endDay=getDays(newCal.getMonth(), newCal.getFullYear());
var daily = 0;
if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))
{
day = today.day;
}
var caltable = document.all.caltable.tBodies.calendar;
var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());
for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++)
for (var intDay = 0;intDay < caltable.rows[intWeek].cells.length;intDay++)
{
var cell = caltable.rows[intWeek].cells[intDay];
var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1);
if ((intDay == startDay) && (0 == daily)){ daily = 1;}
var daytemp=daily<10?("0"+daily):(daily);
var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">";
if(day==daily) cell.className="DayNow";
else if(intDay==6) cell.className = "DaySat";
else if (intDay==0) cell.className ="DaySun";
else cell.className="Day";
if ((daily > 0) && (daily <= intDaysInMonth))
{
cell.innerText = daily;
daily++;
} else
{
cell.className="CalendarTD";
cell.innerText = "";
}
}
document.all.year.value="/year;
document.all.month.value=month+1;
}
function" subMonth()
{
if ((month-1)<0)
{
month=11;
year=year-1;
} else
{
month=month-1;
}
Calendar();
}
function addMonth()
{
if((month+1)>11)
{
month=0;
year=year+1;
} else
{
month=month+1;
}
Calendar();
}
function setDate()
{
if (document.all.month.value<1||document.all.month.value>12)
{
alert(" 月的有效范围在1-12之间!");
return;
}
year=Math.ceil(document.all.year.value);
month=Math.ceil(document.all.month.value-1);
Calendar();
}
</Script>
<Script>
function buttonOver()
{
var obj = window.event.srcElement;
obj.runtimeStyle.cssText = "background-color:#FFFFFF";
// obj.className="Hover";
}
function buttonOut()
{
var obj = window.event.srcElement;
window.setTimeout(function(){obj.runtimeStyle.cssText = "";},300);
}
</Script>
<Style>
Input {font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000;}
.Calendar {font-family: verdana;text-decoration: none;width: 170;background-color: #C0D0E8;font-size: 9pt;border:0px dotted #1C6FA5;}
.CalendarTD {font-family: verdana;font-size: 7pt;color: #000000;background-color:#f6f6f6;height: 20px;width:11%;text-align: center;}
.Title {font-family: verdana;font-size: 11pt;font-weight: normal;height: 24px;text-align: center;color: #333333;text-decoration: none;background-color: #A4B9D7;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-bottom-style:1px;border-top-color: #999999;border-right-color: #999999;border-bottom-color: #999999;border-left-color: #999999;}
.Day {font-family: verdana;font-size: 7pt;color:#243F65;background-color: #E5E9F2;height: 20px;width:11%;text-align: center;}
.DaySat {font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}
.DaySun {font-family: verdana;font-size: 7pt;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}
.DayNow {font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;background-color: #FFFFFF;height: 20px;text-align: center;}
.DayTitle {font-family: verdana;font-size: 9pt;color: #000000;background-color: #C0D0E8;height: 20px;width:11%;text-align: center;}
.DaySatTitle {font-family: verdana;font-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 20px;width: 12%;}
.DaySunTitle {font-family: verdana;font-size: 9pt;color: #FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 20px;width: 12%;}
.DayButton {font-family: Webdings;font-size: 9pt;font-weight: bold;color: #243F65;cursor:hand;text-decoration: none;}
</Style>
<table border="0" cellpaddin 

网页特效、JavaScript经典效果

www.firnow.com    时间 : 2007-09-07  作者:佚名   编辑:本站 点击:  685 [ 评论 ]
-
-
g="0" cellspacing="1" class="Calendar" id="caltable">
<thead>
<tr align="center" valign="middle">
<td colspan="7" class="Title">
<a href="javaScript:subMonth();" title="上一月" Class="DayButton">3</a> <input name="year" type="text" size="4" maxlength="4" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 年 <input name="month" type="text" size="1" maxlength="2" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 月 <a href="JavaScript:addMonth();" title="下一月" Class="DayButton">4</a>
</td>
</tr>
<tr align="center" valign="middle">
<Script LANGUAGE="JavaScript">
document.write("<TD class=DaySunTitle id=diary >" + days[0] + "</TD>");
for (var intLoop = 1; intLoop < days.length-1;intLoop++)
document.write("<TD class=DayTitle id=diary>" + days[intLoop] + "</TD>");
document.write("<TD class=DaySatTitle id=diary>" + days[intLoop] + "</TD>");
</Script>
</TR>
</thead>
<TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()">
<Script LANGUAGE="JavaScript">
for (var intWeeks = 0; intWeeks < 6; intWeeks++)
{
document.write("<TR style='cursor:hand'>");
for (var intDays = 0; intDays < days.length;intDays++) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>");
document.write("</TR>");
}
</Script>
</TBODY>
</TABLE>
<Script  LANGUAGE="JavaScript">
Calendar();
</Script>
七 进入,退出页面的各种效果!

进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
这个是页面被载入和调出时的一些特效。duration表示特效的持续时间,以秒为单位。 transition表示使用哪种特效,取值为1-23:
  0 矩形缩小
  1 矩形扩大
  2 圆形缩小
  3 圆形扩大
  4 下到上刷新
  5 上到下刷新
  6 左到右刷新
  7 右到左刷新
  8 竖百叶窗
  9 横百叶窗
  10 错位横百叶窗
  11 错位竖百叶窗
  12 点扩散
  13 左右到中间刷新
   14 中间到左右刷新
  15 中间到上下
  16 上下到中间
  17 右下到左上
  18 右上到左下
   19 左上到右下
  20 左下到右上
  21 横条
  22 竖条
  23 以上22种随机选择一种

八 很酷的效果,表格被选中背景会变颜色
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<html>
<head>
</head>
<title>Mapabc 地图无限</title>
<script language="JavaScript">
var searchResult=new Array();//鼠标滑过时显示背景色
function borderize(what,color,color2)
{
what.style.borderColor=color
what.style.backgroundColor=color2
}
function borderize_on(e){
if (document.all)
source3=event.srcElement
else if (document.getElementById)
source3=e.target
if (source3.className=="zuo22"){
borderize(source3,"#999999","#F6F6F8")
}
else{
while(source3.tagName!="TABLE"){
source3=document.getElementById? source3.parentNode : source3.parentElement
if (source3.className=="zuo22")
borderize(source3,"#999999","#F6F6F8")
}
}
}
function borderize_off(e){
if (document.all)
source4=event.srcElement
else if (document.getElementById)
source4=e.target
if (source4.className=="zuo22")
borderize(source4,"white","white")
else{
while(source4.tagName!="TABLE"){
source4=document.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="zuo22")
borderize(source4,"white","white")
}
}
}
</script>
<body >
<table width="96%" border="0" onMouseOver="borderize_on(event)" onMouseOut="borderize_off(event)" class="zuo22" onclick="javascript:clickfun('123')">
<TR>
<TD> 把鼠标移过来</TD>
<TD>把鼠标移过来</TD>
</TR>
<TR>
<TD> 把鼠标移过来</TD>
<TD>把鼠标移过来</TD>
</TR>
<TR>
<TD> 把鼠标移过来</TD>
<TD>把鼠标移过来</TD>
</TR>
<TR>
<TD> 把鼠标移过来</TD>
<TD>把鼠标移过来</TD>
</TR>
</table>
</body>
</html>
九 DIV_圆边圆角的实现:

<html xmlns:v>
<head>
<style>
v\:*{behavior: url(#default#VML);}
</style>
</head>
<body>
<v:roundRect style="position:absolute;left:20px;top:50px;width:200px;height:140px;" FillColor="#AAEAFA" Filled="T" />
</body>

十 跳动的菜单(类似FLASH效果,酷):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 模仿as效果的导航菜单</title>
<style type="text/css">
<!--
a:link,a:visited    { text-decoration: none; color: #666666 }
a:hover            { text-decoration: underline }
#hor1 {
position:absolute;
left:320px;
top:20px;
width:220px;
height:20px;
z-index:1;
background-color: #999900;
}
#hor2 {
position:absolute;
left:320px;
top:40px;
width:220px;
height:20px;
z-index:2;
background-color: #FFCC00;
}
#hor3 {
position:absolute;
left:320px;
top:60px;
width:220px;
height:20px;
z-index:3;
background-color: #99CC00;
}
#board1 {
position:absolute;
left:320px;
top:40px;
width:220px;
height:120px;
z-index:-100;
background-color: #333333;
visibility: hidden;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
}
body {
background-color: #666666;
}
#board2 {
position:absolute;
left:320px;
top:60px;
width:220px;
height:120px;
z-index:-90;
background-color: #333333;
visibility: hidden;
}
#board3 {
position:absolute;
width:220px;
height:120px;
z-index:-80;
left: 320px;
top: 80px;
background-color: #333333;
visibility: hidden;
}
#hor4 {
position:absolute;
left:320px;
top:80px;
width:220px;
height:20px;
z-index:4;
background-color: #99CCCC;
}
#board4 {
position:absolute;
left:320px;
top:100px;
width:220px;
height:120px;
z-index:-70;
background-color: #333333;
visibility: hidden;
}
-->
</style>
<script type="text/javas

网页特效、JavaScript经典效果

www.firnow.com    时间 : 2007-09-07  作者:佚名   编辑:本站 点击:  686 [ 评论 ]
-
-
cript">
lastNo=0
function re(menu_no){
if(lastNo!=menu_no){
cur=menu_no+1
lastNo=menu_no
rest()
}else{
cur=100
}
document.getElementById("board"+menu_no).style.visibility="visible"
}
function rest(){
for(i=1;i<=4;i++){
document.getElementById("hor"+i).style.top=20*i;
document.getElementById("board"+i).style.visibility="hidden"
}
menu_num=4;
act=1
height=120+20
speed=0;
posY=0;
}
function huke(){
if(act==1&&cur<100){
speed=(height-posY)*0.69+speed*0.6
posY+=speed
for(i=cur;i<=menu_num;i++){
document.getElementById("hor"+i).style.top=posY+(i-2)*20
}
if(Math.abs(height-posY)<0.5){
for(i=cur;i<=menu_num;i++){
document.getElementById("hor"+i).style.top=height+(i-2)*20
}
act=0
}
setTimeout("huke()",50)
}
}
</script>
</head>
<body>
<div id="hor1" onclick="re(1);huke()">News</div>
<div id="hor2" onclick="re(2);huke()">Populor</div>
<div id="hor3" onclick="re(3);huke()">Sports</div>
<div id="hor4" onclick="re(4);huke()">Woman</div>
<div id="board1">1.由AS而想起Javascript<br />2.用Jscript写ASP有没有先天性的不足?<br />3.没有了。</div>
<div id="board2">1.xhtml+css真的来了吗?<br />2.Flash取代传统网站<br />3.Flash何时才能连接数据库?</div>
<div id="board3">1.程序员与小姐的10个相同。<br />2.中国的程序员与中国的足球?</div>
<div id="board4">1.二十一世纪最缺的是什么?人才<br />
<a href="http://www.gamvan.com" target="_blank">http://www.gamvan.com</a>
<a href="http://www.gamvan.com" target="_blank">http://www.gamvan.com</a></div>
</body>
</html>
十一 客户端静态页面玩分页:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
* {
font-size:10.2pt;
font-family:tahoma;
line-height:150%;
}
.divContent
{
border:1px solid red;
background-color:#FFD2D3;
width:500px;
word-break:break-all;
margin:10px 0px 10px;
padding:10px;
}
</style>
</HEAD>
<BODY>
header
<div id="divPagenation"></div>
<div id="divContent"></div>
footer
<SCRIPT LANGUAGE="JavaScript">
<!--
s="<p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p>";
function DHTMLpagenation(content) { with (this)
{
// client static html file pagenation
this.content=content;
this.contentLength=content.length;
this.pageSizeCount;
this.perpageLength=100; //default perpage byte length.
this.currentPage=1;
//this.regularExp=/.+[\?\&]{1}page=(\d+)/;
this.regularExp=/\d+/;
this.divDisplayContent;
this.contentStyle=null;
this.strDisplayContent="";
this.divDisplayPagenation;
this.strDisplayPagenation="";
arguments.length==2?perpageLength=arguments[1]:'';
try {
divExecuteTime=document.createElement("DIV");
document.body.appendChild(divExecuteTime);
}
catch(e)
{
}
if(document.getElementById("divContent"))
{
divDisplayContent=document.getElementById("divContent");
}
else
{
try
{
divDisplayContent=document.createElement("DIV");
divDisplayContent.id="divContent";
document.body.appendChild(divDisplayContent);
}
catch(e)
{
return false;
}
}
if(document.getElementById("divPagenation"))
{
divDisplayPagenation=document.getElementById("divPagenation");
}
else
{
try
{
divDisplayPagenation=document.createElement("DIV");
divDisplayPagenation.id="divPagenation";
document.body.appendChild(divDisplayPagenation);
}
catch(e)
{
return false;
}
}
DHTMLpagenation.initialize();
return this;
}};
DHTMLpagenation.initialize=function() { with (this)
{
divDisplayContent.className=contentStyle!=null?contentStyle:"divContent";
if(contentLength<=perpageLength)
{
strDisplayContent=content;
divDisplayContent.innerHTML=strDisplayContent;
return null;
}
pageSizeCount=Math.ceil((contentLength/perpageLength));
DHTMLpagenation.goto(currentPage);
DHTMLpagenation.displayContent();
}};
DHTMLpagenation.displayPage=function() { with (this)
{
strDisplayPagenation="分页:";
if(currentPage&&currentPage!=1)
strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.previous()">上一页</a>&nbsp;& nbsp;';
else
strDisplayPagenation+="上一页&nbsp;&nbsp;";
for(var i=1;i<=pageSizeCount;i++)
{
if(i!=currentPage)
strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+'</a>&nbsp;&nbsp;';
else
strDisplayPagenation+=i+"&nbsp;&nbsp;";
}
if(currentPage&&currentPage!=pageSizeCount)
strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一页</a>&nbsp;&nbsp;';
else
strDisplayPagenation+=" 下一页&nbsp;&nbsp;";
strDisplayPagenation+="共 " + pageSizeCount + " 页,每页" + perpageLength + " 字符,调整字符数:<input type='text' value='"+perpageLength+"' id='ctlPerpageLength'><input type='button' value='确定' onclick='DHTMLpagenation.change(document.getElementById(\"ctlPerpageLength\").value);'>";
divDisplayPagenation.innerHTML=strDisplayPagenation;/>}};
DHTMLpagenation.previous=function() { with(this)
{
DHTMLpagenation.goto(currentPage-1);
}};
DHTMLpagenation.next=function() { with(this)
{
DHTMLpagenation.goto(currentPage+1);
}};
DHTMLpagenation.goto=function(iCurrentPage) { with (this)
{
startime=new Date();
if(regularExp.test(iCurrentPage))
{
currentPage=iCurrentPage;
strDisplayContent=content.substr((currentPage-1)*perpageLength,perpageLength);
}
else
{
alert("page parameter error!");
}
DHTMLpagenation.displayPage();
DHTMLpagenation.displayContent();
}};
DHTMLpagenation.displayContent=function() { with (this)
{
divDisplayContent.innerHTML=strDisplayContent;
}};
DHTMLpagenation.change=function(iPerpageLength) { with(this)
{
if(regularExp.test(iPerpageLength))
{
DHTMLpagenation.perpageLength=iPerpageLength;
DHTMLpagenation.currentPage=1;
DHTMLpagenation.initialize();
}
else
{
alert(" 请输入数字");
}
}};
// method
// DHTMLpagenation(strContent,perpageLength)
DHTMLpagenation(s,100);
//-->
</SCRIPT>
</BODY>
</HTML>
十二 运行代码的代码:


<script>
function Preview()
{
var TestWin=open('');
TestWin.document.write(code.value);
}
</script>
<textarea id=code cols=60 rows=15>在这里输入代码</textarea>
<br>
<button onclick=Preview() >运行</button>
13、Yi人社区随机变换的广告图片

<SCRIPT language=JavaScript>
<!-- // BannerAD
var bannerAD=new Array();
var bannerADlink=new Array();
var adNum=0;
bannerAD[0]="http://www.94er.cn/photo/top1.gif";
bannerADlink[0]="#";
bannerAD[1]="http://www.94er.cn/photo/top2.gif";
bannerADlink[1]="#";
bannerAD[2]="http://www.94er.cn/photo/top3.gif";
bannerADlink[2]="#";
bannerAD[3]="http://www.94er.cn/photo/top4.gif";
bannerADlink[3]="#";
var preloadedimages=new Array();
for (i=1;i<bannerAD.length;i++){
preloadedimages[i]=new Image();
preloadedimages[i].src="/bannerAD[i]";
}
function setTransition(){
if (document.all){
bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
bannerADrotator.filters.revealTrans.apply();
}
}
function playTransition(){
if (document.all)
bannerADrotator.filters.revealTrans.play()
}
function nextAd(){
if(adNum<bannerAD.length-1)adNum++ ;
else adNum=0;
setTransition();
document.images.bannerADrotator.src="/bannerAD[adNum]";
playTransition();
theTimer=setTimeout("nextAd()", 5000);
}
function jump2url(){
jumpUrl=bannerADlink[adNum];
jumpTarget='_blank';
if (jumpUrl != ''){
if (jumpTarget != '')window.open(jumpUrl,jumpTarget);
else location.href="/jumpUrl";
}
}
function displayStatusMsg() {
status=bannerADlink[adNum];
document.returnValue = true;
}
//-->
</SCRIPT>
<td align="center" valign="top" bgcolor="#FFFFFF"><A onmouseover="displayStatusMsg();return document.returnValue"
href="javascript:jump2url()"><IMG
style="FILTER: revealTrans(duration=2,transition=20)" height=142
src="" width=573 border=0 name=bannerADrotator></A><SCRIPT language=JavaScript>nextAd()</SCRIPT></td>

14、凹陷文字
<div style="width:300px;padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all; font-size:12px; line-height:18px; background-color:#eeeeee;">
<font disabled>
<a href="http://xoyoer.94er.cn/" target="_blank">小夜</a>BLOG:xoyoer.94er.cn<br>
这个效果很漂亮吧?<br>
你不想试试吗?<br>
<a href="http://xoyoer.94er.cn/">www.lenvo.cn</a></font>
</div>
15、漂亮的仿flash菜单


<style>
/* 先把这个 xmenu 的样式放到css里 */
.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;}
</style>
<script>
/*
http://lexrus.blueidea.com
这是把事件动作绑定到菜单上的函数
*/
function attachXMenu(objid){
var tds=objid.getElementsByTagName('td');
for(var i=0;i<tds.length;i++){
with(tds[i]){
onmouseover=function(){
with(this){
filters[0].apply();
style.background='#66CCFF'; //这是鼠标移上去时的背景颜色
style.border='1px solid #ffffff'; //边框
style.color='black'; //文字颜色
filters[0].play();
}
}
onmouseout=function(){
with(this){
filters[0].apply();
style.background='#336699'; //这是鼠标离开时的背景颜色
style.border='1px solid #336699'; //边框
style.color='#ffffff'; //文字颜色
filters[0].play();
}
}
}
}
}
</script>
<!-- 菜单从这里开始, 注意要把class设置成和css里相同的, 还要为它设一个id-->
<table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center">
<tr>
<td><a href="http://xoyoer.94er.cn/">xoyoer.94er.cn</a></td>
<td> 小</td>
<td>夜</td>
<td>的</td>
<td> 博</td>
<td>客</td>
</tr>
</table>
<script>attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是那个table的id</script>
<br><br><br><br>
<!-- 下面这个是竖排的-->
<table class="xmenu" id="xmenu1" width="100" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center">
<tr><td>My</td></tr>
<tr><td>Name</td></tr>
<tr><td>Is</td></tr>
<tr><td>xoyoer</td></tr>
</table>
<script>attachXMenu(xmenu1);</script>
16、自定义容器和字体大小


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Home</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="The Man in Blue" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css" media="all">
body
{
margin: 1em;
text-align: cente

网页特效、JavaScript经典效果

www.firnow.com    时间 : 2007-09-07  作者:佚名   编辑:本站 点击:  688 [ 评论 ]
-
-
r;
font-family: Arial, Helvetica, sans-serif;
}
body *
{
margin: 0;
}
#content
{
padding: 1em;
background-color: #BBDDFF;
background-image: url(/column_bg.gif);
background-repeat: repeat-y;
background-position: 30em 0;
text-align: left;
}
#content p
{
margin-bottom: 1em;
}
#footer
{
margin-top: 1em;
padding: 1em;
background-color: #0066CC;
text-align: left;
}
#footer a
{
color: #FFFFFF;
}
#header
{
margin-bottom: 1em;
padding: 1em;
background-color: #0066CC;
color: #FFFFFF;
text-align: left;
}
#leftContent
{
padding-right: 10em;
}
#options
{
margin-bottom: 1em;
text-align: right;
}
#options a
{
color: #000000;
}
#rightContent
{
float: right;
width: 8em;
}
#widthContainer
{
font-size: 0.8em;
width: 40em;
margin: auto;
}
.clearer
{
clear: both;
}
</style>
<script type="text/javascript">
<!--
function scaleWidth()
{
var optimalLineLength = "35em";
var extraAccounting = "12em";
var minimumTextHeight = "10px";
var windowWidth = document.body.clientWidth;
var optimalSize = windowWidth / (parseInt(optimalLineLength) + parseInt(extraAccounting));
if (optimalSize >= parseInt(minimumTextHeight))
{
document.body.style.fontSize = optimalSize + "px";
}
else
{
document.body.style.fontSize = parseInt(minimumTextHeight) + "px";
}
return true;
}
function textSize(size)
{
var theContainer = document.getElementById("widthContainer");
var increment = 0.1
var currentSize = parseFloat(document.getElementById("widthContainer").style.fontSize);
if (!currentSize)
{
currentSize = 0.8;
}
if (size == "smaller")
{
theContainer.style.fontSize = (currentSize - increment) + "em";
}
else
{
theContainer.style.fontSize = (currentSize + increment) + "em";
}
return true;
}
-->
</script>
</head>
<body onload="scaleWidth();" onresize="scaleWidth();">
<div id="widthContainer">
<div id="options">
<a href="#" _fcksavedurl=""#"" onclick="textSize('smaller'); return false;">Text smaller</a> |
<a href="#" onclick="textSize('bigger'); return false;">Text bigger</a>
</div>
<!-- END options -->
<div id="header">
<h1>Browser-width defined font size</h1>
</div>
<!-- END header -->
<div id="content">
<div id="rightContent">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lobortis ullamcorper augue. Praesent vel felis vitae purus ornare pretium. Nullam porta sollicitudin lectus. Integer non arcu eu neque tincidunt tincidunt. Nullam sapien arcu, ullamcorper sed, hendrerit in, rutrum in, nibh. Aliquam sed enim. Cras rhoncus ullamcorper justo. Aenean quam dolor, consectetuer sed, dapibus quis, iaculis id, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lacinia velit ac elit. Etiam id nulla. Phasellus at arcu ac mauris hendrerit ullamcorper. Quisque posuere sodales risus. Sed nunc nibh, egestas a, blandit eget, facilisis vel, dolor. Cras metus urna, feugiat et, iaculis quis, lacinia a, elit. Etiam enim. Maecenas viverra, est non tincidunt euismod, diam urna volutpat mi, in luctus pede ante sit amet risus.
</p>
</div>
<!-- END rightContent -->
<div id="leftContent">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lobortis ullamcorper augue. Praesent vel felis vitae purus ornare pretium. Nullam porta sollicitudin lectus. Integer non arcu eu neque tincidunt tincidunt. Nullam sapien arcu, ullamcorper sed, hendrerit in, rutrum in, nibh. Aliquam sed enim. Cras rhoncus ullamcorper justo. Aenean quam dolor, consectetuer sed, dapibus quis, iaculis id, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lacinia velit ac elit. Etiam id nulla. Phasellus at arcu ac mauris hendrerit ullamcorper. Quisque posuere sodales risus. Sed nunc nibh, egestas a, blandit eget, facilisis vel, dolor. Cras metus urna, feugiat et, iaculis quis, lacinia a, elit. Etiam enim. Maecenas viverra, est non tincidunt euismod, diam urna volutpat mi, in luctus pede ante sit amet risus.
</p>
<p>
Nulla metus. Ut sodales, tortor nec sollicitudin convallis, diam diam vulputate ligula, lobortis tincidunt urna purus at urna. Pellentesque laoreet. Nulla et dolor. Praesent vestibulum quam convallis neque. Praesent sit amet odio a dui iaculis dignissim. In vel nunc a tellus vulputate pellentesque. Maecenas bibendum. Donec mi nibh, euismod in, iaculis a, eleifend et, enim. In eget lectus vitae pede nonummy elementum. Mauris accumsan, lacus ut euismod varius, odio neque egestas quam, non aliquam velit purus et purus. Vestibulum at elit nec felis suscipit pulvinar. Suspendisse at enim quis lacus mattis condimentum. Proin arcu arcu, imperdiet vitae, aliquam non, congue id, ipsum.
</p>
<p>
Aliquam eu dolor nec risus luctus faucibus. Aenean condimentum, tortor in blandit cursus, dolor magna sagittis orci, vel vehicula dolor ante at lacus. Donec vel felis in enim aliquam molestie. Sed non velit id velit pulvinar consequat. Mauris luctus. Phasellus faucibus turpis nec purus. Mauris eget ante. Donec orci enim, luctus eu, posuere at, luctus quis, pede. In in lectus. Quisque blandit, ipsum eget tincidunt scelerisque, mauris ante accumsan erat, quis congue odio erat vitae diam. Donec ut felis fermentum sem viverra pulvinar. Sed neque lorem, adipiscing ut, placerat a, ornare et, dolor. Vestibulum pretium vehicula nibh. Etiam feugiat, ligula sed pulvinar fringilla, eros arcu placerat urna, nec eleifend nisl leo sit amet urna. Suspendisse quis augue ut nibh venenatis nonummy. Nunc ut augue. In fermentum, neque eget eleifend rutrum, nulla lorem fermentum massa, eu cursus lectus mi id libero.
</p>
<p>
Nam congue ligula quis magna. Vivamus porttitor nunc non dui. Aliquam posuere dapibus tortor. Quisque facilisis, quam in semper luctus, lacus dolor gravida massa, ultrices consectetuer risus arcu nec nibh. Nulla facilisi. In a eros id eros lobortis ultrices. Vivamus sit amet neque eu magna venenatis nonummy. Pellentesque consequat. Etiam ut ipsum. Nulla consectetuer est vel quam.
</p>
<p>
Integer eu diam vitae augue sollicitudin congue. Praesent vulputate pede vel velit. Maecenas dapibus tempus lacus. Quisque lectus metus, pretium ac, mollis nec, dignissim quis, mi. Aliquam purus risus, pharetra eget, condimentum ut, blandit sit amet, leo. Suspendisse iaculis purus sed tellus. Nunc sem justo, porttitor ut, pretium eu, hendrerit eu, nunc. Vivamus sit amet neque in est venenatis faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam rhoncus, eros id ultrices facilisis, pede ligula dignissim eros, sit amet tempus risus urna sed nibh. Sed massa eros, dapibus tristique, blandit et, molestie sed, enim. Phasellus leo. Integer vestibulum volutpat enim. Duis pulvinar ligula. Pellentesque luctus velit a justo. Quisque volutpat, diam quis varius commodo, neque elit dictum tortor, quis aliquet felis risus vitae wisi. Aliquam bibendum, elit ut gravid

网页特效、JavaScript经典效果

www.firnow.com    时间 : 2007-09-07  作者:佚名   编辑:本站 点击:  689 [ 评论 ]
-
-

a vehicula, orci turpis auctor dolor, nec tristique tortor dolor eget ipsum.
</p>
</div>
<!-- END leftContent -->
<div class="clearer">
</div>
</div>
<!-- END content -->
<div id="footer">
<a href="http://www.themaninblue.com/writing/perspective/2003/12/22/">Back to the explanation</a>
</div>
</div>
<!-- END widthContainer -->
</body>
</html>

网页特效、JavaScript经典效果

www.firnow.com    时间 : 2007-09-07  作者:佚名   编辑:本站 点击:  689 [ 评论 ]
-
-

a vehicula, orci turpis auctor dolor, nec tristique tortor dolor eget ipsum.
</p>
</div>
<!-- END leftContent -->
<div class="clearer">
</div>
</div>
<!-- END content -->
<div id="footer">
<a href="http://www.themaninblue.com/writing/perspective/2003/12/22/">Back to the explanation</a>
</div>
</div>
<!-- END widthContainer -->
</body>
</html>

17、图片新闻幻灯片效果,可控制。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 新闻切换技术</title>
<style type="text/css">
<!--
body { text-align: center; margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
table,td,tr,th{font-size:12px;}
a:link {color: #000; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #c00; text-decoration:underline;}
a:active {color: #000;}
.focusPic{margin:0 auto; width:244px;}
.focusPic .pic{margin:0 auto; width:240px; height:180px; padding:2px 0 0;}
.focusPic .adPic{margin:0 auto 5px; width:240px; height:29px; overflow:hidden;background:url(http://tech.163.com/newimg/adpic.gif);}
.focusPic .adPic .text{float:right; padding:9px 4px 0 0; width:140px;}
.focusPic .adPic .text a{color:#1f3a87;}
.focusPic .adPic .text a:hover{color:#bc2931;}
.focusPic h2{ float:left; width:232px;padding:4px 0 3px 12px; font-size:14px; text-align:left;}
分享到:
评论

相关推荐

    js实现的特效——电筒效果

    这是一个用JavaScript实现的特效——当鼠标悬浮页面时,可出现手电筒的照射效果。当鼠标离开页面时,效果结束。且该效果随着你的鼠标的移动而移动。

    JavaScript特效代码集——rar

    时间日期分类 鼠标事件类 状态栏特效类 页面效果类 图形图像类 按钮特效类 ......

    考试作业系统。运用HTML、CSS技术设计静态页面。通过JavaScript对页面的特效进行加工。

    通过JavaScript对页面的特效进行加工。并运用json技术模拟数据库,通过Ajax异步交互技术获取json文件信息。运用Angular JS技术进行页面的跳转以及页面输入信息的保存。最后使用AngularJS技术对保….zip 适合学习/练...

    制作JavaScript脚本特效(自己有改)ppt.rar

    1. 制作演示案例1¬——第一个嵌入JavaScript脚本的网页 1) 案例分析实现的思路 2) 相关理论:JavaScript的功能、特点、基本的语法(与学过的VB.NET类比) 3) 操作步骤:演示如何根据提供的素材页面,编写脚本实现。...

    从零开始学JavaScript 源代码

    1.2.2 页面特效 1.2.3 交互式菜单 1.2.4 动态页面 1.2.5 数值计算 1.3 JavaScript编程起步 1.3.1 “Hello World!”程序 1.3.2 选择JavaScript脚本编辑器 1.4 如何引入JavaScript脚本代码 1.4.1 通过与标记对引入 ...

    javascript 使用手册

    JavaScript的版本:JavaScript1.0——JavaScript1.4 浏览器对JavaScript的支持: JavaScript/IE3.0、JavaScript1.2/IE4.0; 微软允许用户自行设置对JavaScript处理模式。 JavaScript与Java、VBScript、JScript...

    Web编程基础-CSS、JAVASCRIPT、JQUERY

    Web编程基础——CSS、JavaScript、jQuery 作者:何婕,李健苹 主编出版社:重庆大学出版社出版时间:2015年06月 本书紧密围绕网页设计师在进行Web前台开发中实际需要掌握的技术,全面介绍了使用DIV+CSS、JavaScript、...

    ExtJS4中文教程2 开发笔记 chm

    JQuery特效——下拉菜单 JQuery系列教程之XPath选择符 JQuery系列教程之选择符 JQuery自动缩放页面中的图片 JQuery获取浏览器的高度和宽度 jquery获得和设置下拉框值的代码 基于jquery的跨域调用文件 ==============...

    JavaScript王者归来part.1 总数2

     6.1.1.2 JavaScript函数的奥妙——魔法代码   6.1.2 函数的调用   6.2 函数的参数   6.2.1 形参与实参   6.2.2 Arguments对象   6.2.2.1 一个使用Arguments对象检测形参的例子   6.2.2.2 一个使用...

    jquery+css3实现网页背景花瓣随机飘落特效

    飘花效果的实现——效果图: 查看演示 源码下载 需求: 一个jquery,,,这个看标题么就知道了 jQuery Transit还有这个东西  http://github.com/rstacruz/jquery.transit jquery对一些效果的扩展 飘花的效果稍微...

    web前端项目-豆瓣电影

    本项目设计和制作一个电影咨询和电影评分网站——仿豆瓣电影网,通过该网站的设计和制作过程,可以帮助网站开发人员和熟悉网站前台页面的制作流程,并在开发过程中熟练应用HTML;CSS;JavaScript 和 jQuery 技术。从...

    8:Android项目源码-毕业设计源码(168套).rar

    Android创建UI的新思路:用javascript与Activity进行交互.zip Android模仿易网新闻页面源码(异步加载).zip Android瀑布流实现,类似于蘑菇街和迷尚 应用里的排列.zip android面试题.zip Android任务管理器源码.zip ...

    精通JS脚本之ExtJS框架.part2.rar

    6.3.5 常见的“特效动画”方法 6.3.6 DomHelper简介 6.4 DomQuery入门 6.4.1 元素选择符Selector 6.4.2 属性选择符Attributes Selectors 6.4.3 CSS值元素选择符 6.4.4 Ext.query与Ext.select 6.5 应用模板 ...

    精通JS脚本之ExtJS框架.part1.rar

    6.3.5 常见的“特效动画”方法 6.3.6 DomHelper简介 6.4 DomQuery入门 6.4.1 元素选择符Selector 6.4.2 属性选择符Attributes Selectors 6.4.3 CSS值元素选择符 6.4.4 Ext.query与Ext.select 6.5 应用模板 ...

    js实现图片无缝滚动特效

    关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识。  JS中的创建定时器的方法包括两种:setTimeout和setInterval。首先它们接收的参数相同:第一个参数是一个函数,用于定时器执行,...

    jQuery权威指南-源代码

    ——JavaScript开发者社区 jQuery从众多的Ajax框架中脱颖而出,已经成为Web开发领域的事实标准。《jQuery权威指南》除了理论知识丰富而全面外,它还有一个最大的特点就是注重实战,每个知识点都有一个完整的案例,...

    java源码包---java 源码 大量 实例

     Java绘制图片火焰效果,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...

    JAVA上百实例源码以及开源项目

    笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级、中级、高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情、执着,对IT的憧憬、向往!此时此...

    JAVA上百实例源码以及开源项目源代码

     Java绘制图片火焰效果,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...

Global site tag (gtag.js) - Google Analytics