手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JS实现网页滚动条感应鼠标变色的方法
JS实现网页滚动条感应鼠标变色的方法
摘要:本文实例讲述了JS实现网页滚动条感应鼠标变色的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:JS实现网页滚动条感应鼠标变色...

本文实例讲述了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></div>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

【JS实现网页滚动条感应鼠标变色的方法】相关文章:

jQuery实现将页面上HTML标签换成另外标签的方法

js实现字符串转日期格式的方法

Javascript实现每日自动换一张图片的方法

js实现两点之间画线的方法

JS实现定时自动关闭DIV层提示框的方法

jQuery实现转动随机数抽奖效果的方法

JavaScript实现点击自动选择TextArea文本的方法

Javascript实现div层渐隐效果的方法

jQuery实现给页面换肤的方法

网页中移动的广告效果 鼠标悬停

精品推荐
分类导航