滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码


Posted in Javascript onDecember 28, 2009

安装U盘里下载的“滚动条变色”插件,

安装到DW后,如何正常应用该特效插件?
答:打开DW ,
1、新建页面——代码——删除<html>前面的所有代码!
2、鼠标定位在<head>之后——点击DW“设计”——点击“滚动条变色”插件,进行设置。
滚动条代码英文翻译:arrow——箭头,track——轨道。
提示:如果插入以下代码不能变色,请把网页头部<html>前的多于代码删除即可!

滚动条变色:

也可以直接在网页的<head> </head>之间输入以下代码,就可以随意变色了:

<style> 
body {SCROLLBAR-FACE-COLOR:#3333FF;(立体滚动条凸出部分的颜色) 
SCROLLBAR-HIGHLIGHT-COLOR:#505050;(滚动条空白部分的颜色) 
SCROLLBAR-SHADOW-COLOR:#fc2400;(立体滚动条阴影的颜色) 
SCROLLBAR-ARROW-COLOR:#666666;(上下按钮上三角箭头的颜色) 
SCROLLBAR-BASE-COLOR:#333333; (滚动条的基本颜色) 
SCROLLBAR-DARK-SHADOW-COLOR:#b4fc48} (立体滚动条强阴影的颜色) 
</style>

后面的16位颜色值你可以随意更改,括号内是解释说明,在输入时请不要插入。

隐藏滚动条:

在任何情况下,如果网页超出显示范围,就会出现滚动条。但有时我们并不想让它显示,如何隐藏它呢?只需在<body> </body>之间插入代码:<body style="overflow-x:hidden;overflow-y:hidden">即可。其中x表示水平滚动条,将其改为y的话就可以隐藏垂直滚动条。

双击网页滚屏显示:

当网页中有长篇文章时,浏览起来就比较吃劲了,想想一边忙着拖动滚动条,一边忙着浏览,确实挺累人的。为了客人能够轻松的浏览,我们可以使用script代码实现网页的自动滚屏,当双击网页的时候,网页将会自动向下滚动,再次单击时滚动停止。将下面的代码插入到<body> </body>之间。

<script language"javascript"> 
var currentpos,timer; 
function initialize() 
{ 
timer=setInterval("scrollwindow()",10); 
} 
function sc(){ 
clearInterval(timer); 
} 
function scrollwindow() 
{ 
currentpos=document.body.scrollTop; 
window.scroll(0,++currentpos); 
if (currentpos != document.body.scrollTop) 
sc(); 
} 
document.onmousedown=sc 
document.ondblclick=initialize 
</script>

注意:上面代码都是非标准模式的。
Javascript 相关文章推荐
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
vue v-model的用法解析
Oct 19 Javascript
javascript iframe编程相关代码
Dec 28 #Javascript
通过javascript设置css属性的代码
Dec 28 #Javascript
JavaScript的public、private和privileged模式
Dec 28 #Javascript
Javascript 面向对象特性
Dec 28 #Javascript
extJs 常用到的增,删,改,查操作代码
Dec 28 #Javascript
firefox和IE系列的相关区别整理 以备后用
Dec 28 #Javascript
javascript 显示当前系统时间代码
Dec 28 #Javascript
You might like
PHP会员找回密码功能的简单实现
2016/09/05 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
vue 组件简介
2020/07/31 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
简单学习Python time模块
2016/04/29 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
Python实现微信好友的数据分析
2019/12/16 Python
如何保障Web服务器安全
2014/05/05 面试题
AJAX的优缺点都有什么
2015/08/18 面试题
高中毕业生个人自我鉴定
2013/11/24 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
2014年班组长工作总结
2014/11/20 职场文书
《学会看病》教学反思
2016/02/17 职场文书
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android