JS特效集

1.鼠標放上來會有下劃線
<STYLE TYPE="text/css">
A { text-decoration: NONE}
A:hover {border-bottom:1px dashed #6099de }
</style>
<a class=middle href="#"><font color="#6099de">鼠標放上來會有下劃線</font></a>

2.鼠標使圖片抖動

腳本說明:

把如下代碼加入<body>區域中
<style>
<!--

.mouseBeOffMe {
border-top: 10px solid #000000;
border-bottom: 10px solid #000000;
border-left: 6px solid #000000;
border-right: 10px solid #000000;
}

.mouseBeOnMe {
border-top:    6px   solid #000000;
border-bottom: 14px solid #000000;
border-left:   10px solid #000000;
border-right: 6px   solid #000000;
}

.mouseBeDown {
border-top:    13px solid #000000;
border-bottom: 7px   solid #000000;
border-left:   10px solid #000000;
border-right: 6px   solid #000000;
}

.mouseBeUp {
border-top:    10px solid #000000;
border-bottom: 10px solid #000000;
border-left:   10px solid #000000;
border-right: 6px   solid #000000;
}

//-->
</style>
<table border="0" cellpadding="7" cellspacing="0" bgcolor="#000000">
          <tr>
          <td bgcolor="#000000">
<img src    = "photo/slideshow1_1.jpg"
title       = "This is the Image One Label"
width       = "90"
height      = "90"
border      = "0"
class       = "mouseBeOffMe"
onmouseover = "this.className='mouseBeOnMe'"
onmousedown = "this.className='mouseBeDown'"
onmouseup   = "this.className='mouseBeUp'"
onmouseout = "this.className='mouseBeOffMe'">

<img src    = "photo/slideshow1_3.jpg"
title       = "This is the Image Three Label"
width       = "90"
height      = "90"
border      = "0"
class       = "mouseBeOffMe"
onmouseover = "this.className='mouseBeOnMe'"
onmousedown = "this.className='mouseBeDown'"
onmouseup   = "this.className='mouseBeUp'"
onmouseout = "this.className='mouseBeOffMe'">
          </td>
          </tr>
          <tr>
          <td bgcolor="#141414" align="center">
<font color="#EFE7DF" size="2" face="Arial">鼠標移動到圖片上時圖片會閃動<br>
點住鼠標左鍵後圖片也會閃動<br>
鬆開鼠標左鍵後圖片會恢復正常<br>
          </td>
          </tr>
          </table>

3.窗口中間彈出
<script>
window.open("http://www.cctv.com","","width=400,height=240,top="+(screen.availHeight-240)/2+",left="+(screen.availWidth-400)/2);
</script>
4.窗口延時彈出
腳本說明:

把如下代碼加入<body>區域中
<script type="text/javascript">
function writeText() {
window.open("http://www.cctv.com");
}
setTimeout("writeText()",20000);
</script>
5.實用下拉導航條
<SCRIPT language=JavaScript>
function MM_findObj(n, d) { //v4.0
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 && document.getElementById) x=document.getElementById(n); return x;}
function MM_showHideLayers() { //v3.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; }}
//showhidelayer

6.一個自己製作的相冊，可選擇查看圖片的各種信息，非常酷
腳本說明:

把如下代碼加入<body>區域中
<SCRIPT LANGUAGE="JavaScript"> var javascript_version = 1.0;</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1"> javascript_version = 1.1;</SCRIPT>
<script language=javascript>
self.name = "main"; // names current window as "main"

PicVar = 0;

// Object Fix

function Fix(DatVal, PicVal, TitVal, TxtVal) {

this.DatVal = DatVal

this.PicVal = PicVal

this.TitVal = TitVal

this.TxtVal = TxtVal

}

// Create new main array.

var SuzyArray = new Array()

// The following lines are the ONLY LINES in this whole script that you need to change!

// SuzyArray[PicVar++] = new Fix("date", "photo/picname.jpg", "pic title", "pic description")

SuzyArray[PicVar++] = new Fix("2/25/2003", "photo/2003-02-25-27.jpg", "Our house in the snow", "I took this beautiful picture this morning. The streets are <i>one solid sheet of ice</i> right now! It's insane. I don't think we'll be driving anywhere soon.")

SuzyArray[PicVar++] = new Fix("1/5/2003", "photo/2003-01-05-03.jpg", "Rain in the trees", "I had taken <b>Rainlin</b> out for a walk in the stroller, and we saw these cute little trees and stopped for a picture.")

SuzyArray[PicVar++] = new Fix("1/31/2003", "photo/2002-12-31-01.jpg", "Scott and Suzy", "I asked one of our friends to take this picture for us. Could my handsome hubby's eyes get any more <b>blue?</b> :)")

SuzyArray[PicVar++] = new Fix("12/7/2002", "photo/2002-12-07-05.jpg", "on the hayride", "Daddy was having a wonderful time on the hayride. Dylan wasn't too sure about it!")

SuzyArray[PicVar++] = new Fix("11/9/2002", "photo/2002-11-09-09.jpg", "Boys on wheels", "Daddy was holding Dylan up <i>with his knees!</i> Those skates sure are hard to stand up in, but once he got the knack for it Dylan didn't want to take them off.")

SuzyArray[PicVar++] = new Fix("10/30/2002", "photo/2002-10-30-01.jpg", "Dylan the Builder", "Here's Dylan, all dressed up and ready for Halloween! Everything in his life is Bob-the-builder related.")

SuzyArray[PicVar++] = new Fix("6/19/2002", "photo/2002-06-19-07.jpg", "Jabba's face", "It's hard, really hard, to get a picture of Jabba's face without him charging the camera.")

SuzyArray[PicVar++] = new Fix("6/11/2002", "photo/2002-06-11-11.jpg", "Rain behind the house", "The brick that makes up the outside of the house proved to be really pretty for framing pictures of the kidlets.")

SuzyArray[PicVar++] = new Fix("6/9/2002", "photo/2002-06-09-04.jpg", "Scott and Rainlin", "I just had to take some pictures of them before church. They looked so nice!")

SuzyArray[PicVar++] = new Fix("6/9/2002", "photo/2002-06-09-01.jpg", "Rainlin and Susan", "We both wore our pretty blue flower dresses that Sunday.")

SuzyArray[PicVar++] = new Fix("6/7/2002", "photo/2002-06-07-24.jpg", "Kaytlyn and Rainlin playing dress-up", "Kaytlyn has a whole bunch of dress-up clothes, and Rain loves to go over to her house and play dress-up with her.")

SuzyArray[PicVar++] = new Fix("6/2/2002", "photo/2002-06-02-13.jpg", "The Three Amigos", "Dylan, Daddy, and Rainlin were watching Castaway on the couch. We just moved all the furniture into that 'great room,' and everyone seems to like it better in there.")

SuzyArray[PicVar++] = new Fix("6/1/2002", "photo/2002-06-01-09.jpg", "Simon", "For those of you who have never met him, this is Simon. He's the tatoo I have on my left leg. I drew everything of the tattoo except for his head, which came from a greeting card my mother sent me while I was in the military.")

last = PicVar - 1;

current = 0;

function ShowSuzyPic(newpic) {

// (not working on some browsers) document.playsound.play();

current = newpic;

SelectionBox = document.SuzyForm.SuzyDropdown;

SelectionBox.options[current].selected = true;

document.getElementById("SuzySpot").innerHTML = '<a href=javascript:SuzyPicRemote("' + SuzyArray[current].PicVal + '","last");><img name="PicShowing" src=' + SuzyArray[current].PicVal + ' height=200 border=0></a>';

document.getElementById("Journal").outerHTML = '<div id=journal><br>' + SuzyArray[current].DatVal + '<p style="text-align:justify; text-indent:25px">' + SuzyArray[current].TxtVal + '</div>';

if (document.SuzyForm.WhereView[1].checked) {

timerID = setTimeout("SuzyPicRemote(SuzyArray[current].PicVal,'current')",1000)

}

function RandomSuzyPic() {

randompic = Math.floor(Math.random()*PicVar);

last = current;

ShowSuzyPic(randompic);

}

function PreviousSuzyPic() {

last = current;

current--;

if(current<0) current = PicVar - 1;

ShowSuzyPic(current);

}

function NextSuzyPic() {

last = current;

TotalImages = document.SuzyForm.SuzyDropdown.options.length;

current++;

if (current>=PicVar) current = 0;

ShowSuzyPic(current);

}

function SuzyPicRemote(picName,whichPic) {

ShowingImage = new Image();

ShowingImage.src = picName;

wid = ShowingImage.width + 50;

hei = ShowingImage.height + 50;

if (wid < 30 || hei < 30) {

wid=650;

hei=490;

}

if (screen.width < wid || screen.height < hei) {

wid = screen.width - 50;

hei = screen.height - 50;

}

OpenWindow = window.open("http://www.kitykity.com/photoalbum/clear.html", "remoteWin", "resizable=1, scrollbars=1, toolbar=0, left=15, top=10, width=" + wid + ", height=" + hei);

OpenWindow.document.write('<html><body background=photo/parchment.jpg><img src=' + picName + '></body></html>');

OpenWindow.document.close();

}

function FindPic() {

TotalFound = 0;

SearchString = document.SuzyForm.SearchWord.value;

SearchString = SearchString.toLowerCase();

WriteResults = window.open("clear.html","resultwindow","height=300, width=300, toolbar=0, status=0, menubar=0, resizable=1, scrollbars=1");

WriteResults.document.open();

WriteResults.document.write('<div style="text-align:center; font:8pt verdana">'

+ 'You searched for:<br><i>' + SearchString + '</i><br><b>Results:</b><br>');

for (loop=0; loop < PicVar ; loop++) {

Keyword = SuzyArray[loop].TxtVal;

Keyword = Keyword.toLowerCase();

URL = SuzyArray[loop].PicVal;

title = SuzyArray[loop].TitVal;

title = title.toLowerCase();

SearchResult = Keyword.indexOf(SearchString);

SearchResult2 = title.indexOf(SearchString);

if (SearchResult != "-1" || SearchResult2 != "-1") {

last = current;

WriteResults.document.write('<br><a href=javascript:ShowSuzyPic(' + loop + '); target="main">' + title + '</a>');

TotalFound++;

}

WriteResults.document.write('<p><b>Returned ' + TotalFound + ' results.</b>');

WriteResults.document.close();

if(javascript_version > 1.0) {

//delay a bit here because IE4 encounters errors

//when trying to focus a recently opened window

setTimeout('WriteResults.focus();',250);

}

// -->

</script>
<form name="SuzyForm">

document.write('<a href=javascript:SuzyPicRemote("' + SuzyArray[current].PicVal + '","last");><img name="PicShowing" src=' + SuzyArray[current].PicVal + ' height=200 border=0></a>');

</script>
</div>
</td>
<td style="background:url(photo/parchmentring.jpg); width:36px; border-top:2px groove #888888; border-bottom:4px groove #888888" border=0> </td>
<td style="background:url(photo/parchment.jpg); border-top:2px groove #888888; border-right:4px groove #888888; border-bottom:4px groove #888888; padding:5px; padding-right:20px; width:225px; font:8pt verdana; color:#000044; margin-left:0px" valign=top>
<div id="Journal">
<script language=javascript>
document.write('<br>' + SuzyArray[current].DatVal + '<p style="text-align:justify; text-indent:25px">' + SuzyArray[current].TxtVal);
</script>
</div>
</td>
</tr></table>
<p>
<table border=0><tr align=center>
<td>
<input type=button value="<<" onClick="PreviousSuzyPic();" style="font:8pt verdana,helvetica,arial; text-align:center">
<input type=button value="隨機" onClick="RandomSuzyPic();" style="font:8pt verdana,helvetica,arial">
<input type=button value=">>" onClick="NextSuzyPic();" style="font:8pt verdana,helvetica,arial; text-align:center">
<p>
<SELECT size=12 style='font:8pt verdana' name='SuzyDropdown' onChange='ShowSuzyPic(SuzyForm.SuzyDropdown.options.selectedIndex);'>
<script language=javascript>
TotalImages = PicVar;
for (loop=0; loop < TotalImages; loop++)
{
document.write("<option value=" + SuzyArray[loop].PicVal + ">" + SuzyArray[loop].TitVal + "</option>");
}
</script>
</SELECT>
</td>
<td style="padding-left:25px; font:8pt verdana">
<p style="text-align:left"><input type=radio name="WhereView" value="chkLocal" CHECKED>- 在本頁瀏覽圖片
<br><input type=radio name="WhereView" value="chkRemote">- 在彈出窗口瀏覽圖片</p>
<p>搜索圖片:
<br><input name="SearchWord" size=10 style="font:8pt verdana">
<br><input type="button" value="查找" onClick="javascript:FindPic();" style="font:8pt verdana">
</td></tr></table>
</td></tr></table>
</FORM>
<p><SCRIPT Language="Javascript">
document.write("總共有 " + PicVar + " 張圖片。最後更新： " + document.lastModified +".");
</script>

7.申請按鈕的等待
腳本說明:

把如下代碼加入<body>區域中
<FORM action=register.cgi method=post name=agree>
<CENTER><INPUT name=agreeb type=submit value="請認真查看<服務條款和聲明> (15 秒後繼續)">　　
<INPUT οnclick=history.back(-1) type=reset value=" 我不同意 ">
</CENTER></form>
<SCRIPT language=javascript>

</SCRIPT>

longing_chen

發佈了10 篇原創文章 · 獲贊 0 · 訪問量 2萬+

私信關注

.NET有哪些好用的定時任務調度框架

Python 將PDF轉爲PDF/A、PDF/X，以及PDF/A轉回PDF

elk3

Kafka存儲機制

aws語音呼叫調用，告警電話

深度學習框架火焰圖pprof和CUDA Nsys配置指南

爬蟲兩種繞過5s盾的方法

【轉】[C#] WebAPI 防止併發調用二（冥等性）

【轉】[SQL Server]關掉 SSMS 的 IntelliSense

號稱能打敗MLP的KAN到底行不行？數學核心原理全面解析

動態頁面靜態化的處理類

標準I/O重導向

JS特效集

對象引用是怎樣嚴重影響垃圾收集器的

程序員網站資源寶庫

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結