编程 Javascript

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

Posted in Javascript onFebruary 26, 2015

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

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

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

通过JAVASCRIPT读取ASP设定的COOKIE

Nov 24 Javascript

Prototype使用指南之ajax

Jan 10 Javascript

关于hashchangebroker和statehashable的补充文档

Aug 08 Javascript

JQuery中dataGrid设置行的高度示例代码

Jan 03 Javascript

原生javascript实现简单的datagrid数据表格

Jan 02 Javascript

正则表达式替换html元素属性的方法

Nov 26 Javascript

jQuery中的on与bind绑定事件区别实例详解

Feb 28 Javascript

JavaScript数据结构之广义表的定义与表示方法详解

Apr 12 Javascript

页面间固定参数,通过cookie传值的实现方法

May 31 Javascript

使用pkg打包ThinkJS项目的方法步骤

Dec 30 Javascript

JS实现拖动模糊框特效

Aug 25 Javascript

Js Snowflake(雪花算法)生成随机ID的实现方法

Aug 26 Javascript

js随机生成网页背景颜色的方法

Feb 26 #Javascript

jQuery简单实现隐藏以及显示特效

Feb 26 #Javascript

最流行的Node.js精简型和全栈型开发框架介绍

Feb 26 #Javascript

jQuery对象初始化的传参方式

Feb 26 #Javascript

JS实现文字链接感应鼠标淡入淡出改变颜色的方法

Feb 26 #Javascript

JS实现很酷的水波文字特效实例

Feb 26 #Javascript

jQuery中slideUp 和 slideDown 的点击事件

Feb 26 #Javascript

You might like

分享8个最佳的代码片段在线测试网站

2013/06/29 PHP

php递归json类实例

2014/12/02 PHP

OAuth认证协议中的HMACSHA1加密算法(实例)

2017/10/25 PHP

JavaScript入门教程 Cookies

2009/01/31 Javascript

将jQuery应用于login页面的问题及解决

2009/10/17 Javascript

日期处理的js库（迷你版）--自建js库总结

2011/11/21 Javascript

artdialog的图片/标题以及关闭按钮不显示的解决方法

2013/06/27 Javascript

简单的js表单验证函数

2013/10/28 Javascript

js判断iframe内的网页是否滚动到底部触发事件

2014/03/18 Javascript

JQuery $.each遍历JavaScript数组对象实例

2014/09/01 Javascript

js获取页面引用的css样式表中的属性值方法(推荐)

2016/08/19 Javascript

Bootstrapvalidator校验、校验清除重置的实现代码(推荐)

2016/09/28 Javascript

纯js实现倒计时功能

2017/01/06 Javascript

vue监听滚动事件实现滚动监听

2017/04/11 Javascript

总结JavaScript在IE9之前版本中内存泄露问题

2018/04/28 Javascript

vue-cli项目修改文件热重载失效的解决方法

2018/09/19 Javascript

详解Angular模板引用变量及其作用域

2018/11/23 Javascript

vue 表单之通过v-model绑定单选按钮radio

2019/05/13 Javascript

javascript中如何判断类型汇总

2019/05/14 Javascript

Javascript实现打鼓效果

2021/01/29 Javascript

python中wx将图标显示在右下角的脚本代码

2013/03/08 Python

Python中比较特别的除法运算和幂运算介绍

2015/04/05 Python

Python+OpenCV目标跟踪实现基本的运动检测

2018/07/10 Python

解读python如何实现决策树算法

2018/10/11 Python

python代码输入数字使其反向输出的方法

2018/12/22 Python

详解python函数的闭包问题（内部函数与外部函数详述）

2019/05/17 Python

Python学习笔记之错误和异常及访问错误消息详解

2019/08/08 Python

python隐藏类中属性的3种实现方法

2019/12/19 Python

Fossil德国官网：化石手表、手袋、珠宝及配件

2019/12/07 全球购物

建筑设计所实习生自我鉴定

2013/09/25 职场文书

结婚典礼证婚词

2014/01/11 职场文书

九年级体育教学反思

2014/01/23 职场文书

妇女干部培训方案

2014/05/12 职场文书

银行员工考核评语

2014/12/31 职场文书

交通安全学习心得体会

2016/01/18 职场文书

win10搭建配置ftp服务器的方法

2022/08/05 Servers