几种实用的JavaScript鼠标特效,在我们平时网页设计中,鼠标特效可以说是常常会用到,那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效,希望对大家有用。......
2023-03-17 483 JAVASCRIPT 鼠标
Javascript是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。
在桌机上新建文本文档,命名为晓博JavaScript特效测试.txt,在文本文档里中入HTML文档的基本元素如下,并保存。
html>
head>
title>晓博JavaScript特效测试/title>
/head>
body>
div id="zy">
div id="login">/div>
div id="daohang">
ul>
li>a href="index.html">首页/a>/li>
li>a href="jianjie.html">七夕简介/a>/li>
li>a href="#">七夕节传说/a>/li>
li>a href="#">七夕节习俗/a>/li>
li>a href="#">诗词& 歌谣/a>/li>
li>a href="#">七夕节寄语/a>/li>
/ul>
/div>
/div>
/body>
/html>
第一步:把如下代码加入body>区域中,并重名文档为HTML文件
LAYER NAME="a0" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,1,1">/LAYER>
LAYER NAME="a1" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,1,1">/LAYER>
LAYER NAME="a2" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,1,1">/LAYER>
LAYER NAME="a3" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,1,1">/LAYER>
LAYER NAME="a4" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,1,1">/LAYER>
LAYER NAME="a5" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF00FF" CLIP="0,0,1,1">/LAYER>
LAYER NAME="a6" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,1,1">/LAYER>
LAYER NAME="a7" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,2,2">/LAYER>
LAYER NAME="a8" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,2,2">/LAYER>
LAYER NAME="a9" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,2,2">/LAYER>
LAYER NAME="a10" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,2,2">/LAYER>
LAYER NAME="a11" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,2,2">/LAYER>
LAYER NAME="a12" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#0000ff" CLIP="0,0,2,2">/LAYER>
LAYER NAME="a13" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,3,3">/LAYER>
div id="starsDiv" style="position:absolute;top:0px;left:0px">
div style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px;visibility:visible">/div>
div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px;visibility:visible">/div>
div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px;visibility:visible">/div>
div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px;visibility:visible">/div>
div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px;visibility:visible">/div>
div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px;visibility:visible">/div>
div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px;visibility:visible">/div>
div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px;visibility:visible">/div>
div style="position:relative;width:2px;height:2px;background:#fff000;font-size:2px;visibility:visible">/div>
div style="position:relative;width:2px;height:2px;background:#ffa000;font-size:2px;visibility:visible">/div>
div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px;visibility:visible">/div>
div style="position:relative;width:2px;height:2px;background:#00ff00;font-size:2px;visibility:visible">/div>
div style="position:relative;width:2px;height:2px;background:#0000ff;font-size:2px;visibility:visible">/div>
div style="position:relative;width:3px;height:3px;background:#FF0000;font-size:3px;visibility:visible">/div>
/div>
SCRIPT LANGUAGE="JavaScript">
!-- Original: Kurt Grigg (kurt.grigg@virgin.net) -->
!-- Web Site: http://freespace.virgin.net/kurt.grigg -->
!-- This script and many more are available free online at -->
!-- The JavaScript Source!! http://javascript.internet.com -->
!-- Begin
var Clrs = new Array(6);
Clrs[0] = 'ff0000';
Clrs[1] = '00ff00';
Clrs[2] = '000aff';
Clrs[3] = 'ff00ff';
Clrs[4] = 'fff000';
Clrs[5] = 'fffff0';
var yBase = 200;
var xBase = 200;
var step;
var currStep = 0;
var Xpos = 1;
var Ypos = 1;
var Xs = 200;
var Ys = 400;
if (document.layers) {
window.captureEvents(Event.MOUSEMOVE);
}
if (document.all) {
function MoveHandler() {
Xpos = document.body.scrollLeft event.x;
Ypos = document.body.scrollTop event.y;
}
document.onmousemove = MoveHandler;
}
else if (document.layers) {
function xMoveHandler(evnt) {
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = xMoveHandler;
}
function Comet() {
if (document.all) {
yBase = window.document.body.offsetHeight / 4;
xBase = window.document.body.offsetWidth / 4;
}
else if (document.layers) {
yBase = window.innerHeight / 4;
xBase = window.innerWidth / 4;
}
if (document.all) {
for ( i = 0 ; i starsDiv.all.length ; i ) {
step = 3;
starsDiv.all[i].style.top = Ypos yBase*Math.cos((currStep i*4)/12)*Math.cos(0.7 currStep/200);
starsDiv.all[i].style.left = Xpos xBase*Math.sin((currStep i*3)/10)*Math.sin(8.2 currStep/400);
for (ai = 0; ai Clrs.length; ai ) {
var c=Math.round(Math.random()*[ai]);
}
starsDiv.all[i].style.background = Clrs[c];
}
}
else if (document.layers) {
for ( j = 0 ; j 14 ; j ) { //number of NS layers!
step = 6;
var templayer = "a" j;
document.layers[templayer].top = Ypos yBase*Math.cos((currStep j*4)/12)*Math.cos(0.7 currStep/200);
document.layers[templayer].left = Xpos xBase*Math.sin((currStep j*3)/10)*Math.sin(8.2 currStep/400);
for (aj=0; aj Clrs.length; aj )
{
var c=Math.round(Math.random()*[aj]);
}
document.layers[templayer].bgColor = Clrs[c];
}
}
currStep = step;
setTimeout("Comet()", 5);
}
Comet();
// End -->
/script>
用IE浏览器打开晓博JavaScript特效测试.html文件,可以看到跟随鼠标旋转礼花背景特效,如下图
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!
标签: JAVASCRIPT鼠标
相关文章
几种实用的JavaScript鼠标特效,在我们平时网页设计中,鼠标特效可以说是常常会用到,那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效,希望对大家有用。......
2023-03-17 483 JAVASCRIPT 鼠标
如何开始学习javascript,html是网页的内容,c是网页的格式,h是网站的后台,j是网站的前端,那么如何学习j,才能高效?......
2023-03-17 207 JAVASCRIPT