分享一些平时收集的特效代码(页 1) - 网站建设 - 网页设计 - IT家园 IT998.com,流浪者家园,电脑技术论坛

小桂华 发表于 2006-10-28 09:38

分享一些平时收集的特效代码

[size=3]特效代码之loading效果
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<BODY STYLE="FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica">

<SCRIPT LANGUAGE="JScript">

var NUMBER_OF_REPETITIONS = 40;
var nRepetitions = 0;
var g_oTimer = null;

function startLongProcess()
{
divProgressDialog.style.display = "";
resizeModal();
btnCancel.focus();

// Add a resize handler for the window
window.onresize = resizeModal;

// Add a warning in case anyone tries to navigate away or refresh the page
window.onbeforeunload = showWarning;

//
// Here's where you would normally kick off a long asynchronous process
// like a file download or a remote database operation. Here, we use
// our "long process" to simulate this process.
//

continueLongProcess();
}

function updateProgress(nNewPercent)
{
// Update our pseudo progress bar
divProgressInner.style.width = (parseInt(divProgressOuter.style.width)
   * nNewPercent / 100)+ "px";
}

function stopLongProcess()
{
if (g_oTimer != null)
{
   // Clear the timer so we don't get called back an extra time
   window.clearTimeout(g_oTimer);
   g_oTimer = null;
}

// Hide the fake modal DIV
divModal.style.width = "0px";
divModal.style.height = "0px";
divProgressDialog.style.display = "none";

// Remove our event handlers
window.onresize = null;
window.onbeforeunload = null;

nRepetitions = 0;
}

function continueLongProcess()
{
if (nRepetitions < NUMBER_OF_REPETITIONS)
{
   // Set the timeout somewhere between 0 and .25 seconds
   var nTimeoutLength = Math.random() * 250;
   updateProgress(100 * nRepetitions / NUMBER_OF_REPETITIONS);

   g_oTimer = window.setTimeout("continueLongProcess();", nTimeoutLength);
   nRepetitions++;
}
else
{
   stopLongProcess();
}
}

function showWarning()
{
//Warn users before they refresh the page or navigate away
return "Navigating to a different page or refreshing the window could cause you to lose precious data.\n\nAre you*absolutely* certain you want to do this?";
}

function resizeModal()
{
// Resize the DIV which fakes the modality of the dialog DIV
divModal.style.width = document.body.scrollWidth;
divModal.style.height = document.body.scrollHeight;

// Re-center the dialog DIV
divProgressDialog.style.left = ((document.body.offsetWidth -
divProgressDialog.offsetWidth) / 2);
divProgressDialog.style.top = ((document.body.offsetHeight -
divProgressDialog.offsetHeight) / 2);
}

</SCRIPT>

<INPUT TYPE="BUTTON" VALUE="Click Me!" onclick="startLongProcess();">


<DIV STYLE="BORDER: buttonhighlight 2px outset; FONT-SIZE: 8pt; Z-INDEX:
4; FONT-FAMILY: Tahoma; POSITION: absolute; BACKGROUND-COLOR: buttonface;
DISPLAY: none; WIDTH: 350px; CURSOR: default" ID="divProgressDialog"
onselectstart="window.event.returnValue=false;">
<DIV STYLE="ADDING: 3px; FONT-WEIGHT: bolder; COLOR: captiontext;
BORDER-BOTTOM: white 2px groove; BACKGROUND-COLOR: activecaption">
   Downloading Requested Document
</DIV>
<DIV STYLE="ADDING: 5px">
   Please wait while I download the document you requested.
</DIV>
<DIV STYLE="ADDING: 5px">
   This may take several seconds.
</DIV>
<DIV STYLE="PADDING: 5px">
      <DIV ID="divProgressOuter" STYLE="BORDER: 1px solid threedshadow;
WIDTH: 336px; HEIGHT: 15px">
         <DIV ID="divProgressInner" STYLE="COLOR: white; TEXT-ALIGN:
center; BACKGROUND-COLOR: infobackground; MARGIN: 0px; WIDTH: 0px; HEIGHT:
13px;"></DIV>
      </DIV>
</DIV>
<DIV STYLE="BORDER-TOP: white 2px groove; PADDING-BOTTOM: 5px; PADDING-TOP: 3px;
BACKGROUND-COLOR: buttonface; TEXT-ALIGN: center">
      <INPUT STYLE="FONT-FAMILY: Tahoma; FONT-SIZE: 8pt" TYPE="button"
ID="btnCancel" onclick="stopLongProcess();" VALUE="Cancel">
</DIV>
</DIV>



<DIV ID="divModal"
STYLE="BACKGROUND-COLOR: white; FILTER: alpha(opacity=75); LEFT: 0px; POSITION:
absolute; TOP: 0px; Z-INDEX: 3"
onclick="window.event.cancelBubble=true; window.event.returnValue=false;">
</DIV>

</body>
</html>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
特效代码之快捷提交表单

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<form action="<a href="http://www.jluvip.com/index.html" target="_blank">[url]http://www.jluvip.com/index.html[/url]</a>" method=POST name=form1>
<textarea ></textarea>
<br><input type=submit accessKey="S" value=提交(Alt+s)>
</form>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
特效代码之凹陷文字

<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>
怎么样，我凹下去了吧？<br>
你不想试试吗？<br>
<a href="<a href="http://www.lenvo.cn/" target="_blank">[url]http://www.lenvo.cn/[/url]</a>">[url]www.lenvo.cn[/url]</a></font>
</div>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
特效代码之日历

<html>
<body>
<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 <img src="images/smilies/Face_20.gif" border="0" style="margin:0px 0px -2px 0px" alt=""/>;
}

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" cellpadding="0" cellspacing="1" class="Calendar" id="caltable">
<thead>
   <tr align="center" valign="middle">
  <td colspan="7" class="Title">
<a href="javaScriptubMonth();" 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></body>
</html>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
特效代码之仿AS菜单

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>模仿as效果的导航菜单</title>
<style type="text/css">

</style>
<script type="text/javascript">
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 />

</body>
</html>[/size]

浪花发表于 2006-10-28 12:05

收藏了,谢谢分享

页: [1]

IT家园's Archiver

分享一些平时收集的特效代码