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();
- }
-
- 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);
- }
-
- 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;}
-
-
-
- Calendar();
复制代码
十二 进入,退出页面的各种效果:
进入页面
推出页面
这个是页面被载入和调出时的一些特效。duration表示特效的持续时间,以秒为单位。transition表示使用哪种特效,取值为1-23:
0 矩形缩小
1 矩形扩大
2 圆形缩小
3 圆形扩大
4 下到上刷新
5 上到下刷新
6 左到右刷新
7 右到左刷新
8 竖百叶窗
9 横百叶窗
10 错位横百叶窗
11 错位竖百叶窗
12 点扩散
13 左右到中间刷新
14 中间到左右刷新
15 中间到上下
16 上下到中间
17 右下到左上
18 右上到左下
19 左上到右下
20 左下到右上
21 横条
22 竖条
23 以上22种随机选择一种
十三 很酷的效果,表格被选中回变颜色:
- Mapabc地图无限
-
- var searchResult=new Array();//鼠标滑过时显示背景色
- function borderize(what,color,color2)
- {
- what.style.borderColor=color
- what.style.backgroundColor=color2
- }
-
- function borderize_on(e){
- if (document.all)
- source3=event.srcElement
- else if (document.getElementById)
- source3=e.target
- if (source3.className=="zuo22"){
- borderize(source3,"#999999","#F6F6F8")
- }
- else{
- while(source3.tagName!="TABLE"){
- source3=document.getElementById? source3.parentNode : source3.parentElement
- if (source3.className=="zuo22")
- borderize(source3,"#999999","#F6F6F8")
- }
- }
- }
-
- function borderize_off(e){
-
- if (document.all)
- source4=event.srcElement
- else if (document.getElementById)
- source4=e.target
- if (source4.className=="zuo22")
- borderize(source4,"white","white")
- else{
- while(source4.tagName!="TABLE"){
- source4=document.getElementById? source4.parentNode : source4.parentElement
- if (source4.className=="zuo22")
- borderize(source4,"white","white")
- }
- }
- }
-
-
-
-
把鼠标移过来 |
-
把鼠标移过来 |
-
-
把鼠标移过来 |
-
把鼠标移过来 |
-
-
把鼠标移过来 |
-
把鼠标移过来 |
-
-
把鼠标移过来 |
-
把鼠标移过来 |
-
-
-
复制代码
十四 弹出提示的效果:
- cao888---提示
-
- var cao_x,cao_y;
-
- function cao888()
- {
- this.display=display;
- }
-
- function display()
- {
- document.write("
|
< /table>");
- document.write("
");
- document.write("
");
- document.write("
");
- document.write("
");
- document.write("
提示:CAO888 | ");
- document.write("
");
- document.write("
");
- document.write("
CAO呀,错误了...& lt;br>[确定]");
- document.write("
");
- document.write("
");
- }
- function caoMove(obj) //实现层的拖移
- {
- if(event.button==1)
- {
- var caoX=obj.clientLeft;
- var caoY=obj.clientTop;
- obj.style.pixelLeft=caoX+(event.x-cao_x);
- obj.style.pixelTop=caoY+(event.y-cao_y);
- }
- }
- var mycao=new cao888();
- mycao.display();
复制代码
十五 图片之间的切换: