The most commonly used JS effect set of Web pages

Source: Internet
Author: User
Typical special effects
1, collection of the site
Description: Click to add your site to the browser's Favorites menu
Code:
<span style= "Cursor:hand" onclick= window.external.addFavorite (www.111cn.net ', ' China web first Station ")" title= "collection of Yancheng people
Only Net "> Favorites site </span>

2. Set as homepage
Description: Click to set your site as the starting page of the browser
Code:
<span onclick= "var
Strhref=window.location.href;this.style.behavior= ' url (#default #homepage) '; This.sethomepage (' http://www.ycrc.com.cn '); "
style= "Cursor:hand" > Set homepage </span>

3, remove the underline of the hyperlink
Description: Sometimes look at that hyperlink underline very annoying, put the following code into the Web page source code Note that the Web page <body> tags can no longer have link properties, otherwise this effect will be ineffective!
Code:
<style type= "Text/css" >
<!--
A:link{text-decoration:none}
A:visited{text-decoration:none}
a:hover {color: #ff00ff; Text-decoration:underline}
-->
</style>

4, automatically refresh the Web page
Note: Add the following code to and from the HTML, then the page that you are browsing after 5 minutes will automatically change to the Target.html page. In code, 300 is the delay time for the refresh to
Seconds is the unit. Targer.html for the target page you want to turn to, if this page is the automatic refresh this page.
Code:
<meta http-equiv= "Refresh" content= "300; Url=target.html ">

5, refresh this page
Description: Click to refresh this page.
Code:
<a href= "Javascript:location.reload ()" target= "_self" > Refresh </a>

6, back to the previous page
Description: Click to return to the previous page.
Code:
<a href= "Javascript:history.back ( -1)" > Return to Previous page </a>

7. Jump out of small window
Description: When you open a page with the following code, you will jump out of a small 468x60 size window. "Window.html" is the page to be displayed in the small window that jumps out. toolbar, STA
Tus, menubar, scrollbars, Set Small window toolbar, status bar, menu bar and scroll bar, resizable settings to allow viewers to change the size of the small window, width
, height sets the width and height of the small window. (But such a small window is generally not popular!) )
Code:
<script language= "JavaScript" >
window.open ("window.html", "WWW_YCRC_COM_CN", "Toolbar=no, Status=no,menubar=no,
Scrollbars=no,resizable=no,width=468,height=60,left=200,top=50 ");
</script>

8. Automatically close the window
Note: Add the following code to the source code of the Web page, the window will automatically close after 20 seconds! This is not as good as jumping out of a small window with the use of it! "I=20" representation in code
The delay time for shutdown is 20 seconds and can be modified arbitrarily.
Code:
<script language= "JavaScript" >
<!--
function Clock () {i=i-1
document.title= "This window will be automatically closed after" +i+ "seconds!";
if (i>0) settimeout ("clock ();", 1000);
else Self.close ();}
var i=20
Clock ();
-->
</script>

9, to protect the page
Description: If you do not want to make hard work out of the things that people easily copy&paste away, you might as well add the following code in HTML. When you press the right mouse button in the Web page, the
Now is not the desired shortcut menu, but a warning window. "\ n" indicates a newline.
Code:
<script language= "JavaScript" >
function Ycrc_com_cn ()
{
if (event.button==2) alert (' Browse only!!\n\n Please contact me if you have any questions! ')
}
</script>

Then change the <body> to
<body onmousedown= "YCRC_COM_CN ()" >

10, fixed font size
Description: Have you ever had this experience: a very good layout of the Web page, when browsing the size of the browser set to large or hours, beautiful pages immediately unrecognizable. Because the big words
Small changed, the layout of the natural chaos. Now all right, just add the following code to the page source file Code:
<style type= "Text/css" >
<!--
Body {font-size:9pt}
td {FONT-SIZE:9PT}
-->
</style>

11, the status bar in the dynamic Welcome language
Description: The browser's status bar appears in a word followed by a word to the left to run the Welcome language!
Code:
<script language= "JavaScript" >
<!--
function Statusmessageobject (p,d) {
THIS.MSG = Message
This.out = ""
This.pos = POSITION
This.delay = delay
THIS.I = 0
This.reset = Clearmessage
}
function Clearmessage () {
This.pos = POSITION
}
var POSITION = 100
var DELAY = 5
var message = "Welcome!" Welcome to WWW.YCRC.COM.CN "
var scroll = new Statusmessageobject ()
function Scroller () {
for (scroll.i = 0; scroll.i < Scroll.pos; scroll.i++) {
Scroll.out = ""
}
if (scroll.pos >= 0)
Scroll.out + + scroll.msg
else Scroll.out = scroll.msg.substring (-scroll.pos,scroll.msg.length)
Window.status = Scroll.out
Scroll.out = ""
scroll.pos--
if (Scroll.pos <-(scroll.msg.length)) {
Scroll.reset ()
}
SetTimeout (' scroller () ', Scroll.delay)
}
Function Snapin (jumpspaces,position) {
var msg = scroll.msg
var out = ""
for (var i=0; i<position; i++)
{out = = Msg.charat (i)}
for (i=1;i<jumpspaces;i++)
{out = = ""}
Out + = Msg.charat (position)
Window.status = out
if (jumpspaces <= 1) {
position++
if (Msg.charat (position) = = ")
{position++}
Jumpspaces = 100-position
else if (Jumpspaces > 3)
{jumpspaces *=. 75}
Else
{jumpspaces--}
if (position!= msg.length) {
var cmd = "Snapin (" + Jumpspaces + "," + position + ")";
Scrollid = Window.settimeout (Cmd,scroll.delay);
} else {
Window.status= ""
Jumpspaces=0
Position=0
cmd = "Snapin" ("+ Jumpspaces +", "+ position +") ";
Scrollid = Window.settimeout (Cmd,scroll.delay);
return False
}
return True
}
Snapin (100,0);
-->
</script>

12, protect their own pages are not placed in the framework of others
Description: Some people really lazy can, the other people do a good job in the Web page of the frame (frame) in a place, the results of others become their own, and can not see the real address of the Web page
! To prevent your results from being plagiarized by these people, you can add the following code to the HTML of your Web page so that your page will always open in the entire window.
Code:
<script language= "JavaScript" >
if (self!=top) {top.location=self.location;}
</script>

Button effects

13, Full Screen display
Description: True Full-screen display, can only be closed with ALT+F4
Code:
<input type= "button" name= "fullscreen" value= "full screen display" onclick= "window.open (document.location, ' www_ycrc_com_cn ',
' fullscreen ') >

14. Open a Full-screen window
Description: Opens a full-screen window with a button
Code:
<input type= "button" onclick= "WWW_YCRC_COM_CN ()" value= "Try" name= "button" >

<script>
<!--
function Www_ycrc_com_cn () {
var targeturl= "http://www.ycrc.com.cn"
Newwin=window.open ("", "", "scrollbars")
if (document.all) {
Newwin.moveto (0,0)
Newwin.resizeto (Screen.width,screen.height)
}
Newwin.location=targeturl
}
-->
</script>

15, a variety of uses of the button large collection
Description: A large set of buttons for various purposes
Code:
<input type= "button" name= "View" value= "viewing source code" onclick= "window.location= ' view-source: ' +window.location.href ' >

<input type= "button" value= "Back" onclick= "History.back ( -1)" >

<input type= "button" value= "refresh button" onclick= "Reloadbutton ()" >
<script language= "JavaScript" >
<!--
function Reloadbutton () {location.href= "3.html";}
-->
</script>

<p>
<input type= "button" value= "refresh button two" onclick= "History.go (0)" >

<input type= "button" value= "Back Page button" onclick= "Homebutton ()" >
<script language= "JavaScript" >
<!--
function Homebutton () {location.href= "http://www.ycrc.com.cn";}
-->
</script>

<input type= "button" value= "Pop-up Warning box" onclick= "Alertbutton ()" >
<script language= "JavaScript" >
<!--
function Alertbutton () {Window.alert () have you had a drink today? ");}
-->
</script>

<p>
<input type= "button" value= "status bar Info" onclick= "Statusbutton ()" >
<script language= "JavaScript" >
<!--
function Statusbutton () {window.status= "How are you?" ";}
-->
</script>

<input type= "button" value= "Background color transform" onclick= "Bgbutton ()" >
<script language= "JavaScript" >
<!--
function Bgbutton () {
if (document.bgcolor== ' #3399ff ')
{document.bgcolor= ' #00ccff ';}
Else{document.bgcolor= ' #3399ff ';}
}
-->
</script>

<input type= "button" value= "open new Window" onclick= "NewWindow ()" >
<script language= "JavaScript" >
<!--
function
NewWindow () {window.open ("http://www.ycrc.com.cn", "", "Height=600,width=800,left=10,top=10,status=no,location=no , Toolbar=no,
Directories=no,menubar=no ");}
-->
</script>

16, special effect of the button
Description: Special Effects of buttons
Code:
<style type= "Text/css" >
<!--
. over {color:yellow; Background:navy}
. down {color:yellow; background:navy; Font-style:italic}
-->
</style>
<input
Type= "button" value= "buttons are also crazy" name= "button"
Onmouseover= "this.classname= ' over ';"
onmouseout= ' this.classname= '; this.value= ' button is also crazy '
onmousedown= "this.classname= ' Down ';"
onmouseup= "this.classname= ' over ';"
onclick= "This.value= ' I really like you!" ' >

17, let the screen shake a burst
Description: Let the screen shake for a while
Code:
<input onclick= "WWW_YCRC_COM_CN (2)" type= "button" value= "Earthquake!!! ">
<script language= "JavaScript" >
<!--
function Surfto (form) {
var myindex=form.select1.selectedindex
if (form.select1.options[myindex].value!= null) {
Parent.main.location.href=form.select1.options[myindex].value;
}
}
-->
</script>
<script language= "JavaScript1.2" >
<!--
function WWW_YCRC_COM_CN (n) {
if (window.top.moveBy) {
for (i = i > 0; i--) {
for (j = n; j > 0; j--) {
Window.top.moveBy (0,i);
Window.top.moveBy (i,0);
Window.top.moveBy (0,-i);
Window.top.moveBy (-i,0);
}
}
}
Alert ("Not frightened!!!");
}
-->
</script>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.