网页高手-玩转网页滚动条

2016-02-19 13:28 6 1 收藏

下面请跟着图老师小编一起来了解下网页高手-玩转网页滚动条,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!

【 tulaoshi.com - Web开发 】

  网页滚动条本身就是浏览器的一部分,使用它可以方便浏览较大的网页,但是千篇一律的它经常会给整体页面效果拖了不少后腿,我们能不能改变它灰灰的样子呢?能!俗话说:“只有你想不到的,没有做不到的。”
给滚动条换色
FRA
  几乎所有网页的滚动条都是默认的灰色,如果把它的颜色换换,来点另类的,相信一定会使网页更加靓丽。我们只要在网页代码<head </head之间插入下面的代码,即可随心所欲地更改颜色了。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)


<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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
  后面的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

来源:http://www.tulaoshi.com/n/20160219/1604397.html

延伸阅读
标签: Web开发
到现在为止,初始化这些MooTools插件对象就会开始变得越来越熟悉。滚动条(Slider)没有任何不同,你要创建一个新的滚动条,定义滚动条和滑块相关的元素,然后设置你的选项,再创建一些回调事件的控制函数。尽管滚动条(Slider)遵循这个熟悉的模式,但是任然还有一点特殊的地方。 基本用法创建一个新的滚动条(Slider)对象 我们首先从HTML...
标签: Web开发
代码如下: //调用函数 var pagestyle = function() { var rframe = $("#mainFrame"); //ie7默认情况下会有上下滚动条,去掉上下15像素 var h = $(window).height() - rframe.offset().top - 15; rframe.height(h); } //注册加载事件 $("#mainFrame").load(pagestyle); //注册窗体改变大小事件 $(window).resize(pagestyle);
标签: Web开发
今天遇到了一个纵向滚动条 ,本来打算用框架做,经过看到别人做的页面中,才知道可以用CSS 控制,以下CSS代码贡献给大伙学习。 overflow-y:scroll 上下滚 overflow-x:scroll 左右滚
标签: Web开发
一外国佬写的。 有几种样式,点击那些example1234.html就能看见了。 可以研究一下下 http://www.n-son.com/scripts/jsScrolling/
标签: Web开发
记录滚动条位置 dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd...

经验教程

708

收藏

64
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部