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


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 相关文章推荐
javascript编程起步(第七课)
Jan 10 Javascript
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
js随机生成一个验证码
Jun 01 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
使用koa2创建web项目的方法步骤
Mar 12 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 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 YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
Yii rules常用规则示例
2016/03/15 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
Python网站验证码识别
2016/01/25 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
python批量处理txt文件的实例代码
2020/01/13 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
教师通用专业自荐书范文
2014/02/11 职场文书
西式结婚主持词
2014/03/14 职场文书
小学英语课后反思
2014/04/26 职场文书
食品安全演讲稿
2014/09/01 职场文书
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle