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

js中cookie的使用详细分析

May 28 Javascript

bgsound 背景音乐的一些常用方法及特殊用法小结

May 11 Javascript

Jquery上传插件 uploadify v3.1使用说明

Jun 18 Javascript

js substr支持中文截取函数代码(中文是双字节)

Apr 17 Javascript

JavaScript DOM事件(笔记)

Apr 08 Javascript

详解JavaScript中数组和字符串的lastIndexOf()方法使用

Mar 13 Javascript

Bootstrap前端开发案例一

Jun 17 Javascript

js阻止冒泡和默认事件（默认行为）详解

Oct 20 Javascript

js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

Sep 21 Javascript

javascript+jQuery实现360开机时间显示效果

Nov 03 jQuery

vue实现百度搜索功能

Dec 28 Javascript

vue响应式原理与双向数据的深入解析

Jun 04 Vue.js

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语法速查表

2006/12/06 PHP

PHP syntax error, unexpected $end 错误的一种原因及解决

2008/10/25 PHP

在PHP中实现Javascript的escape()函数代码

2010/08/08 PHP

curl 出现错误的调试方法(必看)

2017/02/13 PHP

实用框架(iframe)操作代码

2014/10/23 Javascript

实例分析javascript中的call()和apply()方法

2014/11/28 Javascript

jQuery实现的fixedMenu下拉菜单效果代码

2015/08/24 Javascript

使用impress.js制作幻灯片

2015/09/09 Javascript

JavaScript 性能优化小结

2015/10/12 Javascript

js实现动态加载脚本的方法实例汇总

2015/11/02 Javascript

JS简单模拟触发按钮点击功能的方法

2015/11/30 Javascript

基于Bootstrap重置输入框内容按钮插件

2016/05/12 Javascript

Nodejs抓取html页面内容（推荐）

2016/08/11 NodeJs

Node.js开发教程之基于OnceIO框架实现文件上传和验证功能

2016/11/30 Javascript

jQuery操作DOM_动力节点Java学院整理

2017/07/04 jQuery

bootstrap table实现双击可编辑、添加、删除行功能

2017/09/27 Javascript

web前端vue实现插值文本和输出原始html

2018/01/19 Javascript

微信小程序实现留言板（Storage）

2018/11/02 Javascript

Win7下搭建python开发环境图文教程（安装Python、pip、解释器）

2016/05/17 Python

Python错误提示：[Errno 24] Too many open files的分析与解决

2017/02/16 Python

Python之py2exe打包工具详解

2017/06/14 Python

浅谈python requests 的put, post 请求参数的问题

2019/01/02 Python

python utc datetime转换为时间戳的方法

2019/01/15 Python

python 数据生成excel导出（xlwt,wlsxwrite）代码实例

2019/08/23 Python

Python解析json代码实例解析

2019/11/25 Python

python可视化text()函数使用详解

2020/02/11 Python

python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例

2020/02/28 Python

python中sklearn的pipeline模块实例详解

2020/05/21 Python

Python通过zookeeper实现分布式服务代码解析

2020/07/22 Python

伦敦平价潮流珠宝首饰品牌：Astrid & Miyu

2016/10/10 全球购物

Skyscanner阿联酋：全球领先的旅游搜索平台

2017/11/25 全球购物

相亲活动方案

2014/08/26 职场文书

关于清明节的演讲稿

2014/09/13 职场文书

商务宴会祝酒词

2015/08/11 职场文书

祝福语集锦：送给闺蜜的生日祝福语

2019/10/08 职场文书

MySQL数据库如何给表设置约束详解

2022/03/13 MySQL