《JavaScript网页特效范例宝典》笔记

80 阅读 0 评论 53 点赞

我是靠谱客的博主粗暴芒果，最近开发中收集的这篇文章主要介绍《JavaScript网页特效范例宝典》笔记，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1，网页加载时弹出新窗口（广告）：

window.open("网页url"，“_blank"，"新窗口的位置");

window.open("flex.html","new/_blank","height=400,width=600,top=200,left=300");

2,定时弹出窗口：

function openit(){
window.open("flex.html","_blank","height=400,width=600");
}
setTimeout("openit()",2000);

3，通过按钮创建窗口：

<button οnclick="openit()">open</button>
function openit(){
window.open("flex.html","_blank","height=400,width=600");
}

4，自动关闭的广告窗口：

在主页main.html:

window.open("flex.html","_blank","height=400,width=600");
广告窗口页flex.html:

5，制作居中并具有检验表单功能的弹出窗口：

在主页main.html:

function manage(){
var hdc=window.open("flex.html","_blank", "width=102,height=201");

var x1=screen.width;

var x2=screen.height;

hdc.moveTo((x1-102)/2，(x2-201)/2);

};// 使弹出框居中显示

在广告窗口页flex.html:

管理员姓名：<input type="text" name="manager" onKeyDown="if(myform.manager.keyCode==13){myform.PWD.focus();}" >

密码：<input type="password" name="PWD" onKeyDown="if(myform.PWD.keyCode==13){mycheck(myform))}">

</form>

function mycheck(myform){
if(myform.manager.value==""){

alert("请输入管理员姓名");

myform.manager.focus();

return; //验证表单是否写全；

}

if(myform.PWD.value==""){
alert("请输入密码”）；

myform.PWD.focus();

return;

}

注意：id和name有时候可以当作对象来使用。

如果id名称不和内置属性或全局变量重名的话，该名称自动成为window对象的属性，而在一个html页面中的最顶层环境中有：

1	`this` `=== window`

所以如果我们写一个如下的html元素代码就可以这样引用它：

<input type="button" id="btn" value="Ok" />

<script>

//可以这样引用

btn.onclick = function(){};

//或者这样

window.btn.style = '...';

</script>

对于name属性来说，只有某些类型的html元素具有类似的方法。在这些元素中可以通过全局变量或者document的属性来访问特定name属性的元素，例如：

<div>

<img name="pic" src="#" alt="pic_0" />

<img name="pic" src="#" alt="pic_1" />

<img name="pic" src="#" alt="pic_2" />

</div>

<script>

//可以这样引用name为pic的元素：

for (var i = 0; i < pic.length; i++) {

console.log(pic[i]);

console.log(window.pic[i]);

};

</script>

备注：id可以选取所有元素，name具有类似方法的元素：form, img, iframe, applet, embed, object （。。。）

在W3C 标准中，使用document.getElementById().value,兼容所有浏览器，但id.value有些浏览器，包括部分标签并不支持。

获取方式	IE6		IE7		IE8		Firefox		Chrome		Safari		Opera
获取方式	Q	S	Q	S	Q	S	Q	S	Q	S	Q	S	Q	S
document.div_id	N	N	N	N	N	N	N	N	N	N	N	N	N	N
document.div_name	N	N	N	N	N	N	N	N	N	N	N	N	N	N
document.span_id	N	N	N	N	N	N	N	N	N	N	N	N	N	N
document.span_name	N	N	N	N	N	N	N	N	N	N	N	N	N	N
document.select_id	N	N	N	N	N	N	N	N	N	N	N	N	N	N
document.select_name	N	N	N	N	N	N	N	N	N	N	N	N	N	N
document.a_id	N	N	N	N	N	N	N	N	N	N	N	N	N	N
document.a_name	N	N	N	N	N	N	N	N	N	N	N	N	N	N
document.input_id	N	N	N	N	N	N	N	N	N	N	N	N	N	N
document.input_name	N	N	N	N	N	N	N	N	N	N	N	N	N	N
document.img_id	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
document.img_name	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
document.form_id	Y	Y	Y	Y	Y	Y	N	N	N	N	N	N	Y	Y
document.form_name	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
document.iframe_id	Y	Y	Y	Y	Y	Y	N	N	N	N	N	N	Y	Y
document.iframe_name	Y	Y	Y	Y	Y	Y	N	N	Y	Y	Y	Y	Y	Y
document.object_id	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
document.object_name	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
document.embed_id	Y	Y	Y	Y	Y	Y	Y	Y	N	N	N	N	Y	Y
document.embed_name	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y

6，广告窗口只在第一次浏览网址时候弹出：

判断浏览器中是否有cookie，如果没有则弹出窗口。

Set－Cookie: NAME=VALUE；Expires=DATE；Path=PATH；Domain=DOMAIN_NAME；SECURE

　　NAME=VALUE：这是每一个Cookie均必须有的部分。NAME是该Cookie的名称，VALUE是该Cookie的值。在字符串“NAME=VALUE”中，不含分号、逗号和空格等字符。
　　Expires=DATE：Expires变量是一个只写变量，它确定了Cookie有效终止日期。该属性值DATE必须以特定的格式来书写：星期几，DD－MM－YY HH:MM:SS GMT，GMT表示这是格林尼治时间。反之，不以这样的格式来书写，系统将无法识别。该变量可省，如果缺省时，则Cookie的属性值不会保存在用户的硬盘中，而仅仅保存在内存当中，Cookie文件将随着浏览器的关闭而自动消失。
　　Domain=DOMAIN－NAME:Domain该变量是一个只写变量，它确定了哪些Internet域中的Web服务器可读取浏览器所存取的Cookie，即只有来自这个域的页面才可以使用Cookie中的信息。这项设置是可选的，如果缺省时，设置Cookie的属性值为该Web服务器的域名。
　　Path=PATH：Path属性定义了Web服务器上哪些路径下的页面可获取服务器设置的Cookie。一般如果用户输入的URL中的路径部分从第一个字符开始包含Path属性所定义的字符串，浏览器就认为通过检查。如果Path属性的值为“/”，则Web服务器上所有的WWW资源均可读取该Cookie。同样该项设置是可选的，如果缺省时，则Path的属性值为Web服务器传给浏览器的资源的路径名。
　　可以看出我们借助对Domain和Path两个变量的设置，即可有效地控制Cookie文件被访问的范围。
　　Secure：在Cookie中标记该变量，表明只有当浏览器和Web Server之间的通信协议为加密认证协议时，浏览器才向服务器提交相应的Cookie。当前这种协议只有一种，即为HTTPS。

substring(x1，x2) 方法用于提取字符串中介于两个指定下标之间的字符（不包括x1，包括x2);

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置(前面有多少字母就返回几）。

unescape() 函数可对通过 escape() 编码的字符串进行解码。

抓包神器Fiddler

对于只有一个cookie的网页：

function check(){

if(document.cookie.length==""){

manage();

}

var now=new Date();

var time="Thu , 12 Dec 2019 12:00:00 GMT";

document.cookie="name=hello;expires="+time;

}

对于有多个cookie 的网页：

function checkcookie(name){
var search=name+"=";

var value="";

var x1=search.length;

var x2=document.cookie.indexOf(search);

var x3=x1+x2;

if(x2！=-1）{ //若存在此网页的cookie
var x3=document.cookie.indexOf(";"，x2);

if{x3==-1){

x3=document.cookie.length;

}

var value=document.cookie.substring(x2,x3);

}

return value;

}

function check(){
if( checkcookie("bob")==""){

manage();//弹出广告窗口

document.cookie="bob=yes;expires=Thu , 12 Dec 2019 12:00:00 GMT";

}

7，弹出广告窗口右下角设置关闭按钮：

8，关闭广告时，刷新父窗口：

window.opener：从子窗口返回到父窗口（返回对创建该窗口的 Window 对象的引用）。

Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址。

Location 对象方法：reload() 重新加载文档。

window.opener.window.myfunction()：可以直接使用父窗口的函数。

对于广告窗口flex.html：

function mana(){

window.opener.location.reload(); //兼容IE，不兼容chrome;

window.close();

}

9，使用window.close()时直接关闭窗口，不询问:

<button οnclick="window.opener=null;window.open('' ，'_self ');window.close()">关闭</button> ；/ / 固定格式

10，使用showModalDialog();弹出网页模式对话框；

window.showModelessDialog()是非阻态窗口，也叫非模态窗口，也就是说当你打开window.open这个子窗口后，还可以切换去操作父窗口。

window.open()是非阻态窗口，也叫非模态窗口，也就是说当你打开window.open这个子窗口后，还可以切换去操作父窗口。

window.showModalDialog()表示阻态窗口，也就是打开这个窗口后，在关闭之前，不允许操作父窗口。

加双引号的表示字符串，一般和变量之间用加号（+）实现拼接；var x1=5; "width="+x1+"px"; //width=5px;

11，弹出全屏模式对话框：

12，制作网页拾色器

黑色#000000，红色#FF0000，绿色#00FF00，蓝色#0000FF，白色#FFFFFF。

在父窗口main.html:

function colorpick(field){

var rtn=window.showModalDialog("flex.html", "_blank", "dialogWidth=200;dialogHeight=300;");

field.style.background=rtn;

return;

}

在模态窗口（拾色器中）flex.html: action Mcell Mtr Mtable Mcube

var h=new Array(6);

h[0]="FF";

h[1]="CC";

h[2]="99";

h[3]="66";

h[4]="33";

h[5]="00";

function action(RGB){
window.returnValue="#"+RGB;

window.close();

}

function Mcell(R,G,B){

document.write('<td bgcolor=" #'+R+G+B+' ">');

document.write('<a href="#" οnclick="action(' '+R+G+B+' ')" >');

document.write('<img alt="#'+R+G+B+' ">');

document.write('</a>');

document.write('</td>');

}

function Mtr(G,B){

for(var i=0;i<6;i++){

document.write('<tr>');

Mcell(h[i],G,B);

document.write('</tr>');

}

function Mtable(B){

document.write('<table border=0 cellspacing=0 cellpadding=0>');

for(var i=0;i<6;i++){

Mtr(h[i],B);

}

document.write('</table>');

}

function Mcube(){

document.write('<table border=0 cellspacing=0 cellpadding=0></tr>');

for(var i=0;i<6;++i){

if(i%3==0){
document.write('<tr>');

}

document.write('<td>');

Mtable(h[i]);

document.write('</td>');

if(i%3==0){

document.write('</tr>');

}

document.write('</table>');

}

13，网页打开后，页面自动滚动：

利用scroll(x,y);表示网页的位置；

setTimeout()循环执行该函数实现滚动；

var position=0;

function scroller(){

scroll(0,position);

position++;

setTimeout("scroller()", 10);

};

14,弹出的窗口自动扩展到和窗口一样大：

html:

<a href="javascript:go1()">打开窗口</a>//点击链接，运行函数go1();

js:

function go1(){
win2=window.open("flex.html","_blank", "width=300,height=300");

win2.moveTo(0,0);

win2.resizeTo(150, 150);//窗口重新调整大小

go2();

}

function go2(){
win2.resizeBy(5, 4);窗口扩展倍数；

setTimeout("go2()", 50);

}

本来想修改成：

function go1(){

.........

function go2(){

.......

setTimeout("go2()", 50);

};

}

然而并不行，主要问题是，setTimeout的延迟是在后台被挂起运行，setTimeout执行一次后，等待50ms准备再次执行时，它的执行环境变成了window，然而在window 执行环境中找不到go2()函数，所以报错：go2() is not definded;

15，动态显示窗口：

窗口先竖着掉下来，再横着拉开

function expandingwindow(){
var widthspeed=10;

var heightspeed=10;

var maxwidth=window.screen.availWidth;

var maxheight=window.screen.availHieght; //用于读取窗口高度

for(screenwidth=20;screenwidth<maxwidth;screenwidth+=widthspeed;){

self.resizeTo(screenwidth,30);//self对象和window对象是一个意思

}

for(screenheight=30;screenheight<maxheight;screenheight+=heightspeed){

self.resizeTo(screenwidth, screenheight);

}}

16，下降的网页：

moveBy(x, y): 向X轴Y轴分别平移x, y的距离；

function drop(){
var heig=window.screen.availHeight;

if(self.moveBy){ //一般window.方法都是测试浏览器支持不支持这个方法；类似于if（变量名），如果变量未定义就是false.

for (var i=Math.floor(heig/3);i>0;i--){ //math.floor()用来给浮点数取整，这个整数等于或者小于这个浮点数。

self.moveBy(0,3);

}}}

17，旋转的窗口：

Math.PI返回圆周率3.14159；

Math.cos()返回数的余弦值；

js：

self.resizeTo(200,200);

function eddy(){

var a=b=275;

var i=0;

var r=60;

var x=r*Math.cos(i*Math.PI/180)+a;

var y=r*Math.sin(i*Math.PI/180)+b;

if(i>360){i=0;};

setTimeout("eddy("+i+")", 10); i是外部变量，需要加"+ +".

}

18，被屏幕边框弹回来的窗口：利用aa,bb作为中间变量，使用try{} catch(){}

var a=b=aa=bb=0;

self.resizeTo(300,300);

function go(){

try{

if(aa==0)
a+=2;
if(a>self.screen.availWidth-300)
aa=1;
if(aa==1)
a-=2;
if(a==0)
aa=0;

if(bb==0)
b+=2;
if(b>self.screen.availHeight-300)
bb=1;
if(bb==1)
b-=2;
if(b==0)
bb=0;

window.resizeTo(a,b}

catch(e){};}

19，字符串+变量，如果变量在最后，则“width="+value;

如果变量在中间，则”this"+value+"time"; οnclick="go("+value+")";

如果变量在最前面：则 value+"seconds";

20，网页以频道模式打开：就是全屏+网页页头

window.open("flex.html" , " " , "channelmode=yes");

21, 网页以全屏打开，连页头都没有，纯网页；

window.open("flex.html","", "fullscreen=yes");

22, 网页打开前的询问：

function ask(){
if(confirm("确定打开网页？")===false){

window.close();

}

23，闪烁的网页标题：

var n=1;

function shine(){

n++;

if(n==3){n=1};

if(n==1){document.title="星星"};

if(n==2){document.title="月亮"};

}

24, 创建二级导航条：点击第一排相应第二排出现对应的链接a

function change(){

switch(value){
case '管理':

id2.innerHTML='<a href="#" >管理</a>';break;

case '财务':

id2.innerHTML='<a href="#'>财务</a>';break;

}}

html:

25，

使一张图片作为div的背景并完全适应div的大小：

div{

background:url(sky.jpg) center;

background-size:cover;

}

26,创建展开式导航条：

function moveto(){

var a=document.getElementById("imgs");

var a1=a.offsetHeight;

var a2=a.style.height;

if(a1<200){

a1+=9;

a2=a1+"px";

}

setTimeout("moveto()", 1);}

27，创建导航条，鼠标经过，在自己下方下拉菜单：

css:

.div1{
display:flex;
flex-direction:row;
justify-content:space-around;
background-color:black;
color:white;
}
a{
color:white;
text-decoration:none;
}
a:hover{
color:red;
}
#div2{
color:white;
width:300px;
height:100px;
border:1px solid red;
background-color:black;
visibility:hidden;
}
.div3{
position:relative;
top:-100px;
}

js:

function show(value){
var m=document.getElementById("div2");
n=document.getElementsByClassName("a");
m.style.visibility="visible";
for(var i=0;i<4;i++){
n[i].οnmοuseοut=function(){
m.style.visibility="hidden";

}
}
switch(value){
case 1:
m.innerHTML="这是1";
m.style.marginLeft="0px";
break;
case 2:
m.innerHTML="这是2";
m.style.marginLeft="400px";
break;
case 3:
m.innerHTML="这是3";
m.style.marginLeft="800px";
break;
case 4:
m.innerHTML="这是4";
m.style.marginLeft="1200px";
break;
}
}

html:

<a class="a" οnmοuseοver="show(1)" href="" >教育网址</a>
<a class="a" οnmοuseοver="show(2)" href="" >电脑网址</a>
<a class="a" οnmοuseοver="show(3)" href="" >新图书网址</a>
<a class="a" οnmοuseοver="show(4)" href="" >其他网址</a>

</div>
<div id="div2">1</div>