教学项目二十四 JavaScript中光标特效网页设计
【 基本内容 】
讲解 JavaScript中几种光标特效网页设计
【 教学要求 】
学会设计光标特效网页
一, 案例设计
设计网页,实现图片跟随光标特效 。
<html>
<body>
<script language="JavaScript">
var newtop=0;
var newleft=0;
if (navigator.appVersion.indexOf("MSIE") != -1) {
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
function doMouseMove() {
layerName = 'iit'
eval('var
curElement='+layerRef+'["'+layerName+'"]')
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"')
eval('curElement'+styleSwitch+'.visibility="visible"')
eval('newleft=document.body.clientWidth-
curElement'+styleSwitch+'.pixelWidth')
eval('newtop=document.body.clientHeight-
curElement'+styleSwitch+'.pixelHeight')
eval('height=curElement'+styleSwitch+'.height')
eval('width=curElement'+styleSwitch+'.width')
width=parseInt(width)
height=parseInt(height)
if (event.clientX > (document.body.clientWidth - 5 - width))
{
newleft=document.body.clientWidth + document.body.scrollLeft - 5 – width;
}
else
{
newleft=document.body.scrollLeft + event.clientX;
}
eval('curElement'+styleSwitch+'.pixelLeft=newleft');
if (event.clientY > (document.body.clientHeight - 5 - height))
{
newtop=document.body.clientHeight + document.body.scrollTop - 5 – height;
}
else
{
newtop=document.body.scrollTop + event.clientY;
}
eval('curElement'+styleSwitch+'.pixelTop=newtop');
}
document.onmousemove = doMouseMove;
</script>
<script language="javascript">
if (navigator.appVersion.indexOf("MSIE") != -1) {
document.write('<div ID=OuterDiv>')
document.write('<img ID=iit src="rabbit.gif"
STYLE="position:absolute;TOP:0pt;LEFT:0pt;Z-
INDEX:2;visibility:hidden;">')
document.write('</div>')
}
</script>
</body>
</html>
二、设计案例,
设计文字跟踪光标效果的特效网页。
程序代码如下,
<html>
<head>
<style>
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:10pt;
font-family:Verdana;
font-weight:bold;
color:black;
}
</style>
<script>
var x,y;
var step=20;
var flag=0;
// Your snappy message,Important,the space at the end of the
sentence!!!
var message=“湖北职院 百年名校 银领人才摇篮, ;
message=message.split("");
var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50;
}
var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50;
}
function handlerMM(e){
x = (document.layers)? e.pageX,
document.body.scrollLeft+event.clientX;
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];
}
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];
}
}
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++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i];
thisspan.top=ypos[i];
}
}
var timer=setTimeout("makesnake()",30);
}
</script>
</head>
<body onLoad="makesnake()" style="width:100%;overflow-
x:hidden;overflow-y:scroll">
<script language=javascript>
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 = handlerMM;
</script>
</body>
</html>
案例设计三,
设计网页,打开网页后禁止使用鼠标左右键 。
程序代码如下,
<html>
<head>
<script language=JavaScript>
function click()
{
if (event.button==1)
{alert("对不起,禁止使用左键 ");}
if (event.button==2)
{alert("对不起,禁止使用右键 ");}
}
document.onmousedown=click;
</script>
</head>
</html>
案例设计四、设计网页,计算用户停留时间。
程序代码如下,
<html>
<body onUnload=stay()>
<script language="Javascript">
<!--
pageOpen = new Date();
function stay() {
pageClose = new Date();
minutes = (pageClose.getMinutes() - pageOpen.getMinutes());
seconds = (pageClose.getSeconds() - pageOpen.getSeconds());
time = (seconds + (minutes * 60));
time = (time + " 秒钟 ");
alert('您在这儿停留了 ' + time + '.欢迎下次再来 !');
}
//-->
</script>
<p>测试停留时间,.,
</body>
</html>
分析,
pageOpen = new Date();
定义一个新的日期对象, 纪录开始浏览页面时
间 。
function stay()
定义一个函数 。
pageClose = new Date();
定义一个新的日期对象, 纪录结束浏览页面时
间 。
minutes = (pageClose.getMinutes()
- pageOpen.getMinutes());
,分钟, 变量等于结束时间的分钟数减去开始
时间的分钟数 。
seconds = (pageClose.getSeconds()
- pageOpen.getSeconds());
,秒数, 变量等于结束时间的秒数数减去开始
时间的秒数数 。
time = (seconds + (minutes * 60));
时间变量等于, 秒数, 变量加上, 分钟, 变量
乘以 60,即变为以秒纪录 。
time = (time + " 秒钟 "); alert('您
在这儿停留了 ' + time + '.欢迎下次
再来 !');
alert()是 JavaScript的窗口对象方法, 其功能
是弹出一个具有 OK对话框并显示 ( ) 中的字符
串, 告诉在此页面停留的时间 。
onUnload=stay()
页面卸载的时候, 调用 stay()函数 。
【课后小结】
本节介绍了光标特效的几个实例,要求能够读懂相应的源代码,并能通过修改
代码实现用户要求的光标特效。
【 基本内容 】
讲解 JavaScript中几种光标特效网页设计
【 教学要求 】
学会设计光标特效网页
一, 案例设计
设计网页,实现图片跟随光标特效 。
<html>
<body>
<script language="JavaScript">
var newtop=0;
var newleft=0;
if (navigator.appVersion.indexOf("MSIE") != -1) {
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
function doMouseMove() {
layerName = 'iit'
eval('var
curElement='+layerRef+'["'+layerName+'"]')
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"')
eval('curElement'+styleSwitch+'.visibility="visible"')
eval('newleft=document.body.clientWidth-
curElement'+styleSwitch+'.pixelWidth')
eval('newtop=document.body.clientHeight-
curElement'+styleSwitch+'.pixelHeight')
eval('height=curElement'+styleSwitch+'.height')
eval('width=curElement'+styleSwitch+'.width')
width=parseInt(width)
height=parseInt(height)
if (event.clientX > (document.body.clientWidth - 5 - width))
{
newleft=document.body.clientWidth + document.body.scrollLeft - 5 – width;
}
else
{
newleft=document.body.scrollLeft + event.clientX;
}
eval('curElement'+styleSwitch+'.pixelLeft=newleft');
if (event.clientY > (document.body.clientHeight - 5 - height))
{
newtop=document.body.clientHeight + document.body.scrollTop - 5 – height;
}
else
{
newtop=document.body.scrollTop + event.clientY;
}
eval('curElement'+styleSwitch+'.pixelTop=newtop');
}
document.onmousemove = doMouseMove;
</script>
<script language="javascript">
if (navigator.appVersion.indexOf("MSIE") != -1) {
document.write('<div ID=OuterDiv>')
document.write('<img ID=iit src="rabbit.gif"
STYLE="position:absolute;TOP:0pt;LEFT:0pt;Z-
INDEX:2;visibility:hidden;">')
document.write('</div>')
}
</script>
</body>
</html>
二、设计案例,
设计文字跟踪光标效果的特效网页。
程序代码如下,
<html>
<head>
<style>
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:10pt;
font-family:Verdana;
font-weight:bold;
color:black;
}
</style>
<script>
var x,y;
var step=20;
var flag=0;
// Your snappy message,Important,the space at the end of the
sentence!!!
var message=“湖北职院 百年名校 银领人才摇篮, ;
message=message.split("");
var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50;
}
var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50;
}
function handlerMM(e){
x = (document.layers)? e.pageX,
document.body.scrollLeft+event.clientX;
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];
}
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];
}
}
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++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i];
thisspan.top=ypos[i];
}
}
var timer=setTimeout("makesnake()",30);
}
</script>
</head>
<body onLoad="makesnake()" style="width:100%;overflow-
x:hidden;overflow-y:scroll">
<script language=javascript>
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 = handlerMM;
</script>
</body>
</html>
案例设计三,
设计网页,打开网页后禁止使用鼠标左右键 。
程序代码如下,
<html>
<head>
<script language=JavaScript>
function click()
{
if (event.button==1)
{alert("对不起,禁止使用左键 ");}
if (event.button==2)
{alert("对不起,禁止使用右键 ");}
}
document.onmousedown=click;
</script>
</head>
</html>
案例设计四、设计网页,计算用户停留时间。
程序代码如下,
<html>
<body onUnload=stay()>
<script language="Javascript">
<!--
pageOpen = new Date();
function stay() {
pageClose = new Date();
minutes = (pageClose.getMinutes() - pageOpen.getMinutes());
seconds = (pageClose.getSeconds() - pageOpen.getSeconds());
time = (seconds + (minutes * 60));
time = (time + " 秒钟 ");
alert('您在这儿停留了 ' + time + '.欢迎下次再来 !');
}
//-->
</script>
<p>测试停留时间,.,
</body>
</html>
分析,
pageOpen = new Date();
定义一个新的日期对象, 纪录开始浏览页面时
间 。
function stay()
定义一个函数 。
pageClose = new Date();
定义一个新的日期对象, 纪录结束浏览页面时
间 。
minutes = (pageClose.getMinutes()
- pageOpen.getMinutes());
,分钟, 变量等于结束时间的分钟数减去开始
时间的分钟数 。
seconds = (pageClose.getSeconds()
- pageOpen.getSeconds());
,秒数, 变量等于结束时间的秒数数减去开始
时间的秒数数 。
time = (seconds + (minutes * 60));
时间变量等于, 秒数, 变量加上, 分钟, 变量
乘以 60,即变为以秒纪录 。
time = (time + " 秒钟 "); alert('您
在这儿停留了 ' + time + '.欢迎下次
再来 !');
alert()是 JavaScript的窗口对象方法, 其功能
是弹出一个具有 OK对话框并显示 ( ) 中的字符
串, 告诉在此页面停留的时间 。
onUnload=stay()
页面卸载的时候, 调用 stay()函数 。
【课后小结】
本节介绍了光标特效的几个实例,要求能够读懂相应的源代码,并能通过修改
代码实现用户要求的光标特效。