编程 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 05 Javascript

JS中类或对象的定义说明

Mar 10 Javascript

jquery中页面Ajax方法$.load的功能使用介绍

Oct 20 Javascript

jquery+CSS3实现淘宝移动网页菜单效果

Aug 31 Javascript

微信小程序 Flex布局详解

Oct 09 Javascript

jquery自定义插件结合baiduTemplate.js实现异步刷新（附源码）

Dec 22 Javascript

angular仿支付宝密码框输入效果

Mar 25 Javascript

javascript简写常用的12个技巧（可以大大减少你的js代码量）

Mar 28 Javascript

JS实现的Object数组去重功能示例【数组成员为Object对象】

Feb 01 Javascript

vue工程全局设置ajax的等待动效的方法

Feb 22 Javascript

微信小程序事件对象中e.target和e.currentTarget的区别详解

May 08 Javascript

vue实现购物车案例

May 30 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的变量总结新手推荐

2011/04/18 PHP

编写安全 PHP应用程序的七个习惯深入分析

2013/06/08 PHP

关于Sphinx创建全文检索的索引介绍

2013/06/25 PHP

php下载excel无法打开的解决方法

2013/12/24 PHP

PHP把小数转成整数3种方法

2014/06/30 PHP

php算法实例分享

2015/07/14 PHP

javascript 支持ie和firefox杰奇翻页函数

2008/07/22 Javascript

ExtJs grid行右键菜单的两种方法

2010/06/19 Javascript

poshytip 基于jquery的插件主要用于显示微博人的图像和鼠标提示等

2012/10/12 Javascript

如何让你的Lightbox支持滚轮缩放及Base64图片

2014/12/04 Javascript

使用jquery+CSS实现控制打印样式

2014/12/31 Javascript

jQuery中$.each使用详解

2015/01/29 Javascript

jQuery实现拖拽页面元素并将其保存到cookie的方法

2016/06/12 Javascript

AngularJS实现星星等级评分功能

2016/09/24 Javascript

bootstrap css样式之表单

2017/01/19 Javascript

hammer.js实现图片手势放大效果

2017/08/29 Javascript

js实现同一个页面,多个enter事件绑定的示例

2018/10/10 Javascript

vue下载excel的实现代码后台用post方法

2019/05/10 Javascript

vue源码中的检测方法的实现

2019/09/26 Javascript

vue项目中在可编辑div光标位置插入内容的实现代码

2020/01/07 Javascript

vue+Element中table表格实现可编辑（select下拉框）

2020/05/21 Javascript

在Echarts图中给坐标轴加一个标识线markLine

2020/07/20 Javascript

整理Python最基本的操作字典的方法

2015/04/24 Python

Python中使用不同编码读写txt文件详解

2015/05/28 Python

Python修改MP3文件的方法

2015/06/15 Python

Python函数参数操作详解

2018/08/03 Python

解析python的局部变量和全局变量

2019/08/15 Python

Python和Anaconda和Pycharm安装教程图文详解

2020/02/04 Python

购买一个高级域名：BuyDomains

2018/03/11 全球购物

大学生学习生活的自我评价

2013/11/01 职场文书

导购员的岗位职责

2014/02/08 职场文书

公司管理建议书范文

2014/03/12 职场文书

火灾现场处置方案

2014/05/28 职场文书

群众路线个人剖析材料及整改措施

2014/11/04 职场文书

贷款收入证明范本

2015/06/12 职场文书

悬崖上的金鱼姬观后感

2015/06/15 职场文书