脚本说明:
把如下代码加入<body>区域中
<SCRIPT language="JavaScript1.2">
<!--
var scroller_msg='Hi,网络编程站欢迎你的光临!'
var dismissafter=0
var initialvisible=0
if (document.all)
document.write('<marquee id="curscroll" style="position:absolutewidth:150pxborder:1px solid blackfont-size:14pxbackground-color:whitevisibility:hidden">'+scroller_msg+'</marquee>')
function followcursor(){
//move cursor function for IE
if (initialvisible==0){
curscroll.style.visibility="visible"
initialvisible=1
}
curscroll.style.left=document.body.scrollLeft+event.clientX+10
curscroll.style.top=document.body.scrollTop+event.clientY+10
}
function dismissmessage(){
curscroll.style.visibility="hidden"
}
if (document.all){
document.onmousemove=followcursor
document.ondblclick=dismissmessage
if (dismissafter!=0)
setTimeout("dismissmessage()",dismissafter*1000)
}
//-->
</SCRIPT>
================================
鼠标箭头效果
脚本说明:
把如下代码加入<body>区域中
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var x, y, xold, yold, xdiff, ydiff
var dir = Array()
dir[0] = "n-resize"
dir[1]="ne-resize"
dir[2]="e-resize"
dir[3]="se-resize"
dir[4] = "s-resize"
dir[5]="sw-resize"
dir[6]="w-resize"
dir[7]="nw-resize"
document.onmousemove = FindXY
function display(direction) {
document.body.style.cursor = dir[direction]
}
function FindXY(loc) {
x = (document.layers) ? loc.pageX : event.clientX
y = (document.layers) ? loc.pageY : event.clientY
xdiff = x - xold
ydiff = y - yold
if ((xdiff < 2) &&(ydiff <-2)) display(0)
if ((xdiff < 2) &&(ydiff > 2)) display(4)
if ((xdiff > 2) &&(ydiff < 2)) display(2)
if ((xdiff <-2) &&(ydiff < 2)) display(6)
if ((xdiff > 2) &&(ydiff > 2)) display(3)
if ((xdiff > 2) &&(ydiff <-2)) display(1)
if ((xdiff <-2) &&(ydiff > 2)) display(5)
if ((xdiff <-2) &&(ydiff <-2)) display(7)
xold = x
yold = y
}
// End -->
</script>
你还,指针cur文件的路径,你写绝对路径试试。style="cursor:url(你的域名/images/Arrow.cur)"
Arrow.cur 写你的域名+/images/Arrow.cur。写完整的url路径
材料/工具:css
1、打开前端开发软件,新建一个html代码页面
2、在新建的html代码页面上找到<body>,在这个<body>标签里创建一个标签,a案例中使用的是<a>。
代码:
<a href="">
大家好,鼠标放到我身上就可看到效果
</a>
3、为新家<a>添加鼠标指针为手指样式。在html代码页面中找到<tilte>,在这个<title>后面创建一个<style>,然后在<style>中新建一个样式类,最后为这个样式类添加鼠标指针样式。
代码:
<style type="text/css">
.pointer{
cursor: pointer
}
</style>
4、把鼠标指针样式添加到<a>标签上。
添加后的代码:
<a href="" class="pointer">
大家好,鼠标放到我身上就可看到效果
</a>
5、保存html代码后使用浏览器打开,当鼠标滑过<a>上的文字后即可看到鼠标变为了指针状态。可以直接复制以下代码到新建的html文件上,粘贴保存后使用浏览器打开即可看到效果。
所有代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css设置鼠标指针</title>
<style type="text/css">
.pointer{
cursor: pointer
}
</style>
</head>
<body>
<a href="" class="pointer">
大家好,鼠标放到我身上就可看到效果
</a>
</body>
</html>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)