JS实现网页滚动条感应鼠标变色的方法

JavaScript09

JS实现网页滚动条感应鼠标变色的方法,第1张

这篇文章主要介绍了JS实现网页滚动条感应鼠标变色的方法,实例分析了javascript针对鼠标事件的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

window.onmousewheel = function(){  //触发滚轮事件

}

window.onscroll = function(){  //滚动条事件

}

//其实你的问题直接使用判断滚动条应该就可以了，但是如果一定要拖动滚动条才执行事件，我们可以通过获取鼠标位置来模拟

var a = document.getElementsByTagName("html")[0]

window.onmousemove = function(){

        //一般默认滚动条12px宽，当鼠标位于浏览器窗口右边12px内按下鼠标可以视为拖动滚动条

if(innerWidth - event.clientX < 12){

a.onmousedown = function(){

console.log(1)

}

}else{

a.onmousedown = null

}

}