首页 > 代码库 > 实用的JavaScript鼠标特效
实用的JavaScript鼠标特效
JS代码使鼠标滚轮失效
- 1
当页面内容太多时，可以通过鼠标滚轮实现翻页效果。但有些读书网站提供页面自动滚屏的功能，此时可使鼠标的滚轮失效，让用户充分体验网站提供的功能。
本例在页而中添加了一个表格，可将窗口缩小，以出现滚动条效果。当出现滚动条时．滑动鼠标的滚轮，测试此操作是否能够成功。代码重写了“document.onmousewheel”方法，若返回false值则表示不执行任何鼠标滚动的操作。
- 2
实例代码如下：
<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 >
<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>END
JS代码实现状态栏显示鼠标位置
- 1
为了让DIV层可以跟随鼠标，层的控制通常需要获取鼠标的位置。本例学习如何获取鼠标的X和Y坐标。
本例的重点Event对象，其用来描述JavaScript的事件。Event对象的“x”属性用来获取鼠标指针位置相对于窗口客户区域的x坐标，其中客户区域不包括窗口自身的控件和滚动条。Event对象的“y”属性表示y坐标。
- 2
实例代码如下：
<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>END
鼠标放到图片上会显示另外一张图片
- 1
在大多数网页中，如果鼠标移动到图片上，通常会给出文本提示。本例将学习如何不显示文本．而显示指定的图片。
本例的重点是如何判断当前图片，并更改图片的地址。在img控件中，“src”属性表示要显示图片的地址，如果是网络地址，一定要指明详细的URL路径。如果判断的是当前图片，在参数传递的时候，使用“this”。
- 2
实例代码如下：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>鼠标放到图片上会显示另外一张图片</title>
<SCRIPT LANGUAGE="JavaScript">
function changeSrc(obj)
{
obj.src="http://www.mamicode.com/LOGO2.gif";//改变图像地址
}
</script>
</head>
<body>
<img onm ousemove="changeSrc(this)" src="http://www.mamicode.com/LOGO1.gif" />
</body>
</html>END
鼠标移入移出时颜色变化代码
- 1
当用户将鼠标移动到按钮或链接上时．为了突出显示用户的选择，会改变链接和按钮的颜色。默认链接的颜色是自动变化的，本例学习如何手动为按钮设置这种效果。
本例的重点是鼠标事件的应用。当鼠标移动到控件上时，触发了‘‘onMouseOver”事件，当鼠标移走时，触发“onMouseOut”事件。两个事件的响应都是使用“style.color”改变控件的颜色。
- 2
实例代码如下：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>鼠标移入移出时颜色变化代码</title>
</head>
<body>
<input type="submit" value="http://www.mamicode.com/把鼠标移动这里" name="btn1" onm ouseOut=this.style.color="blue"
onMouseOver=this.style.color="red" >
</body>
</html>END
禁用鼠标右键JS代码
- 1
为了保证网站的内容不被非法拷贝，可以通过判断鼠标按键来禁止用户操作。本例禁止用户使用鼠标右键。
本例有两个重点：捕获窗体的鼠标事件和判断用户单击的按键。“onmousedown”事件用来捕获窗体的鼠标事件；“event.button”判断用户单击的按键，“1”表示左键，“2”表右键。
- 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>END
跟随鼠标的彩色文字代码
- 1
跟随鼠标的文本可以很轻松实现，本例要实现的是文字不仅要跟随鼠标，而且颜色会不断变化。
本例的重点如下：
（1）动态输出span元素，用来显示文本内容。动态输出span元素使用的是“document．write”方法，此处要注意每个“span”元素ID的创建方式。
（2）获取鼠标的坐标，根据坐标位置显示文本信息。获取鼠标坐标使用的是“event．clientx”和“event．clientY”属性。
（3）动态实现颜色的变化。本例使用了“Math．random0*255*255 * 255”创建一个随机颜色值，然后使用span元素的“color”属性设置文本最后显示的颜色。 - 2
<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; i<message.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" onl oad=javascript:firstLoad()>
</body>
</html>END
JS代码实现跟随鼠标的魔法文字
- 1
鼠标周围可以跟随图片、文字和星星等。本例将提一些类似对联的文字，一直跟随鼠标移动。
本例的重点是获取鼠标的活动坐标，根据坐标动态设置多个层，多个层的交替形成魔法效果。“event．x”和“event．Y”分别获取鼠标的x和y坐标，然后使用“document。onmousemove=iemouse”绑定鼠标的移动事件。
- 2
<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=0
var 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+‘ >‘+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;i2<amount;i2++){
outer.all.inner.all[i2].style.visibility="hidden" //设置为隐藏
clearTimeout(jumpstart) //清除定时器
}
}
else if (document.layers){ //netscape浏览器的情况下
for (i2=0;i2<amount;i2++){
temp="ns"+i2
document.layers[temp].visibility="hide"
clearTimeout(jumpstart)
}
}
}
window.onload=move; //窗体一加载便触发飘移方法
</SCRIPT>
</head>
<body>
</body>
</html>END
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 = "W<br>W<br>W<br>.<br>B<br>a<br>i<br>D<br>u<br>.<br>C<br>O<br>M";
function onl oad()
{
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;i<strCount;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 onl oad="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" >使用 IE 6.0 以上版本或以 IE 为核心的浏览器浏览本页，1024*768分辨率为佳</td></tr>
</table>
</BODY>
</HTML>