本文实例讲述了JS实现网页滚动条感应鼠标变色的方法。分享给大家供大家参考。具体实现方法如下：
代码如下:
<html>
<head>
<title>JS实现网页滚动条感应鼠标变色</title>
</head>
<body>
把你的目光转向右侧的滚动条看一下吧？是不是很漂亮噢？鼠标放上还会变换色彩呢？
<br><br><hr>
收集于互联网，只为兴趣与学习交流，不作商业用途。</p>
<script
language="JavaScript">
<!--
function
scrollBar(line,face,theme)
{
if
(!line||!face)
{
line=null
face=null
switch(theme)
{
case
"blue":
var
line="#78AAFF"
var
face="#EBF5FF"
break
case
"orange":
var
line="#FBBB37"
var
face="#FFF9DF"
break
case
"red":
var
line="#FF7979"
var
face="#FFE3DD"
break
case
"green":
var
line="#00C600"
var
face="#D1EED0"
break
case
"neo":
var
line="#BC7E41"
var
face="#EFE0D1"
break
}
}
with(document.body.style)
{
scrollbarDarkShadowColor=line
scrollbar3dLightColor=line
scrollbarArrowColor="black"
scrollbarBaseColor=face
scrollbarFaceColor=face
scrollbarHighlightColor=face
scrollbarShadowColor=face
scrollbarTrackColor="#F3F3F3"
}
}
function
colorBar(){
var
w
=
document.body.clientWidth
var
h
=
document.body.clientHeight
var
x
=
event.clientX
var
y
=
event.clientY
if(x>w)
scrollBar('#000080','#BFDFFF')
//
Your
colors
else
scrollBar(null,null,"neo")
//
A
predefined
theme
}
if
(document.all){
scrollBar(null,null,"neo")
document.onmousemove=colorBar
}
//-->
</script>
<br
/>
<div
style="width:100%height:1000px"></div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
<title>Js获取适时获取鼠标坐标值并显示</title><script type="text/javascript">
var getCoordInDocumentExample = function(){
var coords = document.getElementById("coords")
coords.onmousemove = function(e){
var pointer = getCoordInDocument(e)
var coord = document.getElementById("coord")
coord.innerHTML = "X,Y=("+pointer.x+", "+pointer.y+")"
}
}
var getCoordInDocument = function(e) {
e = e || window.event
var x = e.pageX || (e.clientX +
(document.documentElement.scrollLeft
|| document.body.scrollLeft))
var y= e.pageY || (e.clientY +
(document.documentElement.scrollTop
|| document.body.scrollTop))
return {'x':x,'y':y}
}
window.onload = function(){
getCoordInDocumentExample()
}
</script>
<div id="coords" style="width:500pxheight:200pxbackground:#F2F1D7border:2px solid #0066cc">
请在此移动鼠标。
</div>
<br />
<div id="coord" style="width:500pxborder:2px solid #336699"></div>
给你两个个思路：一：定义一个字体大小和颜色两个数组，再定义鼠标滑过事件，随机获取数组中的字体大小和颜色值。
二：随机颜色生成方法如下
function randomColor( ) { var rand = Math.floor(Math.random( ) * 0xFFFFFF).toString(16) if(rand.length == 6){ return rand }else{ return randomColor() }字体大小方法自己琢磨实现吧，核心方法就是：Math.random()生成随机数
