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

安装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>

注意:上面代码都是非标准模式的。

时间: 2024-08-07 20:13:29

滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码_javascript技巧的相关文章

JS+CSS实现自动切换的网页滑动门菜单效果代码_javascript技巧

本文实例讲述了JS+CSS实现自动切换的网页滑动门菜单效果代码.分享给大家供大家参考.具体如下: 这是一款支持自动切换功能的网页滑动门菜单,JS与CSS结合的技术成果,有人说它是自己会切换的网页选项卡标签面板,QQ登录后弹出的每日要闻迷你窗口中有类似效果,但是代码写法却是截然不同的,每一位作者的思路是不同的,因此您多了一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-cha-tab-menu-style-code

js基于面向对象实现网页TAB选项卡菜单效果代码_javascript技巧

本文实例讲述了js基于面向对象实现网页TAB选项卡菜单效果代码.分享给大家供大家参考.具体如下: 这是一款自动的网页TAB,基于面向对象的选项卡菜单,由于时间关系只做了简单的实现,界面没有美化,不多做介绍了. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mxdx-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

禁用backspace网页回退功能的实现代码_javascript技巧

实例如下: <script language="JavaScript"> document.onkeydown = check; function check(e) { var code; if (!e) var e = window.event; if (e.keyCode) code = e.keyCode; else if (e.which) code = e.which; if (((event.keyCode == 8) && //BackSpac

js实现的简洁网页滑动tab菜单效果代码_javascript技巧

本文实例讲述了js实现的简洁网页滑动tab菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款风格简洁的网页滑动门代码,基于JS和Div+CSS实现.滑动门菜单,只需鼠标放上去就切换的菜单,和网页选项卡只是操作形式上的不同而已,滑动门改选项卡只需将门菜单中的onmouseover换成onclick就行了,这样换了之后,切换内容需要鼠标点击门菜单才可以. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-div-hd-tab

js实现左侧网页tab滑动门效果代码_javascript技巧

本文实例讲述了js实现左侧网页tab滑动门效果代码.分享给大家供大家参考.具体如下: 这是一款开口靠左的网页滑动门,网页滑动门,TAB滑动门,竖排滑动门菜单,竖排TAB选项卡,兼容IE6/IE7/FF/opera浏览器.其实竖排和横排的代码基本一样,只不过稍加修改就可以了.只要学会了一种滑动门,就能举一返三了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-left-tab-cha-style-codes/ 具体代码如下: <!DOCTY

js图片自动切换效果处理代码_javascript技巧

复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=1000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]="5.jpg"; arr[5

让textarea自动调整大小的js代码_javascript技巧

复制代码 代码如下: <!doctype html> <html> <head> <title>自动调整大小的textarea </title> <meta charset = "utf-8" /> <style type = "text/css"> .editable{cursor:text; font-size:13px; color:#003366;width:80px;lin

javascript动态向网页中添加表格实现代码_javascript技巧

//此段代码在IE9.Firefox.Chorme.safair中测试显示没有问题,给该表格添加了一些简单的样式,基本功能可以实现,还有少量问题有待改进! 效果图如下:  以下是代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

点击隐藏页面左栏或右栏实现js代码_javascript技巧

点击隐藏页面左栏或右栏(同一TABLE中) 复制代码 代码如下: <style type="text/css"> <!-- .navPoint {COLOR: white; CURSOR: hand; FONT-FAMILY: Webdings; FONT-SIZE: 9pt} .STYLE1 {FONT-FAMILY: Webdings; FONT-SIZE: 9pt; cursor: hand;} --> </style> <script&