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

网页中实现浏览器的最大，最小化和关闭按钮

Mar 12 Javascript

js 浮动层菜单收藏

Jan 16 Javascript

js不完美解决click和dblclick事件冲突问题

Jul 16 Javascript

从js向Action传中文参数出现乱码问题的解决方法

Dec 29 Javascript

jQuery分组选择器用法实例

Dec 23 Javascript

angularjs 实现带查找筛选功能的select下拉框实例

Jan 11 Javascript

JavaScript实现三级联动效果

Jul 15 Javascript

vue Render中slots的使用的实例代码

Jul 19 Javascript

js提取中文拼音首字母的封装工具类

Mar 12 Javascript

手写简单的jQuery雪花飘落效果实例

Apr 22 jQuery

详解Vue底部导航栏组件

May 02 Javascript

vue实现页面切换滑动效果

Jun 29 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 Cookie的使用教程详解

2013/06/03 PHP

php数组声明、遍历、数组全局变量使用小结

2013/06/05 PHP

php利用新浪接口查询ip获取地理位置示例

2014/01/20 PHP

php 文件下载出现下载文件内容乱码损坏的解决方法(推荐)

2016/11/16 PHP

ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能

2012/02/03 Javascript

js 阻止子元素响应父元素的onmouseout事件具体实现

2013/12/23 Javascript

javascript对JSON数据排序的3个例子

2014/04/12 Javascript

$("").click与onclick的区别示例介绍

2014/09/25 Javascript

使用jQuery简单实现模拟浏览器搜索功能

2014/12/21 Javascript

JavaScript之Object类型介绍

2015/04/01 Javascript

JavaScript实现简单的数字倒计时

2015/05/15 Javascript

jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)

2016/06/08 Javascript

AngularGauge 属性解析详解

2016/09/06 Javascript

JavaScript循环_动力节点Java学院整理

2017/06/28 Javascript

Easyui和zTree两种方式分别实现树形下拉框

2017/08/04 Javascript

Vue项目pdf(base64)转图片遇到的问题及解决方法

2018/10/19 Javascript

Makefile/cmake/node-gyp中区分判断不同平台的方法

2018/12/18 Javascript

在vue中封装的弹窗组件使用队列模式实现方法

2020/07/23 Javascript

vue 路由缓存路由嵌套路由守卫监听物理返回操作

2020/08/06 Javascript

[02:48]DOTA2英雄基础教程拉席克

2013/12/12 DOTA

Python def函数的定义、使用及参数传递实现代码

2014/08/10 Python

Python深入学习之对象的属性

2014/08/31 Python

Python中的True,False条件判断实例分析

2015/01/12 Python

Python 多线程抓取图片效率对比

2016/02/27 Python

Python模拟自动存取款机的查询、存取款、修改密码等操作

2018/09/02 Python

Tensorflow分类器项目自定义数据读入的实现

2019/02/05 Python

Html5与App的通讯方式详解

2019/10/24 HTML / CSS

2014年自我评价

2014/01/04 职场文书

主题婚礼策划方案

2014/02/10 职场文书

汽车运用工程专业求职信

2014/06/18 职场文书

和谐社区口号

2014/06/19 职场文书

2014年人事专员工作总结

2014/11/19 职场文书

工作失职检讨书

2015/01/26 职场文书

Nginx开启Brotli压缩算法实现过程详解

2021/03/31 Servers

sql通过日期判断年龄函数的示例代码

2021/07/16 SQL Server

mysql timestamp比较查询遇到的坑及解决

2021/11/27 MySQL