编程 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中设置默认参数值示例

Sep 11 Javascript

jQuery中data()方法用法实例

Dec 27 Javascript

javascript实现模拟时钟的方法

May 13 Javascript

JavaScript实现图片滑动切换的代码示例分享

Mar 06 Javascript

用 js 的 selection range 操作选择区域内容和图片

Apr 18 Javascript

React-router 4 按需加载的实现方式及原理详解

May 25 Javascript

bootstrap 点击空白处popover弹出框隐藏实例

Jan 24 Javascript

JavaScript设计模式之职责链模式应用示例

Aug 07 Javascript

从零开始在NPM上发布一个Vue组件的方法步骤

Dec 20 Javascript

JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式

Jul 10 Javascript

openlayers实现地图弹窗

Sep 25 Javascript

jquery实现淡入淡出轮播图效果

Dec 13 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

php中ob(Output Buffer 输出缓冲)函数使用方法

2007/07/21 PHP

php 过滤危险html代码

2009/06/29 PHP

PHP设置图片文件上传大小的具体实现方法

2013/10/11 PHP

PHP中的替代语法简介

2014/08/22 PHP

yii2.0之GridView自定义按钮和链接用法

2014/12/15 PHP

详解WordPress中调用评论模板和循环输出评论的PHP函数

2016/01/05 PHP

PHP针对redis常用操作实例详解

2019/08/17 PHP

jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名

2009/12/02 Javascript

Jquery ajax不能解析json对象，报Invalid JSON错误的原因和解决方法

2010/03/27 Javascript

3分钟写出来的Jquery版checkbox全选反选功能

2013/10/23 Javascript

Javascript 学习笔记之对象篇（二） : 原型对象

2014/06/24 Javascript

jquery实现类似EasyUI的页面布局可改变左右的宽度

2020/09/12 Javascript

js当前页面登录注册框,固定div,底层阴影的实例代码

2016/10/04 Javascript

KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法

2016/10/05 Javascript

ES6入门教程之Class和Module详解

2017/05/17 Javascript

jQuery实现checkbox即点即改批量删除及中间遇到的坑

2017/11/11 jQuery

js实现跟随鼠标移动的小球

2019/08/26 Javascript

在vue中使用image-webpack-loader实例

2020/11/12 Javascript

[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆

2014/07/15 DOTA

python进阶教程之循环相关函数range、enumerate、zip

2014/08/30 Python

使用虚拟环境打包python为exe 文件的方法

2019/08/29 Python

python 求定积分和不定积分示例

2019/11/20 Python

python判断是空的实例分享

2020/07/06 Python

python实现二分查找算法

2020/09/18 Python

CSS3 特效范例整理

2011/08/22 HTML / CSS

详解CSS3中nth-child与nth-of-type的区别

2017/01/05 HTML / CSS

初级软件工程师面试题 Junior Software Engineer Interview

2015/02/15 面试题

物流管理专业应届生求职信

2013/11/21 职场文书

推普周活动总结

2014/08/28 职场文书

员工辞职信怎么写

2015/02/27 职场文书

2015年乡镇统计工作总结

2015/04/22 职场文书

Python实战之用tkinter库做一个鼠标模拟点击器

2021/04/27 Python

Python OpenCV实现传统图片格式与base64转换

2021/06/13 Python

Java用自带的Image IO给图片添加水印

2021/06/15 Java/Android

Python办公自动化PPT批量转换操作

2021/09/15 Python

基于Apache Hudi在Google云构建数据湖平台的思路详解

2022/04/07 Servers