编程 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版本A*寻路算法

Dec 22 Javascript

jQuery操作 input type=checkbox的实现代码

Jun 14 Javascript

Javascript 判断是否存在函数的方法

Jan 03 Javascript

jquery load事件(callback/data)使用方法及注意事项

Feb 06 Javascript

JavaScript模拟push

Mar 06 Javascript

详解JS中遍历语法的比较

Apr 07 Javascript

浅谈JS中的反柯里化( uncurrying)

Aug 17 Javascript

微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)

Jan 24 Javascript

ES6基础之展开语法(Spread syntax)

Feb 21 Javascript

vue-test-utils初使用详解

May 23 Javascript

javascript设计模式 ? 解释器模式原理与用法实例分析

Apr 17 Javascript

详解Howler.js Web音频播放终极解决方案

Aug 23 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(4) php 函数补充2

2010/02/15 PHP

PHP 编写大型网站问题集

2010/05/07 PHP

php源代码安装常见错误与解决办法分享

2013/05/28 PHP

PHP防盗链代码实例

2014/08/27 PHP

php常用的安全过滤函数集锦

2014/10/09 PHP

php版微信公众平台之微信网页登陆授权示例

2016/09/23 PHP

Laravel 批量更新多条数据的示例

2017/11/27 PHP

PHP实现一个轻量级容器的方法

2019/01/28 PHP

js为鼠标添加右击事件防止默认的右击菜单弹出

2013/07/29 Javascript

js控制div层的叠加简单方法

2016/10/15 Javascript

BootStrap学习笔记之nav导航栏和面包屑导航

2017/01/03 Javascript

基于Nodejs利用socket.io实现多人聊天室

2017/02/22 NodeJs

JavaScript+HTML5实现的日期比较功能示例

2017/07/12 Javascript

vue-cli项目中怎么使用mock数据

2017/09/27 Javascript

js指定日期增加指定月份的实现方法

2018/12/19 Javascript

微信小程序实现简单跑马灯效果

2020/05/26 Javascript

React精髓！一篇全概括小结(急速)

2019/05/23 Javascript

js实现日历

2020/11/07 Javascript

[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15

2019/08/17 DOTA

python自定义解析简单xml格式文件的方法

2015/05/11 Python

使用pyecharts无法import Bar的解决方案

2020/04/23 Python

Redis使用watch完成秒杀抢购功能的代码

2018/05/07 Python

python中的变量如何开辟内存

2018/06/26 Python

解决tensorflow测试模型时NotFoundError错误的问题

2018/07/26 Python

Python的Tkinter点击按钮触发事件的例子

2019/07/19 Python

记一次pyinstaller打包pygame项目为exe的过程(带图片)

2020/03/02 Python

查看已安装tensorflow版本的方法示例

2020/04/19 Python

Python selenium爬虫实现定时任务过程解析

2020/06/08 Python

Python基于wordcloud及jieba实现中国地图词云图

2020/06/09 Python

CSS Grid布局教程之网格单元格布局

2014/12/30 HTML / CSS

老海军美国官网：Old Navy

2016/09/05 全球购物

写一个函数，求一个字符串的长度。在main函数中输入字符串，并输出其长度

2015/11/18 面试题

社会实践活动总结范文

2014/07/03 职场文书

教师年度考核个人总结

2015/02/12 职场文书

厉行节约工作总结

2015/08/12 职场文书

OpenCV项目实践之停车场车位实时检测

2022/04/11 Python