JavaScript 经典效果集

TOP

海螺大侠

IsMole Team

Rank: 8 Rank: 8

大侠

2^# 大中小发表于 2008-6-24 09:18 只看该作者

三、超级强大的表单验证

复制内容到剪贴板

代码:

<title>表单验证类 Validator v1.01</title>
 <style>
 body,td{font:normal 12px Verdana;color:#333333}
 input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid #999999;background:#ffffff}
 table{border-collapse:collapse;}
 td{padding:3px}
 input{height:20;}
 textarea{width:80%;height:50px;overfmin:auto;}
 form{display:inline}
 </style>
 <table align="center">
   <form name="theForm" id="demo" action="" method="get" onSubmit="return Validator.Validate(this,2)">
     <tr>
    <td>真实姓名：</td><td><input name="Name" dataType="Chinese" msg="真实姓名只允许中文"></td>
   </tr>
   <tr>
    <td>英文名：</td><td><input name="Nick" dataType="English" require="false" msg="英文名只允许英文字母"></td>
   </tr>
     <tr>
    <td>主页：</td><td><input name="Homepage" require="false" dataType="Url"   msg="非法的Url"></td>
   </tr>
   <tr>
    <td>密码：</td><td><input name="Password" dataType="SafeString"   msg="密码不符合安全规则" type="password"></td>
   </tr>
   <tr>
    <td>重复：</td><td><input name="Repeat" dataType="Repeat" to="Password" msg="两次输入的密码不一致" type="password"></td>
   </tr>
   <tr>
    <td>信箱：</td><td><input name="Email" dataType="Email" msg="信箱格式不正确"></td>
   </tr>
     <tr>
    <td>信箱：</td><td><input name="Email" dataType="Repeat" to="Email" msg="两次输入的信箱不一致"></td>
   </tr>
   <tr>
    <td>QQ：</td><td><input name="QQ" require="false" dataType="QQ" msg="QQ号码不存在"></td>
   </tr>
     <tr>
    <td>身份证：</td><td><input name="Card" dataType="IdCard" msg="身份证号码不正确"></td>
   </tr>
   <tr>
    <td>年龄：</td><td><input name="Year" dataType="Range" msg="年龄必须在18~28之间" min="18" max="28"></td>
   </tr>
    <tr>
    <td>年龄1：</td><td><input name="Year1" require="false" dataType="Compare" msg="年龄必须在18以上" to="18" operator="GreaterThanEqual"></td>
   </tr>
    <tr>
    <td>电话：</td><td><input name="Phone" require="false" dataType="Phone" msg="电话号码不正确"></td>
   </tr>
    <tr>
    <td>手机：</td><td><input name="Mobile" require="false" dataType="Mobile" msg="手机号码不正确"></td>
   </tr>
      <tr>
    <td>生日：</td><td><input name="Birthday" dataType="Date" format="ymd" msg="生日日期不存在"></td>
   </tr>
    <tr>
    <td>邮政编码：</td><td><input name="Zip" dataType="Custom" regexp="^[1-9]\d{5}$" msg="邮政编码不存在"></td>
   </tr>
   <tr>
    <td>邮政编码：</td><td><input name="Zip1" dataType="Zip" msg="邮政编码不存在"></td>
   </tr>
   <tr>
    <td>操作系统：</td><td><select name="Operation" dataType="Require"  msg="未选择所用操作系统" ><option value="">选择您所用的操作系统</option><option value="Win98">Win98</option><option value="Win2k">Win2k</option><option value="WinXP">WinXP</option></select></td>
   </tr>
   <tr>
    <td>所在省份：</td><td>广东<input name="Province" value="1" type="radio">陕西<input name="Province" value="2" type="radio">浙江<input name="Province" value="3" type="radio">江西<input name="Province" value="4" type="radio" dataType="Group"  msg="必须选定一个省份" ></td>
   </tr>
   <tr>
    <td>爱好：</td><td>运动<input name="Favorite" value="1" type="checkbox">上网<input name="Favorite" value="2" type="checkbox">听音乐<input name="Favorite" value="3" type="checkbox">看书<input name="Favorite" value="4" type="checkbox"" dataType="Group" min="2" max="3"  msg="必须选择2~3种爱好"></td>
   </tr>
    <td>自我介绍：</td><td><textarea name="Description" dataType="Limit" max="10"  msg="自我介绍内容必须在10个字之内">中文是一个字</textarea></td>
   </tr>
      <td>自传：</td><td><textarea name="History" dataType="LimitB" min="3" max="10"  msg="自传内容必须在[3,10]个字节之内">中文是两个字节t</textarea></td>
   </tr>
   <tr>
    <td colspan="2"><input name="Submit" type="submit" value="确定提交"><input onClick="Validator.Validate(document.getElementById('demo'))" value="检验模式1" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),2)" value="检验模式2" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),3)" value="检验模式3" type="button"></td>
   </tr>
   </form>
 </table>
 <script>
 /*************************************************
         Validator v1.01
         code by 我佛山人
         [email]wfsr@cunite.com[/email]
         http://www.cunite.com
 *************************************************/
 Validator = {
         Require : /.+/,
         Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
         Phone : /^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/,
         Mobile : /^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/,
         Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
         IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/,
         Currency : /^\d+(\.\d+)?$/,
         Number : /^\d+$/,
         Zip : /^[1-9]\d{5}$/,
         QQ : /^[1-9]\d{4,8}$/,
         Integer : /^[-\+]?\d+$/,
         Double : /^[-\+]?\d+(\.\d+)?$/,
         English : /^[A-Za-z]+$/,
         Chinese :  /^[\u0391-\uFFE5]+$/,
         UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,
         IsSafe : function(str){return !this.UnSafe.test(str);},
         SafeString : "this.IsSafe(value)",
         Limit : "this.limit(value.length,getAttribute('min'),  getAttribute('max'))",
         LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))",
         Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))",
         Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value",
         Range : "getAttribute('min') < value && value < getAttribute('max')",
         Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))",
         Custom : "this.Exec(value, getAttribute('regexp'))",
         Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))",
         ErrorItem : [document.forms[0]],
         ErrorMessage : ["以下原因导致提交失败：\t\t\t\t"],
         Validate : function(theForm, mode){
                 var obj = theForm || event.srcElement;
                 var count = obj.elements.length;
                 this.ErrorMessage.length = 1;
                 this.ErrorItem.length = 1;
                 this.ErrorItem[0] = obj;
                 for(var i=0;i<count;i++){
                         with(obj.elements[i]){
                                 var _dataType = getAttribute("dataType");
                                 if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined")  continue;
                                 this.ClearState(obj.elements[i]);
                                 if(getAttribute("require") == "false" && value == "") continue;
                                 switch(_dataType){
                                         case "Date" :
                                         case "Repeat" :
                                         case "Range" :
                                         case "Compare" :
                                         case "Custom" :
                                         case "Group" : 
                                         case "Limit" :
                                         case "LimitB" :
                                         case "SafeString" :
                                                 if(!eval(this[_dataType]))        {
                                                         this.AddError(i, getAttribute("msg"));
                                                 }
                                                 break;
                                         default :
                                                 if(!this[_dataType].test(value)){
                                                         this.AddError(i, getAttribute("msg"));
                                                 }
                                                 break;
                                 }
                         }
                 }
                 if(this.ErrorMessage.length > 1){
                         mode = mode || 1;
                         var errCount = this.ErrorItem.length;
                         switch(mode){
                         case 2 :
                                 for(var i=1;i<errCount;i++)
                                         this.ErrorItem[i].style.color = "red";
                         case 1 :
                                 alert(this.ErrorMessage.join("\n"));
                                 this.ErrorItem[1].focus();
                                 break;
                         case 3 :
                                 for(var i=1;i<errCount;i++){
                                 try{
                                         var span = document.createElement("SPAN");
                                         span.id = "__ErrorMessagePanel";
                                         span.style.color = "red";
                                         this.ErrorItem[i].parentNode.appendChild(span);
                                         span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,"*");
                                         }
                                         catch(e){alert(e.description);}
                                 }
                                 this.ErrorItem[1].focus();
                                 break;
                         default :
                                 alert(this.ErrorMessage.join("\n"));
                                 break;
                         }
                         return false;
                 }
                 return true;
         },
         limit : function(len,min, max){
                 min = min || 0;
                 max = max || Number.MAX_VALUE;
                 return min <= len && len <= max;
         },
         LenB : function(str){
                 return str.replace(/[^\x00-\xff]/g,"**").length;
         },
         ClearState : function(elem){
                 with(elem){
                         if(style.color == "red")
                                 style.color = "";
                         var lastNode = parentNode.childNodes[parentNode.childNodes.length-1];
                         if(lastNode.id == "__ErrorMessagePanel")
                                 parentNode.removeChild(lastNode);
                 }
         },
         AddError : function(index, str){
                 this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];
                 this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str;
         },
         Exec : function(op, reg){
                 return new RegExp(reg,"g").test(op);
         },
         compare : function(op1,operator,op2){
                 switch (operator) {
                         case "NotEqual":
                                 return (op1 != op2);
                         case "GreaterThan":
                                 return (op1 > op2);
                         case "GreaterThanEqual":
                                 return (op1 >= op2);
                         case "LessThan":
                                 return (op1 < op2);
                         case "LessThanEqual":
                                 return (op1 <= op2);
                         default:
                                 return (op1 == op2);            
                 }
         },
         MustChecked : function(name, min, max){
                 var groups = document.getElementsByName(name);
                 var hasChecked = 0;
                 min = min || 1;
                 max = max || groups.length;
                 for(var i=groups.length-1;i>=0;i--)
                         if(groups[i].checked) hasChecked++;
                 return min <= hasChecked && hasChecked <= max;
         },
         IsDate : function(op, formatString){
                 formatString = formatString || "ymd";
                 var m, year, month, day;
                 switch(formatString){
                         case "ymd" :
                                 m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$"));
                                 if(m == null ) return false;
                                 day = m[6];
                                 month = m[5]--;
                                 year =  (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));
                                 break;
                         case "dmy" :
                                 m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$"));
                                 if(m == null ) return false;
                                 day = m[1];
                                 month = m[3]--;
                                 year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
                                 break;
                         default :
                                 break;
                 }
                 if(!parseInt(month)) return false;
                 month = month==12 ?0:month;
                 var date = new Date(year, month, day);
         return (typeof(date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate());
                 function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;}
         }
 }
 </script>

四、漂亮的脚本日历

复制内容到剪贴板

代码:

<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" cellpadding="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>

我只是一个大侠!

UID

帖子

154

精华

积分

417

阅读权限

150

来自

ismole

在线时间

32 小时

注册时间

2008-3-31

最后登录

2008-6-25

TOP

海螺大侠

IsMole Team

Rank: 8 Rank: 8

大侠

3^# 大中小发表于 2008-6-24 09:19 只看该作者

五、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>

六、跳动的菜单

复制内容到剪贴板

代码:

<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/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 />
 <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>

我只是一个大侠!

UID

帖子

154

精华

积分

417

阅读权限

150

来自

ismole

在线时间

32 小时

注册时间

2008-3-31

最后登录

2008-6-25

TOP

海螺大侠

IsMole Team

Rank: 8 Rank: 8

大侠

4^# 大中小发表于 2008-6-24 09:20 只看该作者

七、经典的带阴影的可拖动的浮动层

复制内容到剪贴板

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>MyPixbot</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <script language="JavaScript" type="text/JavaScript">
 <!--
 function MM_reloadPage(init) {  //reloads the window if Nav4 resized
   if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
     document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
   else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
 }
 MM_reloadPage(true);
 function MM_findObj(n, d) { //v4.01
   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
   if(!x && d.getElementById) x=d.getElementById(n); return x;
 }
 function MM_showHideLayers() { //v6.0
   var i,p,v,obj,args=MM_showHideLayers.arguments;
   for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
     if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
     obj.visibility=v; }
 }
 function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v4.01
   //Copyright 1998 Macromedia, Inc. All rights reserved.
   var i,j,aLayer,retVal,curDrag=null,curLeft,curTop,IE=document.all,NS4=document.layers;
   var NS6=(!IE&&document.getElementById), NS=(NS4||NS6); if (!IE && !NS) return false;
   retVal = true; if(IE && event) event.returnValue = true;
   if (MM_dragLayer.arguments.length > 1) {
     curDrag = MM_findObj(objName); if (!curDrag) return false;
     if (!document.allLayers) { document.allLayers = new Array();
       with (document) if (NS4) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
         for (i=0; i<allLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers)
           with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j];
       } else {
         if (NS6) { var spns = getElementsByTagName("span"); var all = getElementsByTagName("div"); 
           for (i=0;i<spns.length;i++) if (spns[i].style&&spns[i].style.position) allLayers[allLayers.length]=spns[i];}
         for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i]; 
     } }
     curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
     curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
     curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
     curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
     curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
     curDrag.MM_oldZ = (NS4)?curDrag.zIndex:curDrag.style.zIndex;
     curLeft= (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft; 
     if (String(curLeft)=="NaN") curLeft=0; curDrag.MM_startL = curLeft;
     curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop; 
     if (String(curTop)=="NaN") curTop=0; curDrag.MM_startT = curTop;
     curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop-cU;
     curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop+cD;
     curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
     document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
     if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
   } else {
     var theEvent = ((NS)?objName.type:event.type);
     if (theEvent == 'mousedown') {
       var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
       var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
       var maxDragZ=null; document.MM_maxZ = 0;
       for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
         var aLayerZ = (NS4)?aLayer.zIndex:parseInt(aLayer.style.zIndex);
         if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
         var isVisible = (((NS4)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
         if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
           var parentL=0; var parentT=0;
           if (NS6) { parentLayer = aLayer.parentNode;
             while (parentLayer != null && parentLayer.style.position) {             
               parentL += parseInt(parentLayer.offsetLeft); parentT += parseInt(parentLayer.offsetTop);
               parentLayer = parentLayer.parentNode;
           } } else if (IE) { parentLayer = aLayer.parentElement;       
             while (parentLayer != null && parentLayer.style.position) {
               parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
               parentLayer = parentLayer.parentElement; } }
           var tmpX=mouseX-(((NS4)?pageX:((NS6)?parseInt(style.left):style.pixelLeft)+parentL)+MM_hLeft);
           var tmpY=mouseY-(((NS4)?pageY:((NS6)?parseInt(style.top):style.pixelTop) +parentT)+MM_hTop);
           if (String(tmpX)=="NaN") tmpX=0; if (String(tmpY)=="NaN") tmpY=0;
           var tmpW = MM_hWidth;  if (tmpW <= 0) tmpW += ((NS4)?clip.width :offsetWidth);
           var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS4)?clip.height:offsetHeight);
           if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
               || maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
       if (curDrag) {
         document.onmousemove = MM_dragLayer; if (NS4) document.captureEvents(Event.MOUSEMOVE);
         curLeft = (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
         curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
         if (String(curLeft)=="NaN") curLeft=0; if (String(curTop)=="NaN") curTop=0;
         MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
         document.MM_curDrag = curDrag;  curDrag.MM_SNAPPED=false;
         if(curDrag.MM_toFront) {
           eval('curDrag.'+((NS4)?'':'style.')+'zIndex=document.MM_maxZ+1');
           if (!curDrag.MM_dropBack) document.MM_maxZ++; }
         retVal = false; if(!NS4&&!NS6) event.returnValue = false;
     } } else if (theEvent == 'mousemove') {
       if (document.MM_curDrag) with (document.MM_curDrag) {
         var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
         var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
         newLeft = mouseX-MM_oldX; newTop  = mouseY-MM_oldY;
         if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
         if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
         if (MM_bT!=null) newTop  = Math.max(newTop ,MM_bT);
         if (MM_bB!=null) newTop  = Math.min(newTop ,MM_bB);
         MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
         if (NS4) {left = newLeft; top = newTop;}
         else if (NS6){style.left = newLeft; style.top = newTop;}
         else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
         if (MM_dragJS) eval(MM_dragJS);
         retVal = false; if(!NS) event.returnValue = false;
     } } else if (theEvent == 'mouseup') {
       document.onmousemove = null;
       if (NS) document.releaseEvents(Event.MOUSEMOVE);
       if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
       if (document.MM_curDrag) with (document.MM_curDrag) {
         if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
             (Math.pow(MM_targL-((NS4)?left:(NS6)?parseInt(style.left):style.pixelLeft),2)+
              Math.pow(MM_targT-((NS4)?top:(NS6)?parseInt(style.top):style.pixelTop),2))<=MM_tol) {
           if (NS4) {left = MM_targL; top = MM_targT;}
           else if (NS6) {style.left = MM_targL; style.top = MM_targT;}
           else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
           MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
         if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
         if(MM_dropBack) {if (NS4) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
         retVal = false; if(!NS) event.returnValue = false; }
       document.MM_curDrag = null;
     }
     if (NS) document.routeEvent(objName);
   } return retVal;
 }
 function loadwin(obj){
         with(MM_findObj(obj))with(style){
                 filters[0].apply();
                 display='';
                 filters[0].play();
         }
 }
 function cs(captionBG,bodyBG,tableBG){
 oldBody=document.body;
         with(oldBody){
                 var newBody=cloneNode();
                 style.filter='blendtrans(duration=1)';
                 filters[0].apply();
                 with(document.styleSheets[0]){
                         with(rules[0].style){backgroundColor=captionBG;}
                         with(rules[1].style){backgroundColor=bodyBG;}
                         with(rules[2].style){backgroundColor=tableBG}
                 }
                 filters[0].play();
                 setTimeout(function(){
                                 if(oldBody!=null){
                                         oldBody.applyElement(newBody, "inside")
                                         oldBody.swapNode(newBody);
                                         oldBody.removeNode(true);
                                         }
                                 },1500);
         }
 }
 //-->
 </script>
 <style type="text/css">
 <!--
 .caption {
         font-size: 9px;
         color: #FFFFFF;
         background-color: #00CCFF;
         padding-left: 5px;
         cursor: default;
         font-family: "Verdana", "Arial";
         border: 1px inset;
 }
 body {
         background-color: #f6f6f6;
         border: 1px inset;
         overflow: hidden;
 }
 table {
         background-color: #eeeeee;
 }
 td {
         font-family: "Verdana", "Arial";
         font-size: 9px;
         border: 0px;
 }
 .win {
         filter:BlendTrans(duration=1) DropShadow(Color=#cccccc, OffX=3, OffY=3) alpha(opacity=90)
 }
 a {
         text-decoration: none;
         color: #003399;
 }
 a:hover {
         color: #FF0000;
 }
 input {
         font-family: "Verdana", "Arial";
         font-size: 9px;
         border-width: 1px;
 }
 .statusbar {
         font-family: "Tahoma", "Verdana";
         font-size: 9px;
         color: #999999;
         padding-left: 3px;
 }
 .button {
         border: 1px outset;
         text-align: center;
 }
 .navframe {
         padding: 5px;
 }
 -->
 </style>
 </head>
 <body>
 <div id="assist" style="position:absolute; left:15px; top:68px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('assist','',0,0,150,18,true,false,-1,-1,-1,-1,15,68,100,'',false,'')">
                 <table width="180" border="1" cellpadding="0" cellspacing="0">
                                 <tr>
                                                 <td class="caption">SeekAssist</td>
                                                 <td width="14" align="center"><a href="#" onclick="with(MM_findObj('assistwin').style)display=display=='none'?'':'none'">%</a></td>
                                                 <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('assist','','hide')">X</a></td>
                                 </tr>
                                 <tr id="assistwin">
                                                 <td height="100" colspan="3" bordercolor="#eeeeee">&nbsp;</td>
                                 </tr>
   </table>
         <br>
 </div>
 <script>loadwin('assist')</script>
 <div id="rank" style="position:absolute; left:15px; top:194px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('rank','',0,0,150,18,true,false,-1,-1,-1,-1,15,194,100,'',false,'')">
                 <table width="180" border="1" cellpadding="0" cellspacing="0">
                                 <tr>
                                                 <td class="caption">SeekRank</td>
                                                 <td width="14" align="center"><a href="#" onclick="with(MM_findObj('rankwin').style)display=display=='none'?'':'none'">%</a></td>
                                                 <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('assist','','inherit','rank','','hide')">X</a></td>
                                 </tr>
                                 <tr id="rankwin">
                                                 <td height="100" colspan="3" bordercolor="#eeeeee">&nbsp;</td>
                                 </tr>
   </table>
                 <br>
 </div>
 <script>setTimeout("loadwin('rank')",500)</script>
 <div id="mycolor" style="position:absolute; left:15px; top:320px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('mycolor','',0,0,150,18,true,false,-1,-1,-1,-1,15,320,100,'',false,'')">
                 <table width="180" border="1" cellpadding="0" cellspacing="0">
                                 <tr>
                                                 <td class="caption">MyColor</td>
                                                 <td width="14" align="center"><a href="#" onclick="with(MM_findObj('mycolorwin').style)display=display=='none'?'':'none'">%</a></td>
                                                 <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('mycolor','','hide')">X</a></td>
                                 </tr>
                                 <tr id="mycolorwin">
                                                 <td height="100" colspan="3" bordercolor="#eeeeee"><table width="100%" border="0" cellspacing="0" cellpadding="2">
                                                                 <tr>
                                                                                 <td align="center"><a href="#" onclick="cs('#00CCFF','#f6f6f6','#eeeeee')">Default</a></td>
                                                                 </tr>
                                                                 <tr>
                                                                                 <td align="center"><a href="#" onclick="cs('red','#eeccee','#eeddee')">StyleSheet#1</a></td>
                                                                 </tr>
                                                                 <tr>
                                                                                 <td align="center"><a href="#" onclick="cs('#99ccff','#eeeeee','#ccddff')">StyleSheet#2</a></td>
                                                                 </tr>
                                                                 <tr>
                                                                                 <td align="center"><a href="#" onclick="cs('#ff9999','#ffffff','#ffeeff')">StyleSheet#3</a></td>
                                                                 </tr>
                                                                 <tr>
                                                                                 <td align="center"><a href="#" onclick="cs('skyblue','#eeeeee','#99ddff')">StyleSheet#4</a></td>
                                                                 </tr>
                                                                 <tr>
                                                                                 <td align="center"><a href="#" onclick="cs('#009900','#eeffee','#ddffdd')">StyleSheet#5</a></td>
                                                                 </tr>
                                                 </table></td>
                                 </tr>
   </table>
                 <br>
 </div>
 <script>setTimeout("loadwin('mycolor')",1000)</script>
 <div id="results" style="position:absolute; left:204px; top:68px; width:575px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('results','',0,0,400,18,true,false,-1,-1,-1,-1,204,68,50,'',false,'')">
                 <table width="570" border="1" cellpadding="0" cellspacing="0">
                                 <tr>
                                                 <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                                 <tr>
                                                                                                 <td class="caption">Results</td>
                                                                                                 <td width="12" class="button"><a href="#" onClick="with(MM_findObj('resultswin').style)display=display=='none'?'':'none'">%</a></td>
                                                                                                 <td width="12" class="button"><a href="#" onClick="MM_showHideLayers('results','','inherit')">X</a></td>
                                                                                 </tr>
                                                 </table></td>
                                 </tr>
                                 <tr>
                                                 <td height="20" bordercolor="#eeeeee"><input name="url" type="text" value="http://www.google.com/search?q=ezlee" size="100">
                                                 <a href="#" onclick="mainframe.location=url.value">Search</a></td>
                                 </tr>
                                 <tr id="resultswin">
                                                 <td height="318" valign="top" class="navframe"><aiframe name="mainframe" id="mainframe" src="http://www.google.com/search?q=ezlee" width="100%" height="100%" frameborder="0" scrolling="auto"><font color="#FF0000">Welcome!</font></aiframe></td>
                                 </tr>
                                 <tr>
                                                 <td height="14" class="statusbar">Ready!</td>
                         </tr>
   </table>
                 <br>
 </div>
 <script>setTimeout("loadwin('results')",2000)</script>
 </body>
 </html>

八、凹陷文字

复制内容到剪贴板

代码:

<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="http://www.ismole.com/">www.ismole.com</a></font>
 </div>

我只是一个大侠!

UID

帖子

154

精华

积分

417

阅读权限

150

来自

ismole

在线时间

32 小时

注册时间

2008-3-31

最后登录

2008-6-25

TOP

海螺大侠

IsMole Team

Rank: 8 Rank: 8

大侠

5^# 大中小发表于 2008-6-24 09:22 只看该作者

九、美化列表

复制内容到剪贴板

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
 <HEAD>
 <TITLE> simulate combox control - http://www.never-online.net </TITLE>
 <META NAME="Generator" CONTENT="EditPlus">
 <META NAME="Author" CONTENT="">
 <META NAME="Keywords" CONTENT="">
 <META NAME="Description" CONTENT="">
 <style>
 body, input
 {
         font-family: verdana;
         font-size: 9pt;
 }
 h1
 {
         font-family: tahoma;
         font-size: 22pt;
         text-align: left;
 }
 pre
 {
         font-size: 9pt;
         font-family: verdana;
         border: 1px solid #006600;
         width: 400px;
         padding: 10px;
         background: #ffffff;
         color: #006600;
 }
 .CtlSelect
 {
         border: 1px solid #006600;
         font-family: verdana;
         height: 20px;
         color: #006600;
         background: #ffffff;
         /*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
 }
 .selected
 {
         background: #006600;
         color: #ffffff;
         height: 20px;
 }
 .unselected
 {
         height: 20px;
         color: #006600;
         line-height: 120%;
         border-bottom: 1px solid #006600;
 }
 .CtlSelect1
 {
         border: 1px solid #003399;
         font-family: verdana;
         height: 20px;
         color: #003399;
         background: #ffffff;
         /*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
 }
 .selected1
 {
         background: #003399;
         color: #ffffff;
         height: 20px;
 }
 .unselected1
 {
         height: 20px;
         color: #003399;
         line-height: 120%;
         border-bottom: 1px solid #003399;
 }
 .CtlSelect2
 {
         border: 1px solid #990000;
         font-family: verdana;
         height: 20px;
         color: #990000;
         background: #ffffff;
         /*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
 }
 .selected2
 {
         background: #990000;
         color: #ffffff;
         height: 20px;
 }
 .unselected2
 {
         height: 20px;
         color: #990000;
         line-height: 120%;
         border-bottom: 1px solid #990000;
 }
 .copyright
 {
         margin-top: 10px;
         font-size: 9pt;
         text-align: center;
         color: #333;
         font-weight: bold;
 }
 </style>
 </HEAD>
 <BODY>
 <SCRIPT LANGUAGE="JavaScript">
 <!--
 //-------------------------------------------------------------
 //  @ Module: simulate select control, IE only.
 //  @ Debug in: IE 6.0
 //  @ Script by: blueDestiny, never-online
 //  @ Updated: 2006-3-22
 //  @ Version: 1.0 apha
 //  @ Email: blueDestiny [at] 126.com
 //  @ Website: http://www.never-online.net
 //  @ Please Hold this item please.
 //
 //  API
 //  @ class: simulateSelect()
 //
 //  @ object.style(ctlStyle[,selStyle][,unselStyle])
 //    ctlStyle: main control combox css class name
 //    selStyle: when mouseover or option focus css class name
 //    unselStyle: options blur's css class name
 //
 //  @ object.width=(widthPX)
 //    widthPX must be a digit number.
 //
 //  @ object.height=(heightPX)
 //    heightPX must be a digit number.
 //
 //  @ object.getValue(ctlSelID)
 //    ctlSelID is the unique select control ID
 //
 //  -------------- for the next Version ----------
 //  @ object.readOnly = (blnReadOnly)
 //    blnReadOnly must be a boolean type or a number type.
 //  @ object.addEvent(w, h)
 //    w: fire handler's event.
 //    h: handler function.
 //-------------------------------------------------------------
 function $(objID)
 {
         return document.getElementById(objID);
 };
 function Offset(e)
 {
         var t = e.offsetTop;
         var l = e.offsetLeft;
         var w = e.offsetWidth;
         var h = e.offsetHeight-2;
         while(e=e.offsetParent)
         {
                 t+=e.offsetTop;
                 l+=e.offsetLeft;
         }
         return {
                 top : t,
                 left : l,
                 width : w,
                 height : h
         }
 }
 //-----------------------------------------------
 function simulateSelect() { with(this)
 {
         this.IDs = [];
         this.name = this;
         //  property for beta Version
         //  can editable combox
         this.readonly = true;
         this.height = 20;
         this.width = null;
         this.ctlStyle = "CtlSelect";
         this.selStyle = "selected";
         this.unselStyle = "unselected";
         this.elementPrefix = "e__";
         this.inputPrefix = "i__";
         this.containerPrefix = "c__";
         this.buttonPrefix = "b__";
         return this;
 }};
 simulateSelect.prototype.init = function(ctlSelIDs) { with(this)
 {
         eval(name).append(ctlSelIDs);
         eval(name).simulates();
 }};
 simulateSelect.prototype.style = function() { with(this)
 {
         ctlStyle = arguments[0];
         selStyle = arguments[1];
         unselStyle = arguments[2];
 }};
 //-----------------------------------------------
 simulateSelect.prototype.append = function(ctlSelIDs) { with(this)
 {
         if( ctlSelIDs.indexOf(",")>0 )
         {
                 var arrCtlSel = ctlSelIDs.split(",");
                 for(var i=0; i<arrCtlSel.length; i++)
                 {
                         eval(name).IDs.push(arrCtlSel[i]);
                 }
         }
         else
         {
                 eval(name).IDs.push(ctlSelIDs);
         }
 }};
 simulateSelect.prototype.checkupOnMouseDown = function(e) { with(this)
 {
         // here compatible mf.
         var el = e ? e.srcElement : e.target;
         if( el.id.indexOf(elementPrefix)>-1 || 
         el.id.indexOf(inputPrefix)>-1 || 
         el.id.indexOf(containerPrefix)>-1 || 
         el.id.indexOf(buttonPrefix)>-1 )
         {
                 return;
         }
         else
         {
                 for(var i=0; i<eval(name).IDs.length; i++)
                 if( $(containerPrefix + IDs[i]) )
                 $(containerPrefix + eval(name).IDs[i]).style.display = "none";
         }
 }};
 simulateSelect.prototype.simulates = function() { with(this)
 {
         for(var i=0; i<IDs.length; i++)
         eval(name).simulate(IDs[i]);
 }};
 simulateSelect.prototype.simulate = function(ctlSelID) { with (this)
 {
         var input;
         var button;
         var object;
         var offset;
         object = $(ctlSelID);
         offset = Offset(object);
         input = document.createElement("INPUT");
         button = document.createElement("BUTTON");
         button.setAttribute("id", buttonPrefix + ctlSelID);
         //button.value = "⊿";
         button.value = "6";
         button.style.fontFamily = "Webdings, Marlett";
         button.style.background = "";
         button.onclick = input.onclick = function()
         {
                 this.blur();
                 eval(name).expand(ctlSelID, offset);
         }
         input.onselectstart = function() { eval(name).expand(ctlSelID, offset); event.returnValue = false; };
         input.setAttribute("id", inputPrefix + ctlSelID);
         input.title = button.title = "click expand options";
         input.style.cursor = button.style.cursor = "default";
         input.className = button.className = ctlStyle;
         input.style.width = (width>0 ? width : object.offsetWidth);
         height ? input.style.height=button.style.height=height : "";
         input.value = object[0].text;
         if( readonly==true ) input.readOnly=true;
         // this method is only IE.
         object.insertAdjacentElement("afterEnd",button);
         object.insertAdjacentElement("afterEnd",input);
         object.style.display = 'none';
 }};
 simulateSelect.prototype.expand = function(ctlSelID, offset) { with(this)
 {
         var div, btn_off;
         var object = $(ctlSelID);
         if( !$(containerPrefix + ctlSelID) )
         {
                 div = document.createElement("DIV");
                 div.style.position = "absolute";
                 div.style.display = "block";
                 div.setAttribute("id", containerPrefix + ctlSelID);
                 div.className = ctlStyle;
                 div.style.left = offset.left;
                 div.style.top = offset.top + offset.height;
                 div.style.width = (width ? width : offset.width) + 20;
                 div.style.height = offset.height;
                 document.body.appendChild(div);
                 for(var i=0; i<object.length; i++)
                 {
                         div = document.createElement("DIV");
                         div.setAttribute("id", div.id = elementPrefix + ctlSelID + i);
                         div.style.cursor = "default";
                         if( object[i].text==$(inputPrefix + ctlSelID).value )
                         div.className = selStyle;
                         else
                         div.className = unselStyle;
                         div.innerText = div.title = object[i].text;
                         div.style.height = height;
                         div.setAttribute("value", object[i].value);
                         div.onmouseover = function()
                         {
                                 for(var j=0; j<$(containerPrefix + ctlSelID).childNodes.length; j++)
                                 {
                                         if($(containerPrefix + ctlSelID).childNodes[j]==this)
                                         $(containerPrefix + ctlSelID).childNodes[j].className = selStyle;
                                         else
                                         $(containerPrefix + ctlSelID).childNodes[j].className = unselStyle;
                                 }                                                
                         };
                         div.onclick = function()
                         {
                                 $(inputPrefix + ctlSelID).value = this.innerText;
                                 $(containerPrefix + ctlSelID).style.display = "none";
                         };
                         $(containerPrefix + ctlSelID).appendChild(div);
                 }
                 return;
         }
         if( $(containerPrefix + ctlSelID).style.display=="none" )
         {
                 for(var i=0; i<object.length; i++)
                 {
                         if( object[i].text==$(inputPrefix + ctlSelID).value )
                         $(elementPrefix + ctlSelID + i).className = selStyle;
                         else
                         $(elementPrefix + ctlSelID + i).className = unselStyle;
                 }
                 $(containerPrefix + ctlSelID).style.display="block";
                 return;
         }
         if( $(containerPrefix + ctlSelID).style.display=="block" )
         {
                 $(containerPrefix + ctlSelID).style.display="none";
                 return;
         }
 }};
 simulateSelect.prototype.getValue = function(ctlSelID) { with(this)
 {
         if( $(inputPrefix + ctlSelID) )
         return $(inputPrefix + ctlSelID).value;
         else
         return null;
 }};
 simulateSelect.prototype.addEvent = function(w, h) { with(this)
 {
 }};
 //-----------------------------------------------
 //window.onerror = Function("return true;");
 //  IE only.
 document.attachEvent("onmousedown", function() {
                                                 a.checkupOnMouseDown(event);
                                                 b.checkupOnMouseDown(event);
                                                 c.checkupOnMouseDown(event)
                                                 }
                                         );
 //-->
 </SCRIPT>
 <h1> simulate combox control </h1>
 <h4> demonstrate </h4>
 <p>
 <select id="s0">
 <option value="- please select your options -"> - please select your options -</option>
 <option value="1">option1</option>
 <option value="2">option2</option>
 <option value="3">option3</option>
 <option value="4">option4</option>
 <option value="5">option5</option>
 </select>
 </p>
 <p>
 <select id="s1">
 <option value="- please select your options -"> - please select your options -</option>
 <option value="1">1option1</option>
 <option value="2">1option2</option>
 <option value="3">1option3</option>
 <option value="4">1option4</option>
 <option value="5">1option5</option>
 </select>
 </p>
 <p>
 <select id="s2">
 <option value="- please select your options -"> - please select your options -</option>
 <option value="1">2option1</option>
 <option value="2">2option2</option>
 <option value="3">2option3</option>
 <option value="4">2option4</option>
 <option value="5">2option5</option>
 </select>
 </p>
 <p>
 <select id="s3">
 <option value="- please select your options -"> - please select your options -</option>
 <option value="1">3option1</option>
 <option value="2">3option2</option>
 <option value="3">3option3</option>
 <option value="4">3option4</option>
 <option value="5">3option5</option>
 </select>
 </p>
 <button onclick="alert(a.getValue('s1') + '\n\n' + b.getValue('s2'))" class="CtlSelect"> Get value </button>
 <SCRIPT LANGUAGE="JavaScript">
 <!--
         var a = new simulateSelect();
         a.style("CtlSelect", "selected", "unselected");
         a.init("s1");
         var b = new simulateSelect();
         b.style("CtlSelect1", "selected1", "unselected1");
         b.width = 300;
         b.init("s2");
         var c = new simulateSelect();
         c.style("CtlSelect2", "selected2", "unselected2");
         c.width = 320;
         c.init("s3");
 //-->
 </SCRIPT>
 <h4> description </h4>
 <pre>
 //-------------------------------------------------------------
 //  @ Module: simulate select control, IE only.
 //  @ Debug in: IE 6.0
 //  @ Script by: blueDestiny, never-online
 //  @ Updated: 2006-3-22
 //  @ Version: 1.0 apha
 //  @ Email: blueDestiny [at] 126.com
 //  @ Website: http://www.never-online.net
 //  @ Please Hold this item please.
 //
 //  API
 //  @ simulateSelect(ctlSelIDs)
 //    ctlSelIDs: select control IDs, split by ","
 //
 //  @ simulateSelect.style(ctlStyle[,selStyle][,unselStyle])
 //    ctlStyle: main control combox css class name
 //    selStyle: when mouseover or option focus css class name
 //    unselStyle: options blur's css class name
 //
 //  @ simulateSelect.width=(widthPX)
 //    widthPX must be a digit number.
 //
 //  @ simulateSelect.height=(heightPX)
 //    heightPX must be a digit number.
 //
 //  -------------- for the next Version ----------
 //  @ simulateSelect.readOnly = (blnReadOnly)
 //    blnReadOnly must be a boolean type or a number type.
 //  @ simulateSelect.addEvent(w, h)
 //    w: fire handler's event.
 //    h: handler function.
 //-------------------------------------------------------------
 </pre>
 <div class="copyright">
 Power By blueDestiny, never-online
http://www.never-online.net
 </div>
 </BODY>
 </HTML>

我只是一个大侠!

UID

帖子

154

精华

积分

417

阅读权限

150

来自

ismole

在线时间

32 小时

注册时间

2008-3-31

最后登录

2008-6-25

TOP

海螺大侠

IsMole Team

Rank: 8 Rank: 8

大侠

6^# 大中小发表于 2008-6-24 09:22 只看该作者

十、将HTML自动转为JS代码

复制内容到剪贴板

代码:

<script>
 function toScript(val)
 {
 var value = val.value
 value  = value.replace(/\\/gi,"\\\\").replace(/"/gi,"\\\"").replace(/'/gi,"\\\'")
 valArr = value.split("\r\n")
 value=""

 for (i=0; i<valArr.length; i++)
 {
   value += (i==0) ? "info =" : ""
   value += "  \"" + valArr[i]
   value += (i!=valArr.length-1) ? "\" +\"\\n\"+\n" : "\"\n" 
 }
 value+="\ndocument.write(info)"

 val.value = value
 }
 </script> 
 <input type=button value="将 HTML 转为 JavaScript" onclick=toScript(document.all["code"])><br>
 <textarea id=code cols=75 rows=20>
 <table width="300">
 <tr><td align="right">A</td></tr>
 </table></textarea>

我只是一个大侠!

UID

帖子

154

精华

积分

417

阅读权限

150

来自

ismole

在线时间

32 小时

注册时间

2008-3-31

最后登录

2008-6-25

TOP

海螺大侠

IsMole Team

Rank: 8 Rank: 8

大侠

7^# 大中小发表于 2008-6-24 09:26 只看该作者

十一、用层模拟可移动的小窗口

复制内容到剪贴板

代码:

<html>
 <head>
 <title>_xWin</title>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 <META NAME="Description" CONTENT="http://www.xuemu.net">
 <style type='text/css'>
 <!--
 body{font-size:12px;}
 a:visited{text-decoration:none;color:slategray;}
 a:hover{text-decoration:underline;color:slategray;}
 a:link{text-decoration:none;color:slategray;}
 -->
 </style>
 <script language=JScript>
 <!--
 //可以打包为js文件;
 var x0=0,y0=0,x1=0,y1=0;
 var offx=6,offy=6;
 var moveable=false;
 var hover='orange',normal='#336699';//color;
 var index=10000;//z-index;
 //开始拖动;
 function startDrag(obj)
 {
 if(event.button==1)
 {
 //锁定标题栏;
 obj.setCapture();
 //定义对象;
 var win = obj.parentNode;
 var sha = win.nextSibling;
 //记录鼠标和层位置;
 x0 = event.clientX;
 y0 = event.clientY;
 x1 = parseInt(win.style.left);
 y1 = parseInt(win.style.top);
 //记录颜色;
 normal = obj.style.backgroundColor;
 //改变风格;
 obj.style.backgroundColor = hover;
 win.style.borderColor = hover;
 obj.nextSibling.style.color = hover;
 sha.style.left = x1 + offx;
 sha.style.top = y1 + offy;
 moveable = true;
 }
 }
 //拖动;
 function drag(obj)
 {
 if(moveable)
 {
 var win = obj.parentNode;
 var sha = win.nextSibling;
 win.style.left = x1 + event.clientX - x0;
 win.style.top = y1 + event.clientY - y0;
 sha.style.left = parseInt(win.style.left) + offx;
 sha.style.top = parseInt(win.style.top) + offy;
 }
 }
 //停止拖动;
 function stopDrag(obj)
 {
 if(moveable)
 {
 var win = obj.parentNode;
 var sha = win.nextSibling;
 var msg = obj.nextSibling;
 win.style.borderColor = normal;
 obj.style.backgroundColor = normal;
 msg.style.color = normal;
 sha.style.left = obj.parentNode.style.left;
 sha.style.top = obj.parentNode.style.top;
 obj.releaseCapture();
 moveable = false;
 }
 }
 //获得焦点;
 function getFocus(obj)
 {
 if(obj.style.zIndex!=index)
 {
 index = index + 2;
 var idx = index;
 obj.style.zIndex=idx;
 obj.nextSibling.style.zIndex=idx-1;
 }
 }
 //最小化;
 function min(obj)
 {
 var win = obj.parentNode.parentNode;
 var sha = win.nextSibling;
 var tit = obj.parentNode;
 var msg = tit.nextSibling;
 var flg = msg.style.display=="none";
 if(flg)
 {
 win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;
 sha.style.height = win.style.height;
 msg.style.display = "block";
 obj.innerHTML = "0";
 }
 else
 {
 win.style.height = parseInt(tit.style.height) + 2*2;
 sha.style.height = win.style.height;
 obj.innerHTML = "2";
 msg.style.display = "none";
 }
 }
 //创建一个对象;
 function xWin(id,w,h,l,t,tit,msg)
 {
 index = index+2;
 this.id = id;
 this.width = w;
 this.height = h;
 this.left = l;
 this.top = t;
 this.zIndex = index;
 this.title = tit;
 this.message = msg;
 this.obj = null;
 this.bulid = bulid;
 this.bulid();
 }
 //初始化;
 function bulid()
 {
 var str = ""
 + "<div id=xMsg" + this.id + " "
 + "style='"
 + "z-index:" + this.zIndex + ";"
 + "width:" + this.width + ";"
 + "height:" + this.height + ";"
 + "left:" + this.left + ";"
 + "top:" + this.top + ";"
 + "background-color:" + normal + ";"
 + "color:" + normal + ";"
 + "font-size:8pt;"
 + "font-family:Tahoma;"
 + "position:absolute;"
 + "cursor:default;"
 + "border:2px solid " + normal + ";"
 + "' "
 + "onmousedown='getFocus(this)'>"
 + "<div "
 + "style='"
 + "background-color:" + normal + ";"
 + "width:" + (this.width-2*2) + ";"
 + "height:20;"
 + "color:white;"
 + "' "
 + "onmousedown='startDrag(this)' "
 + "onmouseup='stopDrag(this)' "
 + "onmousemove='drag(this)' "
 + "ondblclick='min(this.childNodes[1])'"
 + ">"
 + "<span style='width:" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + "</span>"
 + "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='min(this)'>0</span>"
 + "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='ShowHide(\""+this.id+"\",null)'>r</span>"
 + "</div>"
 + "<div style='"
 + "width:100%;"
 + "height:" + (this.height-20-4) + ";"
 + "background-color:white;"
 + "line-height:14px;"
 + "word-break:break-all;"
 + "padding:3px;"
 + "'>" + this.message + "</div>"
 + "</div>"
 + "<div id=xMsg" + this.id + "bg style='"
 + "width:" + this.width + ";"
 + "height:" + this.height + ";"
 + "top:" + this.top + ";"
 + "left:" + this.left + ";"
 + "z-index:" + (this.zIndex-1) + ";"
 + "position:absolute;"
 + "background-color:black;"
 + "filter:alpha(opacity=40);"
 + "'></div>";
 document.body.insertAdjacentHTML("beforeEnd",str);
 }
 //显示隐藏窗口
 function ShowHide(id,dis){
 var bdisplay = (dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):dis
 document.getElementById("xMsg"+id).style.display = bdisplay;
 document.getElementById("xMsg"+id+"bg").style.display = bdisplay;
 }
 //-->
 </script>
 <script language='JScript'>
 <!--
 function initialize()
 {
 var a = new xWin("1",160,200,200,200,"窗口1","xWin <br> A Cool Pop Div Window<br>XueMu.Net<br>2006-5-13");
 var b = new xWin("2",240,200,100,100,"窗口2","Welcome to visited my personal website:<br><a href=http://www.xuemu.net target=_blank>http://www.xuemu.net</a><br>请多提建议噢<br><br>感谢您的关注！"); 
 var c = new xWin("3",200,160,250,50,"窗口3","Copyright by <a href='#'>Wildwind</a>!");
 ShowHide("1","none");//隐藏窗口1
 }
 window.onload = initialize;
 //-->
 </script>
 </head>
 <base target="_blank">
 <body onselectstart='return false' oncontextmenu='return false' >
 <a onclick="ShowHide('1',null);return false;" href="">窗口1</a>
 <a onclick="ShowHide('2',null);return false;" href="">窗口2</a>
 <a onclick="ShowHide('3',null);return false;" href="">窗口3</a>
 </body>
 </html>

我只是一个大侠!

UID

帖子

154

精华

积分

417

阅读权限

150

来自

ismole

在线时间

32 小时

注册时间

2008-3-31

最后登录

2008-6-25

TOP

海螺大侠

IsMole Team

Rank: 8 Rank: 8

大侠

8^# 大中小发表于 2008-6-24 09:26 只看该作者

十二、一个模仿图片透明渐变做的表格颜色渐变效果

复制内容到剪贴板

代码:

<HTML>
 <HEAD>
 <TITLE>dancepower.cn</TITLE>
 <SCRIPT language=JavaScript> 
 // Flash table Extension for Dreamwever ,by dio([email]diopex@sina.com[/email])
 nereidFadeObjects = new Object();
 nereidFadeTimers = new Object();
 function nereidFade(object, destOp, rate, delta){
 if (!document.all)
 return
     if (object != "[object]"){  //do this so I can take a string too
         setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
         return;
     }
     clearTimeout(nereidFadeTimers[object.sourceIndex]);
     diff = destOp-object.filters.alpha.opacity;
     direction = 1;
     if (object.filters.alpha.opacity > destOp){
         direction = -1;
     }
     delta=Math.min(direction*diff,delta);
     object.filters.alpha.opacity+=direction*delta;
     if (object.filters.alpha.opacity != destOp){
         nereidFadeObjects[object.sourceIndex]=object;
         nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
     }
 }
 </SCRIPT>
 </HEAD>
 <BODY text=#000000 bgColor=#ffffff leftMargin=0 topMargin=0 marginheight="0" 
 marginwidth="0">
 <TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" border=0>
   <TBODY>
   <TR>
     <TD align=center>
       <TABLE borderColor=#ffffff height=100 cellSpacing=1 cellPadding=1 
       width=100 align=center bgColor=#000033 border=1>
         <TBODY>
         <TR align=center>
           <TD onmouseover=nereidFade(this,100,10,5) 
           style="FILTER: alpha(opacity=70)" onmouseout=nereidFade(this,50,10,5) 
           bgColor=#00ccff><FONT face=verdana color=#ffffff 
 size=1>dio</FONT></TD>
           <TD onmouseover=nereidFade(this,100,10,5) 
           style="FILTER: alpha(opacity=70)" onmouseout=nereidFade(this,50,10,5) 
           bgColor=#ff9900><FONT face=verdana color=#ffffff 
         size=1>pex</FONT></TD></TR>
         <TR align=center>
           <TD onmouseover=nereidFade(this,100,10,5) 
           style="FILTER: alpha(opacity=70)" onmouseout=nereidFade(this,50,10,5) 
           bgColor=#ff3399><FONT face=verdana color=#ffffff 
 size=1>pex</FONT></TD>
           <TD onmouseover=nereidFade(this,100,10,5) 
           style="FILTER: alpha(opacity=70)" onmouseout=nereidFade(this,50,10,5) 
           bgColor=#33ff66><FONT face=verdana color=#ffffff 
         size=1>dio</FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></BODY></HTML>

我只是一个大侠!

UID

帖子

154

精华

积分

417

阅读权限

150

来自

ismole

在线时间

32 小时

注册时间

2008-3-31

最后登录

2008-6-25

TOP

海螺大侠

IsMole Team

Rank: 8 Rank: 8

大侠

9^# 大中小发表于 2008-6-24 09:27 只看该作者

十三、来访统计
<script language="JavaScript">

</script>

我只是一个大侠!

UID

帖子

154

精华

积分

417

阅读权限

150

来自

ismole

在线时间

32 小时

注册时间

2008-3-31

最后登录

2008-6-25

TOP

海螺大侠

IsMole Team

Rank: 8 Rank: 8

大侠

10^# 大中小发表于 2008-6-24 09:30 只看该作者

十四、css模拟title和alt的提示效果

复制内容到剪贴板

代码:

<style>
 .info {position:relative;background:#fff;color:#666; text-decoration:none;font-size:12px;width:150px;text-align:center;border:1px solid #ccc;height:25px;line-height:25px;}/*设置链接的属性,一定要设置为relative才能使提示层跟着链接走*/
 .info:hover {background:#eee;color:#333;}
 .info span {display: none }/*设置正常下的span为隐藏状态*/
 .info:hover span /*设置hover下的span属性为呈现状态,并设置提示层的位置*/{display:block;position:absolute;top:30px;left:60px;width:130px;
 border:1px solid #ff0000; background:#fff; color:#000;padding:5px;text-align:left;}
 </style>
 <body>
 <a class="info" href="http://www.ismole.net">http://www.ismole.net<span>这是我们公司的论坛，里面有很多精彩的东东哦!欢迎大家常来交流</span></a>
 <a class="info" href="http://www.ismole.net">http://www.ismole.net<span>这是我们公司的论坛，里面有很多精彩的东东哦!欢迎大家常来交流</span></a>
 <a class="info" href="http://www.ismole.net">http://www.ismole.net<span>这是我们公司的论坛，里面有很多精彩的东东哦!欢迎大家常来交流</span></a>
 <a class="info" href="http://www.ismole.net">http://www.ismole.net<span>这是我们公司的论坛，里面有很多精彩的东东哦!欢迎大家常来交流</span></a>
 <a class="info" href="http://www.ismole.net">http://www.ismole.net<span>这是我们公司的论坛，里面有很多精彩的东东哦!欢迎大家常来交流</span></a>
 </body>

十五、功能强大的旋转导航文字圈

复制内容到剪贴板

代码:

<body>
 <style type="text/css"> 
 BODY 
 { 
 background : #efefef; 
 font : 12px Verdana; 
 } 
 A { color : #e70 } 
 A:hover { text-decoration : none } 
 .spin 
 { 
 position : absolute; 
 visibility : hidden; 
 z-index : auto; 
 } 
 .spin A 
 { 
 font : 12px Verdana; 
 text-decoration : none; 
 } 
 .spin A:hover 
 { 
 text-decoration : underline overline; 
 } 
 </style> 
 <script language="JavaScript1.2">
 function getPageSize()
 {
         this.x = document.getElementsByTagName('html').item(0).clientWidth||document.getElementsByTagName('html').item(0).offsetWidth||document.body.offsetWidth||innerWidth
         this.y = document.getElementsByTagName('html').item(0).clientHeight||document.getElementsByTagName('html').item(0).offsetHeight||document.body.offsetHeight||innerHeight
         this.x2 = parseInt(this.x/2)||0
         this.y2 = parseInt(this.y/2)||0
         this.sx = document.body.scrollWidth||0
         this.sy = document.body.scrollHeight||0
 }
 var pg
 var pi = 3.1415
 function spinMenu(cls,rad,eSpd,rSpd,dir,x,y,noCt,runEx)
 {
         pg = new getPageSize()
         this.cls = cls
         this.rad = rad
         this.eSpd = eSpd
         this.rSpd = rSpd
         this.dir = dir ? 1 : -1
         this.x = x<0 ? pg.x2 : x
         this.y = y<0 ? pg.y2 : y
         this.runEx = runEx||0
         this.noCt = noCt||0
         this.r = 0 // radius flux
         this.ex = 0 // expand timeout
         this.ct = 0 // contract timeout
         this.rt = 1 // rotate timeout
         this.vis = 0 // visibility
         this.rNum = 0 // rotational flux
         this.rSpd2 = 0 // rSpd holder
         this.exDone = 0 // expand complete?
         this.ctDone = 1 // contract complete?
         this.toFig = 0
         this.atX = 0
         this.atY = 0
         this.url = 0
         this.target = 0
         eval(this.obj + "=this")
         this.items = new Array()
         this.el = document.getElementsByTagName('div')
         for(i=0;(this.el.item(i));i++)
         {
                 if(this.el.item(i).className==this.cls)
                 {
                         this.el.item(i).onmouseover = new Function(this.obj+'.stop()')
                         this.el.item(i).onmouseout = new Function(this.obj+'.rotate()')
                         this.el.item(i).onclick = new Function(this.obj+'.contract()')
                         this.items[this.items.length] = this.el.item(i)
                 }
         }
         delete this.el
         for(i=0;(this.items[i]);i++)
         {
                 if(!this.items[i].childNodes.item(0).nodeValue)
                 {
                         this.items[i].childNodes.item(0).onmouseover = new Function('status=this.href;return true')
                         this.items[i].childNodes.item(0).onmouseout = new Function('status=\'\';return true')
                         this.items[i].childNodes.item(0).onclick = new Function(this.obj+'.setURL(this.href,this.target);return false')
                         this.items[i].childNodes.item(0).onfocus = new Function('this.blur()')
                 }
         }
         return this
 }
 spinMenu.prototype.init = function()
 {
         this.hide()
         this.place()
         this.expand()
 }
 spinMenu.prototype.rotate = function()
 {
         if(this.rSpd)
         {
                 this.rNum += pi/(1000/this.rSpd)*this.dir
                 if(this.exDone)
                 {
                         this.place()
                         clearTimeout(this.rt)
                         this.rt = setTimeout(this.obj+'.rotate()',20)
                 }
         }
 }
 spinMenu.prototype.stop = function()
 {
         clearTimeout(this.rt)
         this.rt = 0
 }
 spinMenu.prototype.expand = function()
 {
         if(this.exDone!=1)
         {
                 this.ctDone=0
                 if(!this.vis) this.show()
                 if(this.runEx) eval(this.runEx)
                 if(this.ct!=0)
                 {
                         clearTimeout(this.ct)
                         this.ct = 0
                 }
                 if(this.r<this.rad)
                 {
                         this.r += this.eSpd
                         if(this.rSpd2==0) this.rSpd2 = this.rSpd
                         this.rSpd = this.eSpd*3
                         this.rotate()
                         this.place()
                         this.ex = setTimeout(this.obj+'.expand()',10)
                 }
                 else
                 {
                         this.ex = 0
                         this.rSpd = this.rSpd2
                         this.rSpd2 = 0
                         this.ctDone = 0
                         this.exDone = 1
                         this.rotate()
                 }
         }
 }
 spinMenu.prototype.contract = function()
 {
         if(this.ctDone!=1&&!this.noCt)
         {
                 this.exDone = 0
                 if(this.ex!=0)
                 {
                         clearTimeout(this.ex)
                         this.ex = 0
                 }
                 if(this.r>0)
                 {
                         this.r -= this.eSpd
                         if(this.rSpd2==0) this.rSpd2 = this.rSpd
                         this.rSpd = this.eSpd
                         this.rotate()
                         this.place()
                         this.ct = setTimeout(this.obj+'.contract()',10)
                 }
                 else
                 {
                         this.rSpd = this.rSpd2
                         this.rSpd2 = 0
                         this.rNum = 0
                         this.stop()
                         this.hide()
                         this.exDone = 0
                         this.ctDone = 1
                         this.goURL()
                 }
         }
         else this.goURL()
 }
 spinMenu.prototype.place = function()
 {
         for(i=0;(this.items[i]);i++)
         {
                 this.atPt(i)
                 this.items[i].style.left = this.atX-(this.items[i].offsetWidth/2)+'px'
                 this.items[i].style.top = this.atY-(this.items[i].offsetHeight/2)+'px'
         }
 }
 spinMenu.prototype.atPt = function(pt)
 {
         this.toFig = pi/(this.items.length/2)*(pt+this.rNum)
         this.atX = parseInt(Math.cos(this.toFig)*this.r+this.x)
         this.atY = parseInt(Math.sin(this.toFig)*this.r+this.y)
 }
 spinMenu.prototype.show = function()
 {
         for(i=0;(this.items[i]);i++)
         {
                 this.items[i].style.display = 'block'
                 this.items[i].style.visibility = 'visible'
                 this.vis = 1
         }
 }
 spinMenu.prototype.hide = function()
 {
         for(i=0;(this.items[i]);i++)
         {
                 this.items[i].style.visibility = 'hidden'
                 this.items[i].style.display = 'none'
                 this.vis = 0
         }
 }
 spinMenu.prototype.changeDir = function()
 {
         this.dir = this.dir==1 ? -1 : 1
 }
 spinMenu.prototype.setURL = function(url,target)
 {
         this.url = url
         this.target = target
 }
 spinMenu.prototype.goURL = function()
 {
         if(this.url)
         {
                 if(!this.target)
                         if(document.getElementsByTagName('base').length) this.target = document.getElementsByTagName('base').item(0).target
                 if(this.target)
                 {
                         if(this.target=='_blank') open(this.url)
                         else if(this.target=='_parent') parent.location = this.url
                         else if(this.target=='_top') top.location = this.url
                         else if(this.target.indexOf('_')<0)
                         {
                                 if(eval('parent.'+this.target)) eval('parent.'+this.target+'.document.location=this.url')
                                 else if(eval('top.'+this.target)) eval('top.'+this.target+'.document.location=this.url')
                                 else open(this.url,this.target)
                         }
                         else location = this.url
                 }
                 else location = this.url
                 this.url = 0
         }
 }
 </script> 
 <script language="JavaScript1.2" type="text/javascript"> 
 function centerIt() 
 { 
 pg = new getPageSize() 
 menu.x = pg.x2-10 
 menu.y = pg.y2 
 } 
 function initSpinMenu() 
 { 
 menu = new spinMenu( 
 'spin', // className 
 120, // radius 
 12, // expand/contract speed 
 3, // rotational speed 
 1, // direction (cw=1,ccw=0) 
 -1, // origin x 
 -1, // origin y 
 0, // stay expanded? 
 0 // run before expand 
 ) 
 menu.init() 
 } 
 onload=initSpinMenu 
 onresize=centerIt 
 </script> 
 <base target="newWin"> 
 <div align="right"><a href="javascript:menu.expand()" target="_self">展开</a> | <a href="javascript:menu.contract()" target="_self">隐藏</a> | <a href="javascript:menu.stop()" target="_self">停止</a> | <a href="javascript:menu.rotate()" target="_self">旋转</a> | <a href="javascript:menu.changeDir()" target="_self">改变旋转方向</a></div> 
 <div class="spin"><a href="http://www.butong.net">网页特效库</a></div> 
 <div class="spin"><a href="http://www.butong.net/background/index.htm">背景特效</a></div> 
 <div class="spin"><a href="http://www.butong.net/moban/index.htm">整站模板</a></div> 
 <div class="spin"><a href="http://www.butong.net/navigation/index.htm">导航特效</a></div> 
 <div class="spin"><a href="http://www.butong.net/time/index.htm">时间特效</a></div> 
 <div class="spin"><a href="http://www.butong.net/img/index.htm">图象特效</a></div> 
 <div class="spin"><a href="http://www.butong.net/text/index.htm">文本特效</a></div> </body>

我只是一个大侠!

UID

帖子

154

精华

积分

417

阅读权限

150

来自

ismole

在线时间

32 小时

注册时间

2008-3-31

最后登录

2008-6-25

TOP

海螺大侠

IsMole Team

Rank: 8 Rank: 8

大侠

12^# 大中小发表于 2008-6-24 10:13 只看该作者

十六、网页左侧隐藏导航菜单~

复制内容到剪贴板

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <!-- saved from url=(0046)http://vip.aou.cn/csqf/new_page_3.htm -->
 <HTML><HEAD><TITLE>New Page 28</TITLE>
 <META http-equiv=Content-Type content="text/html; charset=gb2312">
 <META content="MSHTML 6.00.2800.1491" name=GENERATOR>
 <META content=FrontPage.Editor.Document name=ProgId>
 <STYLE>#ssm2 A {
 FONT-SIZE: 12px; COLOR: #808080; FONT-FAMILY: verdana; TEXT-DECORATION: none
 }
 #ssm2 A:hover {
 COLOR: #ccff33
 }
 body{background:url() no-repeat right center fixed;}
 </STYLE>
 </HEAD>
 <BODY>
 <SCRIPT language=JavaScript1.2>
 function MM_displayStatusMsg(msgStr) { 
 status=msgStr;
 document.MM_returnValue = true;
 }
 function highlight(x){
 document.forms[x].elements[0].focus()
 document.forms[x].elements[0].select()
 }
 function MM_jumpMenu(targ,selObj,restore){ 
 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
 if (restore) selObj.selectedIndex=0;
 }
 var NS
 IE=document.all;
 NS=document.layers;
 hdrFontFamily="Verdana";
 hdrFontSize="2";
 hdrFontColor="white";
 hdrBGColor="#CCCCCC";
 linkFontFamily="Verdana";
 linkFontSize="2";
 linkBGColor="white";
 linkOverBGColor="#CCCCCC";
 linkTarget="_top";
 YOffset=60;
 staticYOffset=20;
 menuBGColor="#CCCCCC";
 menuIsStatic="no";
 menuHeader="Main Index"
 menuWidth=150; // Must be a multiple of 5!
 staticMode="advanced"
 barBGColor="#C0C0C0";
 barFontFamily="Verdana";
 barFontSize="2";
 barFontColor="white";
 barText="MENU";
 function moveOut() {
 if (window.cancel) {
 cancel="";
 }
 if (window.moving2) {
 clearTimeout(moving2);
 moving2="";
 }
 if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) {
 if (IE) {ssm2.style.pixelLeft += (5%menuWidth);
 }
 if (NS) {
 document.ssm2.left += (5%menuWidth);
 }
 moving1 = setTimeout('moveOut()', 5)
 }
 else {
 clearTimeout(moving1)
 }
 };
 function moveBack() {
 cancel = moveBack1()
 }
 function moveBack1() {
 if (window.moving1) {
 clearTimeout(moving1)
 }
 if ((IE && ssm2.style.pixelLeft>(-menuWidth))||(NS && document.ssm2.left>(-150))) {
 if (IE) {ssm2.style.pixelLeft -= (5%menuWidth);
 }
 if (NS) {
 document.ssm2.left -= (5%menuWidth);
 }
 moving2 = setTimeout('moveBack1()', 5)}
 else {
 clearTimeout(moving2)
 }
 };
 lastY = 0;
 function makeStatic(mode) {
 if (IE) {winY = document.body.scrollTop;var NM=ssm2.style
 }
 if (NS) {winY = window.pageYOffset;var NM=document.ssm2
 }
 if (mode=="smooth") {
 if ((IE||NS) && winY!=lastY) {
 smooth = .2 * (winY - lastY);
 if(smooth > 0) smooth = Math.ceil(smooth);
 else smooth = Math.floor(smooth);
 if (IE) NM.pixelTop+=smooth;
 if (NS) NM.top+=smooth;
 lastY = lastY+smooth;
 }
 setTimeout('makeStatic("smooth")', 1)
 }
 else if (mode=="advanced") {
 if ((IE||NS) && winY>YOffset-staticYOffset) {
 if (IE) {NM.pixelTop=winY+staticYOffset
 }
 if (NS) {NM.top=winY+staticYOffset
 }
 }
 else {
 if (IE) {NM.pixelTop=YOffset
 }
 if (NS) {NM.top=YOffset-7
 }
 }
 setTimeout('makeStatic("advanced")', 1)
 }
 }
 function init() {
 if (IE) {
 ssm2.style.pixelLeft = -menuWidth;
 ssm2.style.visibility = "visible"
 }
 else if (NS) {
 document.ssm2.left = -menuWidth;
 document.ssm2.visibility = "show"
 }
 else {
 alert('Choose either the "smooth" or "advanced" static modes!')
 }
 }
 function MM_displayStatusMsg(msgStr) { 
 status=msgStr;
 document.MM_returnValue = true;
 }
 </SCRIPT>
 <SCRIPT language=JavaScript1.2>
 if (IE) {document.write('<DIV ID="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')}
 if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')}
 tempBar=""
 for (i=0;i<barText.length;i++) {
 tempBar+=barText.substring(i, i+1)+"<BR>"}
 document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></font></td><td align="center" rowspan="100" width="16" bgcolor="'+barBGColor+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD></tr>')
 function addItem(text, link, target) {
 if (!target) {target=linkTarget}
 document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssm2Items">'+text+'</A></FONT></LAYER></ILAYER></TD></TR>')}
 function addHdr(text) {
 document.write('<tr><td bgcolor="'+hdrBGColor+'" WIDTH="140"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></font></td></tr>')}
 //Only edit the script between HERE
 addItem('偶和叶子', 'http://vip.aou.cn/csqf/about.htm', '');
 addItem('聆听心海', 'http://vip.aou.cn/csqf/linting.htm', '');
 addItem('风言风语', 'http://vip.aou.cn/csqf/fyfy.htm', '');
 addItem('风行风影', 'http://vip.aou.cn/csqf/fxfy.htm', '');
 addItem('雁过留声', 'http://csqf.etp21.com/', '_blank');
 addHdr('WELCOME TO');
 addItem('经广俱乐部', 'http://dj973.tz315.net', '_blank');
 // and HERE! No more!
 document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </font></td></TR></table>')
 if (IE) {document.write('</DIV>')}
 if (NS) {document.write('</LAYER>')}
 if ((IE||NS) && (menuIsStatic=="yes"&&staticMode)) {makeStatic(staticMode);}
 </SCRIPT>
 <SCRIPT>
 window.onload=init
 </SCRIPT>
 <p style="height:1000px;"></p>
 </BODY></HTML>

我只是一个大侠!

UID

帖子

154

精华

积分

417

阅读权限

150

来自

ismole

在线时间

32 小时

注册时间

2008-3-31

最后登录

2008-6-25

TOP

海螺大侠

IsMole Team

Rank: 8 Rank: 8

大侠

13^# 大中小发表于 2008-6-24 10:16 只看该作者

十七、焦点图片模糊变化切换效果

复制内容到剪贴板

代码:

<script language="JavaScript1.1">
 <!--
 var slidespeed=3000
 var slideimages=new Array("http://www.makewing.com/lanren/jscode/js-0079/images/01.jpg","http://www.makewing.com/lanren/jscode/js-0079/images/02.jpg","http://www.makewing.com/lanren/jscode/js-0079/images/03.jpg","http://www.makewing.com/lanren/jscode/js-0079/images/04.jpg")
 var slidelinks=new Array("#","#","#","#")

 var imageholder=new Array()
 var ie55=window.createPopup
 for (i=0;i<slideimages.length;i++){
 imageholder[i]=new Image()
 imageholder[i].src=slideimages[i]
 }

 function gotoshow(){
 window.location=slidelinks[whichlink]
 }
 //-->
 </script>
 <a href="javascript:gotoshow()"><img src="photo/200202261.jpg" name="slide" border=0 style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)"></a>
 <script language="JavaScript1.1">
 <!--
 var whichlink=0
 var whichimage=0
 var pixeldelay=(ie55)? document.images.slide.filters[0].duration*1000 : 0
 function slideit(){
 if (!document.images) return
 if (ie55) document.images.slide.filters[0].apply()
 document.images.slide.src=imageholder[whichimage].src
 if (ie55) document.images.slide.filters[0].play()
 whichlink=whichimage
 whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
 setTimeout("slideit()",slidespeed+pixeldelay)
 }
 slideit()
 //-->
 </script>

我只是一个大侠!

UID

帖子

154

精华

积分

417

阅读权限

150

来自

ismole

在线时间

32 小时

注册时间

2008-3-31

最后登录

2008-6-25

TOP

海螺大侠

IsMole Team

Rank: 8 Rank: 8

大侠

14^# 大中小发表于 2008-6-24 10:18 只看该作者

十八、框架自定义

复制内容到剪贴板

代码:

<!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>
 body {
         margin:0px;
         padding:0px;
         font-size:12px;
         text-align:center;
 }
 body > div {
         text-align:center;
         margin-right:auto;
         margin-left:auto;
 }
 .content {
         width:900px;
 }
 .content .left {
         float:left;
         width:20%;
         border:1px solid #FF0000;
         margin:3px;
 }
 .content .center {
         float:left;
         border:1px solid #FF0000;
         margin:3px;
         width:57%
 }
 .content .right {
         float:right;
         width:20%;
         border:1px solid #FF0000;
         margin:3px
 }
 .mo {
         height:auto;
         border:1px solid #CCC;
         margin:3px;
         background:#FFF
 }
 .mo h1 {
         background:#ECF9FF;
         height:18px;
         padding:3px;
         cursor:move
 }
 .mo .nr {
         height:80px;
         border:1px solid #F3F3F3;
         margin:2px
 }
 h1 {
         margin:0px;
         padding:0px;
         text-align:left;
         font-size:12px
 }
 </style>
 <script>
 var dragobj={}
 window.onerror=function(){return false}
 function on_ini(){
 String.prototype.inc=function(s){return this.indexOf(s)>-1?true:false}
 var agent=navigator.userAgent
 window.isOpr=agent.inc("Opera")
 window.isIE=agent.inc("IE")&&!isOpr
 window.isMoz=agent.inc("Mozilla")&&!isOpr&&!isIE
 if(isMoz){
   Event.prototype.__defineGetter__("x",function(){return this.clientX+2})
   Event.prototype.__defineGetter__("y",function(){return this.clientY+2})
 }
 basic_ini()
 }
 function basic_ini(){
 window.$=function(obj){return typeof(obj)=="string"?document.getElementById(obj):obj}
 window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}
 }
 window.onload=function(){
 on_ini()
 var o=document.getElementsByTagName("h1")
 for(var i=0;i<o.length;i++){
   o[i].onmousedown=function(e){
    if(dragobj.o!=null)
     return false
    e=e||event
    dragobj.o=this.parentNode
    dragobj.xy=getxy(dragobj.o)
    dragobj.xx=new Array((e.x-dragobj.xy[1]),(e.y-dragobj.xy[0]))
    dragobj.o.style.width=dragobj.xy[2]+"px"
    dragobj.o.style.height=dragobj.xy[3]+"px"
    dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"
    dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"   
    dragobj.o.style.position="absolute"
    var om=document.createElement("div")
    dragobj.otemp=om
    om.style.width=dragobj.xy[2]+"px"
    om.style.height=dragobj.xy[3]+"px"
    dragobj.o.parentNode.insertBefore(om,dragobj.o)
    return false
   }
 }
 }
 document.onselectstart=function(){return false}
 window.onfocus=function(){document.onmouseup()}
 window.onblur=function(){document.onmouseup()}
 document.onmouseup=function(){
 if(dragobj.o!=null){
   dragobj.o.style.width="auto"
   dragobj.o.style.height="auto"
   dragobj.otemp.parentNode.insertBefore(dragobj.o,dragobj.otemp)
   dragobj.o.style.position=""
   oDel(dragobj.otemp)
   dragobj={}
 }
 }
 document.onmousemove=function(e){
 e=e||event
 if(dragobj.o!=null){
   dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"
   dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"
   createtmpl(e)
 }
 }
 function getxy(e){
 var a=new Array()
 var t=e.offsetTop;
 var l=e.offsetLeft;
 var w=e.offsetWidth;
 var h=e.offsetHeight;
 while(e=e.offsetParent){
   t+=e.offsetTop;
   l+=e.offsetLeft;
 }
 a[0]=t;a[1]=l;a[2]=w;a[3]=h
   return a;
 }
 function inner(o,e){
 var a=getxy(o)
 if(e.x>a[1]&&e.x<(a[1]+a[2])&&e.y>a[0]&&e.y<(a[0]+a[3])){
   if(e.y<(a[0]+a[3]/2))
    return 1;
   else
    return 2;
 }else
   return 0;
 }
 function createtmpl(e){
 for(var i=0;i<12;i++){
   if($("m"+i)==dragobj.o)
    continue
   var b=inner($("m"+i),e)
   if(b==0)
    continue
   dragobj.otemp.style.width=$("m"+i).offsetWidth
   if(b==1){
    $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i))
   }else{
    if($("m"+i).nextSibling==null){
     $("m"+i).parentNode.appendChild(dragobj.otemp)
    }else{
     $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i).nextSibling)
    }
   }
   return
 }
 for(var j=0;j<3;j++){
   if($("dom"+j).innerHTML.inc("div")||$("dom"+j).innerHTML.inc("DIV"))
    continue
   var op=getxy($("dom"+j))
   if(e.x>(op[1]+10)&&e.x<(op[1]+op[2]-10)){
    $("dom"+j).appendChild(dragobj.otemp)
    dragobj.otemp.style.width=(op[2]-10)+"px"
   }
 }
 }
 </script>
 </head>
 <body>
 <div class=content>
   <div class=left id=dom0>
     <div class=mo id=m0>
       <h1>dom0</h1>
       <div class="nr"></div>
     </div>
     <div class=mo id=m1>
       <h1>dom1</h1>
       <div class="nr"></div>
     </div>
     <div class=mo id=m2>
       <h1>dom2</h1>
       <div class="nr"></div>
     </div>
     <div class=mo id=m3>
       <h1>dom3</h1>
       <div class="nr"></div>
     </div>
   </div>
   <div class=center id=dom1>
     <div class=mo id=m4>
       <h1>dom4</h1>
       <div class="nr"></div>
     </div>
     <div class=mo id=m5>
       <h1>dom5</h1>
       <div class="nr"></div>
     </div>
     <div class=mo id=m6>
       <h1>dom6</h1>
       <div class="nr"></div>
     </div>
     <div class=mo id=m7>
       <h1>dom7</h1>
       <div class="nr"></div>
     </div>
   </div>
   <div class=right id=dom2>
     <div class=mo id=m8>
       <h1>dom8</h1>
       <div class="nr"></div>
     </div>
     <div class=mo id=m9>
       <h1>dom9</h1>
       <div class="nr"></div>
     </div>
     <div class=mo id=m10>
       <h1>dom10</h1>
       <div class="nr"></div>
     </div>
     <div class=mo id=m11>
       <h1>dom11</h1>
       <div class="nr"></div>
     </div>
   </div>
 </div>
 </body>
 </html>

我只是一个大侠!

UID

帖子

154

精华

积分

417

阅读权限

150

来自

ismole

在线时间

32 小时

注册时间

2008-3-31

最后登录

2008-6-25

TOP

海螺大侠

IsMole Team

Rank: 8 Rank: 8

大侠

15^# 大中小发表于 2008-6-24 14:12 只看该作者

十九、静态页面的分页效果

复制内容到剪贴板

代码:

<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>

 header
 <div id="divPagenation"></div>
 <div id="divContent"></div>
 footer
 <script language="jscript">
 <!--
 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=/.+[\?\&]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>

我只是一个大侠!

UID

帖子

154

精华

积分

417

阅读权限

150

来自

ismole

在线时间

32 小时

注册时间

2008-3-31

最后登录

2008-6-25

TOP