编程 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+xml技术实现分页浏览

Jul 27 Javascript

JavaScript 获得选中文本内容的方法

Feb 15 Javascript

JavaScript 的继承

Oct 01 Javascript

js获取php变量的实现代码

Aug 10 Javascript

javascript制作2048游戏

Mar 30 Javascript

JavaScript中数组去除重复的三种方法

Apr 22 Javascript

使用Bootstrap框架制作查询页面的界面实例代码

May 27 Javascript

ES6入门教程之Iterator与for...of循环详解

May 17 Javascript

详解win7 cmd执行vue不是内部命令的解决方法

Jul 27 Javascript

浅谈Webpack下多环境配置的思路

Jun 27 Javascript

Vue中JS动画与Velocity.js的结合使用

Feb 13 Javascript

jQuery 移除事件的方法

Jun 20 jQuery

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

example2.php

2006/10/09 PHP

php强制文件下载而非在浏览器打开的自定义函数分享

2014/05/08 PHP

thinkPHP商城公告功能开发问题分析

2016/12/01 PHP

php之可变函数的实例详解

2017/09/13 PHP

Laravel框架文件上传功能实现方法示例

2019/04/16 PHP

PHP实现带进度条的Ajax文件上传功能示例

2019/07/02 PHP

php策略模式简单示例分析【区别于工厂模式】

2019/09/25 PHP

用Javascript来生成ftp脚本的小例子

2013/07/03 Javascript

jQuery获取iframe的document对象的方法

2014/10/10 Javascript

JQuery中extend的用法实例分析

2015/02/08 Javascript

详解AngularJS中的作用域

2015/06/17 Javascript

JavaScript数组去重的3种方法和代码实例

2015/07/01 Javascript

Angular的事件和表单详解

2016/12/26 Javascript

vue初尝试--项目结构(推荐)

2018/01/30 Javascript

基于rollup的组件库打包体积优化小结

2018/06/18 Javascript

微信小程序实现单列下拉菜单效果

2019/04/25 Javascript

JS中数据结构与算法---排序算法(Sort Algorithm)实例详解

2019/06/17 Javascript

vue webpack重写cookie路径的方法

2019/07/10 Javascript

Vue.js仿Select下拉框效果

2020/02/18 Javascript

用JS实现选项卡

2020/03/23 Javascript

JS时间戳与日期格式互相转换的简单方法示例

2021/01/30 Javascript

[03:20]2015国际邀请赛全明星表演赛

2015/08/08 DOTA

python脚本内运行linux命令的方法

2015/07/02 Python

Python多进程库multiprocessing中进程池Pool类的使用详解

2017/11/24 Python

Python 中字符串拼接的多种方法

2018/07/30 Python

Python:Numpy 求平均向量的实例

2019/06/29 Python

如何使用python爬虫爬取要登陆的网站

2019/07/12 Python

python 使用while写猜年龄小游戏过程解析

2019/10/07 Python

Python3 filecmp模块测试比较文件原理解析

2020/03/23 Python

Python代码执行时间测量模块timeit用法解析

2020/07/01 Python

美术教师个人总结

2015/02/06 职场文书

房屋产权证明书

2015/06/19 职场文书

辩论会主持词

2015/07/03 职场文书

导游词之西安骊山

2019/12/20 职场文书

Python+Appium自动化测试的实战

2021/06/30 Python

Java tomcat手动配置servlet详解

2021/11/27 Java/Android