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程序设计有所帮助。

Javascript 相关文章推荐
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
vue v-for 使用问题整理小结
Aug 04 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 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中的实现trim函数代码
2007/03/19 PHP
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
一个选择最快的服务器转向代码
2009/04/27 Javascript
javascript 表单规则集合对象
2009/07/21 Javascript
javascript EXCEL 操作类代码
2009/07/30 Javascript
JavaScript 函数式编程的原理
2009/10/16 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
set在python里的含义和用法
2019/06/24 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
python实现人工蜂群算法
2020/09/18 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
旷课检讨书2000字
2014/01/14 职场文书
洗发水广告词
2014/03/13 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
教师外出学习心得体会
2016/01/18 职场文书