一条来自曾经的 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 的魅力所在啊~!(笑)


两年后补记

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

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

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

一条滚动条

补记完

« 继续阅读 »

Read More

Mariah Carey is ALMOST HOME

Almost Home by Mariah Carey

哈哈,Mariah Carey发新单啦~!《Almost Home》中文翻译暂未确定,大概就是“快到家了”、“近乡”之类的吧~!

大概是为了契合Disney的诡异气氛吧,开头的低音几乎让我认不出来是她,勇于改变,赞一个!

有人说,整首歌有点Rihanna的感觉。仔细一听,确实有些像,但是再听,再听,不可能啊!Rihanna绝对唱不出这么美的高音~!~!~!!

啊,还有那完美的海豚音,啊~~我要被融化了~!!

我还能说什么呢,Mimi是我眼中永远的也是唯一的Diva。

Read More

我被单词彻底伤掉了...

我被单词彻底伤掉了

既然要准备千分考,那么扩大词汇量是必要的吧;既然这么急着扩大词汇量,那么找个好方法是必要的吧;既然已经决定在拓词上背了,那么提高点效率是必要的吧;……

好,那就一天背完大学四级所有单词怎么样?

不行,一天太少了,两天吧。

好,就两天。(2月21日晚,我开始背起了单词,然后做出了在明晚12点前吧背完所有单词的决定,接着注定了2013年2月22日是我从出生以来最二的日子。)

我,就这样,被单词,伤掉了。

拓词努力榜
看看看,看那第一名的位置啊,就是我天下第一的英姿啊~~!

从昨早上起对整日之行为信心满满,到下午吃完午饭对自己是不是应该休息一会这种想法进行了深刻地鄙视以及果断地采取,再到吃晚饭前android客户端上跳出来的“你将进入下一阶段”的字眼让我泪流满面,最后到了11点半结束了从“学习”到“冲刺”的艰难旅途,结果发现MD居然还有个总复习,四千五百多个单词还要再尼玛过一遍。。。计算一下,每个单词就算它2秒好了,那么4500个就是9000秒,除以3600那就是1000除以400,好的,二点五小时。。。既然今天十二点前肯定完不成,那就睡吧睡吧。。。

于是今早起来,精神恍惚,要不要接着背呢,答案是肯定的,我又背了1个小时,700多个;那么,要不要接着背呢,答案是否定的,我于是看掉了《泰囧》,话说范冰冰的最后出场还真是够囧啊;看完了电影,那么要不要接着背呢,答案尚未确定,我现在正在瞎忙活些别的事来阻止我考虑这个问题。

以上。

好了,考虑完了,我该接着背了。

阿门。

Read More