一条来自曾经的 willin kan 大神的滚动条

我没有调用 jQuery。

我木有调用 jQuery!

我居然木有调用 jQuery!

在我生物回头考的最后阶段我脑子回想的就是这样的一句话,我总算明白了为什么这几天折腾的滚动条就是不显示。前几天实在是想不通啊~!明明只是一段代码的引用啊,明明是一段放哪里都可以生效的js代码啊,明明别的几个小站都很成功啊,明明查看网页源代码可以看到,可是为什么审查元素时的 CSS 是display:none;

我已经记不清楚我是做了生物卷子上的哪道题目让我豁然开朗,让我意识到了这个埋头苦思几百万年都不一定想得到的极品问题。

我没有调用 jQuery。那我那一整个上午究竟在折腾什么!!

不过,不管怎样,我的心情还是很美好,下面让我开开心心地介绍一下这段来自 WordPress 曾经的大神 willin kan 的滚动条代码。

遗作
Willin kan 大神已经不在 WordPress,但是他的精神与人格会永存,他曾经的作品将会被人们永远铭记。谨以此 One Piece 截图来表示我最崇高的敬意。

下面开始堆代码。

<script type="text/javascript">// Mouseover Scrolling
jQuery.noConflict();
jQuery(document).ready(function($) {
$('body').append('<div id="scrollbar"><div id="up">&#9650;<\/div>&#9737;<div id="dn">&#9660;<\/div><\/div>'); // append div
$('#up').mouseover(function(){ up();            // scroll up
      }).mouseout(function(){ clearTimeout(fq); // stop
      }).click(function(){
         if (getY() == 0) return;               // reach top
         $('#scrollbar').fadeOut(function(){ self.scrollTo(0, 0); $('#scrollbar').fadeIn(); }) // jump up
      });
$('#dn').mouseover(function(){ dn();            // scroll dowm
      }).mouseout(function(){ clearTimeout(fq); // stop
      }).click(function(){
         if (getY() + document.documentElement.clientHeight >= document.body.offsetHeight) return; // reach bottom
         $('#scrollbar').fadeOut(function(){ self.scrollTo(0, document.body.offsetHeight); $('#scrollbar').fadeIn(); }) // jump dowm
      });
}); // end jQ
function getY(){
   posY = typeof(window.pageYOffset) == 'number' ? window.pageYOffset : document.documentElement.scrollTop; // current position
   return posY;
}
function up(){
   $area = jQuery(window);
   $area.scrollTop($area.scrollTop() - 40); // steps = -40
   fq = setTimeout("up()", 10);             // frequency
}
function dn(){
   $area = jQuery(window);
   $area.scrollTop($area.scrollTop() + 40); // steps = +40
   fq = setTimeout("dn()", 10);             // frequency
}
/* CSS */
bs = 'box-shadow: rgba(0,0,0,.3) 1px 5px 11px;';
br = 'border-radius: 17px;'; // round corner
document.write('<style type="text\/css">'
   + '#scrollbar {position:fixed; top:'       // ("position:fixed" not works in IE6, but I don't care.)
   + (document.documentElement.clientHeight * 0.24)       // 24% window height  
   + 'px; right:6px; height:74px; width:16px; padding:10px; font:15px/25px Arial; cursor:default;'
   + '-moz-'+ bs +'-webkit-'+ bs + bs                     // box-shadow
   + '-moz-'+ br +'-webkit-'+ br + br +'}'                // border-radius
   + '#up:hover, #dn:hover {cursor:pointer; color:#bbb;}' // hover color
   + '<\/style>');
// -- END -- //
</script>

至于使用效果,我也不多说了,看右边,看右边!大概我这五年内的博客右侧滚动条都不会再变了吧,黑白颜色外加纯代码,很百搭。

如果还有什么要说的话,请参看本文开头的三句。

以上。

P.S. 生物考试是很枯燥的考试,物理考试是很有趣的考试。但是当我在生物考试快结束时灵机一动意识到本文初的问题时,我有把物理考试翘掉回家改代码的冲动。

再次 P.S. 我觉得还是说一下这个滚动条有什么好的吧,因为它实在是太好了~!

首先,鼠标移到上下符号时,页面就会滚动了;其次,鼠标点击上下符号时,页面就会跳到页首页尾了,一闪而过的赶脚让人超惊喜;再次,中间那个方向盘居然只是起装饰作用;但是,它却是装饰得那么完美,那么朴素,那么有技术含量!啊,我要厥倒了!

注,使用说明,复制代码,WordPress 就在主题里 header 或 footer 或 sidebar 或某X找个空位子放着就行,空位子怎么找自己看;WordPress 还可以新建“文本”小工具,粘贴代码,拖至边栏保存即可;此代码适用于但不只限于博客程序,别地方要用扒过去即可。

啊拉啊拉,这就是 JavaScript 的魅力所在啊~!(笑)


<center>两年后补记

女人还真是善变啊,明明说五年都不变心,却不料一年不到即已沧海桑田。

然而滚动条的效果还是要 show off 一下的,不然看官会觉得我的赞美是夸张。

所以特意在此文内引用了下上段代码,为防变故,我也还截了个图。

一条滚动条

补记完</center>

<script type="text/javascript">// Mouseover Scrolling
$(function() {
$('body').append('<div id="scrollbar"><div id="up">▲</div>☉<div id="dn">▼</div></div>'); // append div
$('#up').mouseover(function(){ up(); // scroll up

  }).mouseout(function(){ clearTimeout(fq); // stop
  }).click(function(){
     if (getY() == 0) return;               // reach top
     $('#scrollbar').fadeOut(function(){ self.scrollTo(0, 0); $('#scrollbar').fadeIn(); }) // jump up
  });

$('#dn').mouseover(function(){ dn(); // scroll dowm

  }).mouseout(function(){ clearTimeout(fq); // stop
  }).click(function(){
     if (getY() + document.documentElement.clientHeight >= document.body.offsetHeight) return; // reach bottom
     $('#scrollbar').fadeOut(function(){ self.scrollTo(0, document.body.offsetHeight); $('#scrollbar').fadeIn(); }) // jump dowm
  });

}); // end jQ
function getY(){
posY = typeof(window.pageYOffset) == 'number' ? window.pageYOffset : document.documentElement.scrollTop; // current position
return posY;
}
function up(){
$area = jQuery(window);
$area.scrollTop($area.scrollTop() - 40); // steps = -40
fq = setTimeout("up()", 10); // frequency
}
function dn(){
$area = jQuery(window);
$area.scrollTop($area.scrollTop() + 40); // steps = +40
fq = setTimeout("dn()", 10); // frequency
}
/ CSS /
bs = 'box-shadow: rgba(0,0,0,.3) 1px 5px 11px;';
br = 'border-radius: 17px;'; // round corner
document.write('<style type="text/css">'

  • '#scrollbar {position:fixed; top:' // ("position:fixed" not works in IE6, but I don't care.)
  • (document.documentElement.clientHeight * 0.24) // 24% window height
  • 'px; right:6px; height:74px; width:16px; padding:10px; font:15px/25px Arial; cursor:default;'
  • '-moz-'+ bs +'-webkit-'+ bs + bs // box-shadow
  • '-moz-'+ br +'-webkit-'+ br + br +'}' // border-radius
  • '#up:hover, #dn:hover {cursor:pointer; color:#bbb;}' // hover color
  • '</style>');
    // -- END -- //

</script>

关键词:CSSJavaScript滚动条

Next

已有 2 条评论

  1. Ben Ben

    他的。。。遗作。。。。

    1. 别跟悼念似的!
      (你的发表时间是亮点。。。)

添加新评论

*设定头像请访问Gravatar