JavaScript网页特效学习笔记.doc

JavaScript网页特效学习笔记1 在网络中有许多的特效都是用JavaScript编写的，这几天通过看书和看视频，简单的学习了几个网页常见的特效，和大家分享一下。1、使HTML页面反向显示我们浏览网页的时候，都是正向显示的。可以通过html的dir属性可以设置网页的反向显示，一些其他的控件都有这个属性，控制文本的显示方向。html view plaincopyprint?1 /rtl代表从右向左显示，默认是ltr 2 3 html页面反向显示 4 5 6 本页面的是反向显示的。 7 8 2、实现网页的自动最大化有的时候，我们打开网页时，该网页会自动最大化。我们可以 使用javascript的screen对象，实现网页最大化。首先使用self（代表当前窗口对象本身）调用moveTo方法，将窗口移动到坐标（0,00）处，之后调整窗口的大小，宽和高都是屏幕的可用高和宽。html view plaincopyprint?9 10 11 页面自动最大化 12 13 self.moveTo(0,0);/使用self代表自身这个窗口，调用moveTo方法 14 self.resizeTo(screen.availWidth,screen.availHeight);/将窗口的大小调整为屏幕的可用大小 15 16 17 18 本页面打开的时候会自动化。 19 20 3、页面的自动刷新想要实现页面的自动刷新有两种方法，第一种是用html的meta属性，第二是调用window对象的location对象的reload()方法。html view plaincopyprint?21 22 23 实现页面的自动刷新 24 !-第一种方法- 25 26 function reload() 27 28 window.location.reload();/第二种方法 29 30 setInterval(reload(),3000); 31 32 33 34 这个页面将在3秒后刷新 35 36 4、实现页面的后退，前进，刷新后退、前进、刷新这些都是网页中常见的操作，我们可以通过JavaScript代码完成这些功能。使用history对象的go方法可以实现页面的前进，后退和刷新。html view plaincopyprint?37 38 39 实现页面的后退、刷新、前进 40 41 function goback() 42 43 history.go(-1); 44 45 function refresh() 46 47 history.go(-0); 48 49 function forward() 50 51 history.go(+1); 52 53 54 55 56 57 58 59 60 61 5、让别人看不到网页的源代码有的时候为了让自己做的网页的不被他人知道怎么做的，可以通过将网页的源代码进行屏蔽，这样当他人查看网页源代码的时候就看不到自己编写的网页源代码了。html view plaincopyprint?62 63 64 保护网页的源代码 65 66 function clear() 67 68 source = document.body.innerHTML; 69 document.open(); 70 document.write(代码已经被屏蔽!); 71 document.close(); 72 document.title = 看不到源代码; 73 document.body.innerHTML = source; 74 75 76 77 78 这个网页看不到源代码！ 79 80 6、打开网页时，弹出欢迎的对话框有时上网的时候会发现，一打开网页会弹出一个对话框，欢迎进入本网站，其实这是通过JavaScript中的alert方法实现的。html view plaincopyprint?81 82 83 进入页面同时弹出欢迎对话框 84 85 86 87 alert(欢迎进入本网站！); 88 89 90 7、关闭页面弹出对话框有一些网页会在你关闭的时候，告诉你“谢谢你进入本网站”的类似的话，其实这是通过JavaScript中的onunload事件和alert方法来实现的，onunload事件是在离开页面的时候发生。html view plaincopyprint?91 92 93 离开页面 94 95 96 97 8、设为主页的特效不管是什么网站都有“设为主页”的功能，这个功能做起来十分的简单，用到了behavior属性和setHomePage方法的结合可以将指定的网页设为主页。html view plaincopyprint?98 99 100 主页 101 102 103 设为主页 105 106 107 9、类似浮动广告的特效在一些的网站都有浮动的广告，其实都是用JavaScript作的，通过改变坐标的位置，实现动态的效果，下边的这个特效是我看高洛峰老师的视频而来的，只不过动的是一个绿色的div。要做到实现到边框的时候往回走，必须使x，y的坐标大于或等于窗口的大小减去自身的大小。这需要用到这四个属性：clientWidth，offsetWidth，clientHeight，offsetHeight。html view plaincopyprint?108 109 110 类似浮动广告 111 112 113 114 我是广告 115 116 117 var x = 0;/定义起始的x坐标 118 var y = 0;/定义起始的y坐标 119 var xs = 10;/定义x加速度 120 var xy = 10;/定义y速度 121 var one = document.getElementById(one);/得到div 122 function move()/定义移动的方法 123 124 x+=xs; 125 y+=xy; 126 if(x=document.body.clientWidth-one.offsetWidth-20 | x=document.body.clientHeight-one.offsetHeight-20|y=0) 131 132 xy = -1*xy; 133 134 135 one.style.left = x; 136 one.style.top = y; 137 138 139 var dt = setInterval(move(),100); 140 one.onmouseover = function() 141 142 clearInterval(dt); 143 144 one.onmouseout = function() 145 146 dt = setInterval(move(),100); 147 148 149 150 10、图片跟随鼠标有些网页你的鼠标到哪，图片就到哪，或者是窗口到哪，其实这是用了将鼠标的坐标赋给跟随的东西的坐标。html view plaincopyprint?151 152 153 154 155 156 157 document.onmousemove=function(e) 158 var ev = e|window.event;/这句话是为了兼容的，e是适用于IE以外的浏览器,event是用于IE的 159 var x = ev.clientX; 160 var y = ev.clientY; 161 tu.style.top=y+20; 162 tu.style.left=x+20; 163 164 165 166 今天写了10个网页的简单网页中JavaScript特效，以后会慢慢的写，如果有不足的地方，希望大家提出来。JavaScript网页特效学习笔记2 今天又从书上和视频中学到了几个网页常见的JavaScript特效，也知道了几个在html页面中很少用到的属性。1、按钮只能被单击一次上网的时候可能会看到当单击按钮之后，就不能再次的单击了，直到经过几秒钟后，才可以进行单击，其实这是用表单的那些元素的disabled属性来设置的，如果元素的值为真，则元素不可用，反之，则可用。html view plaincopyprint?1 2 3 这个页面的按钮只能被单击一次 4 5 6 7 8 9 10 2、滚动的字幕链接 在没有学过JavaScript之前，html中的marquee属性就是用来设置字幕的滚动的，我们也可以用JavaScript动态的创建marquee标签。html view plaincopyprint?11 12 13 带链接的滚动字幕 14 15 var marqueewidth=400 /设置marquee的宽度 16 17 var marqueeheight=20/设置marquee的高度 18 19 var speed=6/设置marquee滚动的速度 20 21 var marqueecontents=无处不在的博客; 22 document.write(+marqueecontents+) 23 24 25 26 27 3、给按钮定义热键为了方便用户对网站的操作，有些网站给一些元素定义了热键。在这里用的热键是针对于Alt键的，有些属性有accesskey的方法，通过该方法可以指定和Alt键搭配形成热键。html view plaincopyprint?28 29 30 可用快捷键键提交的表单 31 32 33 34 35 36 37 38 39 40 4、加入收藏夹几乎每个网站都有收藏本站的链接，只需要通过JavaScript的一条语句可以简单的实现这种效果。通过window下的external属性下的addFavorite方法就可实现这种操作。html view plaincopyprint?41 42 43 加入收藏夹 44 45 function store() 46 47 window.external.addFavorite(/long2010yu2010,我的网站); 48 49 50 51 52 收藏本站 53 54 5、禁止复制和粘贴有时为了需要，需要对某些文本进行禁止复制和粘贴的操作，我们可以用JavaScript的oncopy事件和onpaste事件对它进行设置。html view plaincopyprint?55 事件 56 57 这个网页不能复制和粘贴 58 59 60 61 63 64 65 66 6、改变元素的大小某些元素具有contentediteable属性，通过该属性可以对其中的元素进行编辑，如在div中放入一个文本框和一个按钮，当页面执行时会发现可以改变元素的大小等操作。html view plaincopyprint?67 68 69 这个页面文本框可改变大小 70 71 72 73 74 75 76 77 78 79 7、放大文本放大文本有多种方法，如改变字体的字号等，这里我写的是我新学习的方法，通过样式表中的zoom属性，这个属性是设置或检索对象的缩放比例。 通过缩放可以实现放大或缩小文本、图片的效果。html view plaincopyprint?80 81 82 文本放大效果 83 84 85 87 鼠标放到这个文本上面会被放大！ 88 89 90 8、用Enter键登录我们上网的时候，当输入完某些信息后，习惯用Enter进入，如果此时该按钮被设置了onclick方法，并且该按钮处于焦点，那么直接用Enter键是好使的，如果没在焦点上怎么办呢？我们可以用下面的方法。html view plaincopyprint?91 92 93 这个页面的Enter能登录 94 95 function Enter() 96 97 if(event.keyCode = 13)/如果按下的键的码是13，即回车键 98 99 document.getElementById(button1).click();/调用按钮的点击方法 100 101 102 103 104 105 106 107 9、最后的更新时间 在JavaScript中通过lastModified属性可以知道页面的最后更新时间。html view plaincopyprint?108 109 document.write(本页最后的更新日期: + document.lastModified + ); 110 10、全选按钮特效在我们下载东西的时候，会发现选中了一个复选框全部的都选中，在单击就都不选了，这个特效是十分简单的只要设置选中时，遍历每个下载链接将他们的checked属性设为真，取消时将他们设为空即可。html view plaincopyprint?111 112 113 复选框全选 114 115 116 117 function sall() 118 119 var c = document.getElementsByName(check); /得到名字为check的复选框对象数组 120 var all = document.getElementsByName(all)0;/得到全选复选框对象 121 if(all.checked = true) 122 123 for (var i = 0