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 相关文章推荐
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
javascript使用location.search的示例
Nov 05 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 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中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
php中取得文件的后缀名?
2012/02/20 PHP
深入apache host的配置详解
2013/06/09 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
python的几种开发工具介绍
2007/03/07 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
Ref与out有什么不同
2012/11/24 面试题
高中自我评价分享
2013/12/05 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
教师党员一句话承诺
2014/03/28 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
化工厂员工工作总结
2015/10/15 职场文书
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang
优化Mysql查询的示例
2022/04/26 MySQL