编程 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 相关文章推荐

基于jQuery的烟花效果（运动相关）点击屏幕出烟花

Jun 14 Javascript

jQuery自动切换/点击切换选项卡效果的小例子

Aug 12 Javascript

自定义的一个简单时尚js下拉选择框

Nov 20 Javascript

jQuery CSS3自定义美化Checkbox实现代码

May 12 Javascript

第七篇Bootstrap表单布局实例代码详解(三种表单布局)

Jun 21 Javascript

Angular 表单控件示例代码

Jun 26 Javascript

vue router2.0二级路由的简单使用

Jul 05 Javascript

js使用generator函数同步执行ajax任务

Sep 05 Javascript

vue 使用eventBus实现同级组件的通讯

Mar 02 Javascript

JS引用传递与值传递的区别与用法分析

Jun 01 Javascript

JAVA面试题 static关键字详解

Jul 16 Javascript

js获取 gif 的帧数的代码实例

Sep 10 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

php 在windows下配置虚拟目录的方法介绍

2013/06/26 PHP

十大使用PHP框架的理由

2015/09/26 PHP

php结合md5实现的加密解密方法

2016/01/25 PHP

CI框架中类的自动加载问题分析

2016/11/21 PHP

CI(CodeIgniter)框架视图中加载视图的方法

2017/03/24 PHP

解决Yii2邮件发送结果返回成功，但接收不到邮件的问题

2017/05/23 PHP

PHP设计模式之适配器模式原理与用法分析

2018/04/25 PHP

Yii框架getter与setter方法功能与用法分析

2019/10/22 PHP

Laravel Reponse响应客户端示例详解

2020/09/03 PHP

使用GruntJS构建Web程序之合并压缩篇

2014/06/06 Javascript

jQuery循环滚动新闻列表示例代码

2014/06/17 Javascript

Json实现异步请求提交评论无需跳转其他页面

2014/10/11 Javascript

jquery 操作css样式、位置、尺寸方法汇总

2014/11/28 Javascript

JS实现动态给图片添加边框的方法

2015/04/01 Javascript

基于jQuery.Hz2Py.js插件实现的汉字转拼音特效

2015/05/07 Javascript

HTML页面定时跳转方法解析（2种任选）

2016/12/22 Javascript

BootStrap Validator 根据条件在JS中添加或移除校验操作

2017/10/12 Javascript

解决Nodejs全局安装模块后找不到命令的问题

2018/05/15 NodeJs

js中获取URL参数的共用方法getRequest()方法实例详解

2018/10/24 Javascript

vue多个元素的样式选择器问题

2019/11/29 Javascript

解决Vue大括号字符换行踩的坑

2020/11/09 Javascript

详解Python的Django框架中的模版继承

2015/07/16 Python

python实现远程通过网络邮件控制计算机重启或关机

2018/02/22 Python

python引用(import)某个模块提示没找到对应模块的解决方法

2019/01/19 Python

Python Excel处理库openpyxl使用详解

2019/05/09 Python

django 自定义过滤器(filter)处理较为复杂的变量方法

2019/08/12 Python

python小程序基于Jupyter实现天气查询的方法

2020/03/27 Python

Pandas中DataFrame基本函数整理(小结)

2020/07/20 Python

Piercing Pagoda官网：耳环、戒指、项链、手链等

2020/09/28 全球购物

英语专业学生个人求职信

2014/01/28 职场文书

个人安全承诺书

2014/05/22 职场文书

2015年党小组工作总结

2015/05/26 职场文书

人身损害赔偿协议书

2016/03/22 职场文书

SQL Server数据定义——模式与基本表操作

2021/04/05 SQL Server

springboot 启动如何排除某些bean的注入

2021/08/02 Java/Android

Redis 哨兵机制及配置实现

2022/03/25 Redis