如何开始学习javascript,html是网页的内容，c是网页的格式，h是网站的后台，j是网站的前端，那么如何学习j，才能高效？......
2023-03-17 210 JAVASCRIPT
几种实用的JavaScript鼠标特效
来源：互联网
2023-03-17 00:48:15 486
在我们平时网页设计中，鼠标特效可以说是常常会用到，那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效，希望对大家有用。
工具/原料
- P>Dreamweaver /P>
JS代码使鼠标滚轮失效
当页面内容太多时，可以通过鼠标滚轮实现翻页效果。但有些读书网站提供页面自动滚屏的功能，此时可使鼠标的滚轮失效，让用户充分体验网站提供的功能。
本例在页而中添加了一个表格，可将窗口缩小，以出现滚动条效果。当出现滚动条时．滑动鼠标的滚轮，测试此操作是否能够成功。代码重写了“document.onmousewheel”方法，若返回false值则表示不执行任何鼠标滚动的操作。
实例代码如下：
html xmlns="http://www.w3.org/1999/xhtml" >
head>
title>JS代码使鼠标滚轮失效/title>
script language="javascript">
function document.onmousewheel() //滚轮事件重新定义
{
return false; //返回false表示什么都不操作
}
/script>
/head>
body>
table style="width: 300px">
tr>
td>
阿/td>
td>
不/td>
td>
才/td>
/tr>
tr>
td>
的/td>
td>
恶/td>
td>
发/td>
/tr>
tr>
td>
的/td>
td>
发/td>
td>
的/td>
/tr>
/table>
/body>
/html>
JS代码实现状态栏显示鼠标位置
为了让DIV层可以跟随鼠标，层的控制通常需要获取鼠标的位置。本例学习如何获取鼠标的X和Y坐标。
本例的重点Event对象，其用来描述JavaScript的事件。Event对象的“x”属性用来获取鼠标指针位置相对于窗口客户区域的x坐标，其中客户区域不包括窗口自身的控件和滚动条。Event对象的“y”属性表示y坐标。
实例代码如下：
html xmlns="http://www.w3.org/1999/xhtml" >head>title>JS代码实现状态栏显示鼠标位置/title>script language=javascript>//移动鼠标的方法function move(e){if (document.layers) { var x=e.pageX; var y=e.pageY;}if (document.all) { var x=event.x; var y=event.y document.body.scrollTop;}status="x:" x " y:" y; //组合鼠标的x,y坐标}document.onmousemove = move; //鼠标移动时绑定move方法if (document.layers) document.captureEvents(Event.MOUSEMOVE);/script>/head>body>/body>/html>
鼠标放到图片上会显示另外一张图片
在大多数网页中，如果鼠标移动到图片上，通常会给出文本提示。本例将学习如何不显示文本．而显示指定的图片。
本例的重点是如何判断当前图片，并更改图片的地址。在img控件中，“src”属性表示要显示图片的地址，如果是网络地址，一定要指明详细的URL路径。如果判断的是当前图片，在参数传递的时候，使用“this”。
实例代码如下：
html xmlns="http://www.w3.org/1999/xhtml" >head>title>鼠标放到图片上会显示另外一张图片/title>SCRIPT LANGUAGE="JavaScript">function changeSrc(obj){obj.src="LOGO2.gif";//改变图像地址}/script>/head>body>img onmousemove="changeSrc(this)" src="LOGO1.gif" />/body>/html>
鼠标移入移出时颜色变化代码
当用户将鼠标移动到按钮或链接上时．为了突出显示用户的选择，会改变链接和按钮的颜色。默认链接的颜色是自动变化的，本例学习如何手动为按钮设置这种效果。
本例的重点是鼠标事件的应用。当鼠标移动到控件上时，触发了‘'onMouseOver”事件，当鼠标移走时，触发“onMouseOut”事件。两个事件的响应都是使用“style.color”改变控件的颜色。
实例代码如下：
html xmlns="http://www.w3.org/1999/xhtml" >head>title>鼠标移入移出时颜色变化代码/title>/head>body>input type="submit" value="把鼠标移动这里" name="btn1" onMouseOut=this.style.color="blue" onMouseOver=this.style.color="red" >/body>/html>
禁用鼠标右键JS代码
为了保证网站的内容不被非法拷贝，可以通过判断鼠标按键来禁止用户操作。本例禁止用户使用鼠标右键。
本例有两个重点：捕获窗体的鼠标事件和判断用户单击的按键。“onmousedown”事件用来捕获窗体的鼠标事件；“event.button”判断用户单击的按键，“1”表示左键，“2”表右键。
html xmlns="http://www.w3.org/1999/xhtml" >head> title>无标题页-学无忧（www.xue51.com）/title>script language="javascript">function click() { if (event.button==2) //单击的鼠标键 { alert('本网站禁用右键'); }}document.onmousedown=click; //绑定事件/script>/head>body >div>这是一个不能使用右键的案例/div>/body>/html>
跟随鼠标的彩色文字代码
跟随鼠标的文本可以很轻松实现，本例要实现的是文字不仅要跟随鼠标，而且颜色会不断变化。
本例的重点如下： （1）动态输出span元素，用来显示文本内容。动态输出span元素使用的是“document．write”方法，此处要注意每个“span”元素ID的创建方式。 （2）获取鼠标的坐标，根据坐标位置显示文本信息。获取鼠标坐标使用的是“event．clientx”和“event．clientY”属性。 （3）动态实现颜色的变化。本例使用了“Math．random0*255*255 * 255”创建一个随机颜色值，然后使用span元素的“color”属性设置文本最后显示的颜色。
html xmlns="http://www.w3.org/1999/xhtml" >head>title>标题页-学无忧（www.xue51.com）/title>STYLE>.spanstyle {COLOR: #0066ff; FONT-FAMILY: 隶书; FONT-SIZE: 14pt; FONT-WEIGHT: normal; POSITION: absolute; TOP: -50px; VISIBILITY: visible}/STYLE>SCRIPT language=javascript>var message="欢 迎 参 加 北 京 奥 运 会 ！"; //要跟随鼠标的文本var x,y;var step=15; //文本之间的距离var flag=0;
message=message.split(""); //将文本切换成数组var xpos=new Array();for (i=0;i=message.length-1;i ) { //设置所有文本的初始x坐标xpos[i]=-50;}var ypos=new Array();for (i=0;i=message.length-1;i ) { //设置所有文本的初始Y坐标ypos[i]=-50;}function handlerXY(e) { //根据浏览器的不同，获取鼠标的x,y坐标x = (document.layers) ? e.pageX : document.body.scrollLeft event.clientX 10;y = (document.layers) ? e.pageY : document.body.scrollTop event.clientY;flag=1;}function makesnake() {if (flag==1 && document.all) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1] step; //设置文本之间的显示距离 ypos[i]=ypos[i-1]; //设置文本的y坐标 } xpos[0]=x step; ypos[0]=y; for (i=0; i=message.length-1; i ) { var thisspan = eval("span" (i) ".style"); thisspan.posLeft=xpos[i]; thisspan.posTop=ypos[i]; thisspan.color=Math.random() * 255 * 255 * 255 Math.random() * 255 * 255 Math.random() * 255; }}else if (flag==1 && document.layers) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1] step; ypos[i]=ypos[i-1]; } xpos[0]=x step; ypos[0]=y;
for (i=0; imessage.length-1; i ) //根据字符的个数创建多个span元素，用来显示字符 { var thisspan = eval("document.span" i); thisspan.left=xpos[i]; //指定span的x坐标 thisspan.top=ypos[i]; //指定span的y坐标 //创建随机的颜色值 thisspan.color=Math.random() * 255 * 255 * 255 Math.random() * 255 * 255 Math.random() * 255; }}}for (i=0;i=message.length-1;i ) { //循环输出文本信息 document.write("span id='span" i "' class='spanstyle'>");document.write(message[i]); document.write("/span>");}
if (document.layers) {document.captureEvents(Event.MOUSEMOVE);}document.onmousemove = handlerXY;function firstLoad() { //窗体一加载便触发的事件makesnake(); //实现跟随鼠标文本的方法window.setTimeout("firstLoad();", 5);//定时执行此方法}/SCRIPT>/head>body bgcolor="#fef4d9" onload=javascript:firstLoad()>/body>/html>
JS代码实现跟随鼠标的魔法文字
鼠标周围可以跟随图片、文字和星星等。本例将提一些类似对联的文字，一直跟随鼠标移动。
本例的重点是获取鼠标的活动坐标，根据坐标动态设置多个层，多个层的交替形成魔法效果。“event．x”和“event．Y”分别获取鼠标的x和y坐标，然后使用“document。onmousemove=iemouse”绑定鼠标的移动事件。
html xmlns="http://www.w3.org/1999/xhtml" >head>title>标题页-学无忧（www.xue51.com）/title>SCRIPT language=JavaScript1.2>var msg='看的见我的漂移吗？';var msgColor='000000'var dismissafter=0var amount=5,ypos=0,xpos=0,Ay=0,Ax=0,By=0,Bx=0,Cy=0,Cx=0,Dy=0,Dx=0,Ey=0,Ex=0;if (document.layers){ //netscape下 for (i = 0; i amount; i ) {document.write('layer name=ns' i ' top=0 left=0>font face="宋体" size=2 color=' msgColor '>' msg '/font>/layer>')} window.captureEvents(Event.MOUSEMOVE); function nsmouse(evnt) //通过鼠标事件，获取鼠标的坐标 {xpos = evnt.pageX;ypos = evnt.pageY;mouseFollow()}}else if (document.all){ //ie下-输出层 document.write("div id='outer' style='position:absolute;top:0px;left:0px'>"); document.write("div id='inner' style='position:relative'>"); for (i = 0; i amount; i ) {document.write('div id="text"' i ' style="position:absolute;top:0px;left:0px;font-family:Courier New;font-size:16px;color:' msgColor '">' msg '/div>')} document.write("/div>"); document.write("/div>"); function iemouse() //通过鼠标事件，获取鼠标的坐标 {ypos = document.body.scrollTop event.y;xpos = document.body.scrollLeft event.x;mouseFollow()}}function mouseFollow(){ if (document.layers){//netscape下-设置层的位置 document.layers["ns0"].top=ay;document.layers["ns0"].left=ax; document.layers["ns1"].top=by;document.layers["ns1"].left=bx; document.layers["ns2"].top=cy;document.layers["ns2"].left=cx; document.layers["ns3"].top=Dy;document.layers["ns3"].left=Dx; document.layers["ns4"].top=Ey;document.layers["ns4"].left=Ex; } else if (document.all){//ie下，设置层的位置 outer.all.inner.all[0].style.pixelTop=ay;outer.all.inner.all[0].style.pixelLeft=ax; outer.all.inner.all[1].style.pixelTop=by;outer.all.inner.all[1].style.pixelLeft=bx; outer.all.inner.all[2].style.pixelTop=cy;outer.all.inner.all[2].style.pixelLeft=cx; outer.all.inner.all[3].style.pixelTop=Dy;outer.all.inner.all[3].style.pixelLeft=Dx; outer.all.inner.all[4].style.pixelTop=Ey;outer.all.inner.all[4].style.pixelLeft=Ex;}}function move(){ if (dismissafter!=0) setTimeout("hideMove()",dismissafter*1000) if (document.layers){window.onMouseMove = nsmouse} else if (document.all){window.document.onmousemove = iemouse} //绑定鼠标事件 ey = Math.round(Ey =((ypos 20)-Ey)*2/2);ex = Math.round(Ex =((xpos 20)-Ex)*2/2); dy = Math.round(Dy =(ey - Dy)*2/4);dx = Math.round(Dx =(ex - Dx)*2/4); cy = Math.round(Cy =(dy - Cy)*2/6);cx = Math.round(Cx =(dx - Cx)*2/6); by = Math.round(By =(cy - By)*2/8);bx = Math.round(Bx =(cx - Bx)*2/8); ay = Math.round(Ay = (by - Ay)*2/10);ax = Math.round(Ax = (bx - Ax)*2/10); mouseFollow(); jumpstart=setTimeout('move()',10); //定时执行捕获操作}function hideMove(){ if (document.all){ //ie浏览器的情况下 for (i2=0;i2amount;i2 ){ outer.all.inner.all[i2].style.visibility="hidden" //设置为隐藏 clearTimeout(jumpstart) //清除定时器 } } else if (document.layers){ //netscape浏览器的情况下 for (i2=0;i2amount;i2 ){ temp="ns" i2 document.layers[temp].visibility="hide" clearTimeout(jumpstart) } }}window.onload=move; //窗体一加载便触发飘移方法/SCRIPT>/head>body>/body>/html>
JS实现《黑客帝国》中的字符下落效果
所有看过电影《黑客帝国》的人可能都对一个场非常熟悉，那就是一连串的0、l编码。本例学习如何制作那种字符下落效果。
本例的重点是对颜色和速度的随机设置。JavaScript中的“Math”对象用来提供数学运算，其中“Math random”用来获取一个0到1之问的随机数。“Math.round”是采用四舍五入方式取得最接近的整数。代码中使用了两维数组，“delete”方法用来删除数组中的元索。
HTML>HEAD>TITLE>骇客帝国-学无忧（www.xue51.com）/title>meta http-equiv="Content-Type" content="text/html;charset=gb2312">/HEAD>style type="text/css">body{overflow:hidden;margin:0;background-color:#000000;font-family:宋体;}DIV.#heike{overflow:hidden;position:relative;top:5%;width:90%;height:90%;border-style:solid;border-width:1;border-color:#009900;}/style>script language="javascript">var strCount;var str;var Color;var Font;var sLine = "Wbr>Wbr>Wbr>.br>Bbr>abr>ibr>Dbr>ubr>.br>Cbr>Obr>M";function OnLoad(){strCount = 40;str = [];Color = [];Font = [];Color[0] = "#002211";//文字的颜色Color[1] = "#003311";Color[2] = "#005511";Color[3] = "#008811";Color[4] = "#00BB99";Color[5] = "#114411";Color[6] = "#335566";Color[7] = "#668899";Color[8] = "#99BBAA";Color[9] = "#CECECC";Font[0] = "10px"; //文字的大小Font[1] = "12px";Font[2] = "14px";Font[3] = "16px";Font[4] = "18px";setTimeout("strik()",50);}function strik(){for(var i=0;istrCount;i ){if(typeof(str[i]) != "undefined") //如果字符串存在{ if(str[i]["Carch"].style.pixelTop > heike.clientHeight) { str[i]["Carch"].outerHTML = ""; delete str[i]["Level"];//删除数组元素 delete str[i]["Speed"]; delete str[i]["Carch"]; delete str[i]; } else { str[i]["Carch"].style.pixelTop = str[i]["Speed"]; }}else if(Math.random()0.25) //随机小数{ str[i] = new Array(); str[i]["Level"] = Math.round(Math.random()*4); str[i]["Speed"] = (Math.round(Math.random()*str[i]["Level"])2) 10; document.all["heike"].insertAdjacentHTML("AfterBegin","span id='SPAN_" i "'>" sLine "/span>"); str[i]["Carch"] = document.all["SPAN_" i]; str[i]["Carch"].style.fontSize = Font[str[i]["Level"]]; //字体 str[i]["Carch"].style.position = "absolute"; //位置 str[i]["Carch"].style.pixelLeft = Math.round(Math.random()*heike.clientWidth); //x坐标 str[i]["Carch"].style.pixelTop = -str[i]["Carch"].offsetHeight; //y坐标 str[i]["Carch"].style.color = Color[str[i]["Level"] 5]; //颜色 str[i]["Carch"].style.filter = "glow(Color=" Color[str[i]["Level"]] ",Strength=5)";//滤镜效果 str[i]["Carch"].style.zIndex = str[i]["Level"]; //z-Index}}setTimeout("strik()",50);}/script>BODY onload="OnLoad()">table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">tr>td align="center" height="100%">div id="heike">/div>/td>/tr>tr>td align="center" style="padding:5;font-size:9pt;color:#FFFFFF;">使用 IE 6.0 以上版本或以 IE 为核心的浏览器浏览本页，1024*768分辨率为佳/td>/tr>/table>/BODY>/HTML>
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： JAVASCRIPT鼠标
相关文章
- 详细阅读
- 详细阅读
-
JavaScript 怎么模拟点击详细阅读
JavaScript 怎么模拟点击,在做页面开发时，我们通常会在页面上显示一些按钮，让用户来点击互动，但有时候需要用程序去主动触发点击页面上的按钮，而不是被动等待用户去点击。那么如何用JavaScri......
2023-03-17 320 JAVASCRIPT