鼠标移到向上或向下的图片上,文本自动滚动

做这个程序,需要用到1个html,1个js,3张图片.中间的那篇文章是我的真实写照。

我们开始做吧,首先写个demo.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<style type="text/css">
.Container {
     position: absolute;
     top: 50px; left: 100px;
     width: 400px;
     height: 200px;
     background: #FFF url(wallpaper-0043.jpg) no-repeat;
}
#Scroller-1 {
     position: absolute;
     overflow: hidden;
     width: 400px;
     height: 200px;
}
#Scroller-1 p {
     margin: 0; padding: 10px 20px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 11px;
     text-indent: 20px;
     color: #000000;
}
.Scroller-Container {
     position: absolute;
     top: 0px; left: 0px;
}
.Scrollbar-Up {
     cursor: pointer;
     position: absolute;
     top: -0px; left: 420px;
}
.Scrollbar-Down {
     cursor: pointer;
     position: absolute;
     top: 180px; left: 420px;
}
</style>
<script type="text/javascript" src="jsScroller.js"></script>
<script type="text/javascript">
var scroller = null;
window.onload = function () {
     var el = document.getElementById("Scroller-1");
     scroller = new jsScroller(el, 400, 200);
}
</script>
</head>
<body>
<div class="Container">
<!-- onmouseover:     控制速度 ,大一点,快。-->
     <img src="up.png" class="Scrollbar-Up" οnmοuseοver="scroller.startScroll(0, 0.5);" οnmοuseοut="scroller.stopScroll();" />
     <img src="down.png" class="Scrollbar-Down" οnmοuseοver="scroller.startScroll(0, -0.5);" οnmοuseοut="scroller.stopScroll();" />
     <div id="Scroller-1">
      <div class="Scroller-Container">
    
         <p> 首先自我介绍下吧。叫什么名字就不说了,反正不好听,把我的外号给大家吧。我的外号叫 66 。呵呵,为什么叫 66呢,我也不知道 ,反正是一个女的帮我取的,数字也瞒吉利的。所以就笑纳了。。。
         <p>在讲讲我的经历吧。从我的脑子里最深的记忆说起吧。小学的我,就爱好玩电子游戏,记得那时候最早是我住的那个厂子里面,有个青年买了一台小霸王游戏机,所以我们厂里 很多跟我年纪差不多的小伙子,经常跑到他家去玩游戏,什么魂斗罗啊,1到N代,冒险岛啊,热血系列啊。 反正都喜欢玩。当然玩不是白给你玩的,那时候我们在他家玩,要帮他做家务,比如说帮他打扫卫生拉,洗碗拉,叠被子啊。反正他基本上不要做什么。我们这么多小孩子 帮他做。有一次,我玩的上瘾了,下午没去上学,结果被爸妈知道了,被K了一吨,后来就去得少了。 反正那青年也很喜欢玩,后来我们也经常到他家去玩扑克,那时候很流行那个动画纸(不知道叫什么去了,反正就那小小的,长方形的图画,5毛钱可以买一张,大概100张),泡也拉,豹子拉,3打哈拉(我们老家这么叫的),每次基本都是输,那青年赢了我们几袋子的,晕, 那时候觉得好可笑。</p>
         <p>不知道是小学几年纪,我迷上了电子游戏,经常一下学,就跑到游戏厅玩,5毛钱买2个铜板,一般可以玩1个小时,最早的就是三国志拉,现在想想,很无聊哦。记得我最厉害的就是玩格斗(kof)了,而在其中,我最厉害的就是kof97了,首先在我们班是最厉害的了。经常跟我们班同学格斗,然后谁输了,请客,当然80%是赢,呵呵,我同学知道可能会输,但还是要跟我来玩,不明白。。。</p>
         <p>上了初中,我就迷上了 网吧,记得那时候网吧刚刚开始在我国起步。我跟我朋友去里面看过几次。那时候很贵,要4块一小时。那时候我朋友要我声请 QQ,我不知道什么东西,所以就没声请,我朋友声请了,啊,现在想起来后悔哦。5位数字啊。。。可惜了。。。我第一次进网吧,看见一个青年在玩游戏,不知道什么游戏,后来才知道 那是星际争霸。呵呵,现在我玩那游戏瞒厉害的。CS吗,那时候在我们那个年代也流行了一阵,基本上每个网吧都是玩那个。而且都是仓库地形。或者沙漠。到了初三的时候,我们迷上了玩网络游戏,记得我和我同学玩得第一个网络游戏 名字叫红月。反正很老了。后来传奇刚刚上线,那时候开了1到3区,刚开始,我和我们同学没钱买卡,就每次玩到8级时候,不下线,一直玩下去,可是有时候也会被盛大段掉。然后又重新声请个号,重新玩,说实话,传奇这游戏真是符合我们的。那时候就开始喜欢了。记得我们那时候玩传奇的时候,才几个区,后来我们读高一了,没想到,传奇既然有了20多个,后来既然发展有个服务器以我们家乡命名。我们也去玩了,而且里面大部分都是我们家乡的人在玩。玩那游戏对我们这些读书的人 ,真的是完不起, 所以向家里要钱不说,早餐拉也是不吃,有时候实在不行,就骗家里的。玩那游戏,当然要很多时间,通宵玩是家常便饭。人啊,活的那个累啊。初中的时候,通宵还怎么多,真正的恐怖,在我念高中时,那才叫恐怖呢.</p>
         <p>高中,对我来说,简直是疯狂的,盛大的游戏无一例外都有号,热血传奇,泡泡堂,冒险岛。。。通宵简直达到疯狂地步,你如果想在晚上在寝室找到我,那简直是怪了。基本上都在外面。记得有一次,我跟我同学连续通宵13天,当然白天在读书的时候,出了不少洋相,比如说 我同学 老师喊 起立,我同学喊了句老师好 ,然后就倒下了。然后同座还以为他病了呢。 还有个同学,上课睡觉,老师叫他”***,别睡了“,我同学抬了下头,然后又扑在桌上睡着了。我也有不少洋相,那就不说自己了。</p>
         <p>当然我这样玩也给我带来了不少麻烦,从小学说起吧,小学没考上,交了2000块的建效费才到了一所最垃圾的学校念初中,初中玩电游,被同学告过几次,老师抓过几次,因为学校比较差,那时候我在我们班成绩还是比较好的,前15名吧,还当了一个小小的干部。后来实在没办法,因为我们实在玩的太厉害了,在离中考还有15天的时候,学校帮我们3个人开除了,晕,后来我们3个同学的家长 ,就天天找老师,找学校,我们3个就天天做保证。。。后来最终是交了400块钱的保证费,才去参加中考。记得在中考的时候,我们考完一科出来,然后又跑到网吧,去上半小时,然后再去考试。老妈跟着我后面,我进网吧,她也跟着进网吧,哎,那时候我老妈真是拿我没办法。当然 ,中考没考上省重点,但还算可以,考上了一所还不错的高中学校,我那2个同学也托关系去了拿所学校,当然我不要托关系。但老爸老妈不肯我去,后来托关系,用了4000块钱,帮我买到了省重点读高中,读高中先说保证书吧,不知道有多少份了,有上网的,打架的,逃学的。。。高2的时候,我们班主任要开除我,但在我的家长的劝说下,还是没帮我开除。高3 ,班主任换了,上网更加疯狂,保证书一份又一份的写,缺的课也越来越多。有一次1个月上了20多个通宵后,老师知道了,老师问我:这个月通宵了多少次,我回答说10多次,老师吓了一跳,这么多啊,其实哪只有这么多啊,有24次呢。。。没办法,老师直接打电话到我姑姑家里,这一次是来真的了,老师死也不肯收我了,一定要帮我开除,后来我姑姑要我 跪下跟老师认错。我一听:”什么?要我跪下“,一怒之下,冲出重围,跑出办公室,一路狂奔,躲到了一个地方。(等我同学下学后,我就到我同学家里去了)。我要我同学别跟别人说,老师问他 也别说。那时候我的想法就是不读书了,借点钱去广州 打工去。 我托我同学,跟我那女同学借50块钱,(我高中时候喜欢的女孩子,但她对我只是朋友关系。当然对我还是很好的。)我同学借了50块钱给我。然后东凑西楱,也凑了200块钱,当然这已经过了几天了,班主任和我的亲戚都在四处找我。而我却天天躲在我同学家了,听歌。记得那时候刚好流行几首歌。十年拉,断点拉,知心绝对。反正那时候有几首歌漫好听的。反正心情也满糟。后来经过班长传信,说老师不开除我了,我就回学校了/。当然我从那次也慢慢开始改变了。首先从1个礼拜只有星期日下午去玩玩,到后来几个星期才去一个。高3那年,从那一次开始,才真正开始读书,同学们都说我变了个人。  
      当然其中还是有一段时间又去玩了一会,但是兴趣没以前那么大了。后来高考 ,发挥还是正常的。考了467分。那时候本科录取线是491分。差了20多分,还不错拉,因为前面几次模拟考试都只有这么多,发挥还正常。当然老爸老妈可就不这么想了,发脾气说不让我读书了,所以后来我也发脾气,不读就不读啊。我老爸老妈一定要我上本科,大专不让我读,主要是他们对大学不了解。
      后来就这样不了了。同学们都读大专去了,而我就跟着老爸老妈到了宁波来打工。 混了个大半年,第一次发工资,发了600多块钱,然后拿了100多块钱到超市买了 很多做火锅的东西。做了一个火锅给同事们吃,再公司自己做,自己动手,哈哈,进不起酒店。然后跟同事们打牌(3张牌),结果把所有的钱都输给了同事,后来同事又给了我50块钱,让我做车回去。晕,那个掺啊。后来也就再也不碰那东西了。
      因为那个行业危险太高,而且工资有低,年底做完就没去了,做了3个多月,才拿了2个月的工资,后来 天天在家看报纸,看有没有哪里有学习的地方,后来莫名其妙的去了一所软件学校培训,学费当然不低了,光学费就1W6。。。而且只有1年,1年后,也就是今年的4月底,我工作了。我去了一家小的软件公司工作。试用期1000块。现在感觉自己还满上进的了,已经不在象以前那么乱来了。至少现在     老爸老妈不要再为我操心了。
      </p>
     <p>
     多少次说不要我这个儿子,多少次说要跟我断绝父子关系,最后老爸还是一次又一次的帮助我。感觉现在还好拉,过去的事也就不要再去想了,有2年没回老家了,今年年底打算回家见见奶奶,姑姑他们,毕竟我一直是他们帮我带大的。
     希望一路顺利,能在工作上一路66。
      </p>
       </div>
     </div>
</div>
</body>
</html>
jsScroller.js:
//Written by Nathan Faubion: http://n-son.com
//Use this or edit how you want, just give me
//some credit!
function jsScroller (o, w, h) {
var self = this;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
     if (list[i].className.indexOf("Scroller-Container") > -1) {
      o = list[i];
     }
}

//Private methods
this._setPos = function (x, y) {
     if (x < this.viewableWidth - this.totalWidth)
      x = this.viewableWidth - this.totalWidth;
     if (x > 0) x = 0;
     if (y < this.viewableHeight - this.totalHeight)
      y = this.viewableHeight - this.totalHeight;
     if (y > 0) y = 0;
     this._x = x;
     this._y = y;
     with (o.style) {
      left = this._x +"px";
      top     = this._y +"px";
     }
};

//Public Methods
this.reset = function () {
     this.content = o;
     this.totalHeight = o.offsetHeight;
     this.totalWidth     = o.offsetWidth;
     this._x = 0;
     this._y = 0;
     with (o.style) {
      left = "0px";
      top     = "0px";
     }
};
this.scrollBy = function (x, y) {
     this._setPos(this._x + x, this._y + y);
};
this.scrollTo = function (x, y) {
     this._setPos(-x, -y);
};
this.stopScroll = function () {
     if (this.scrollTimer) window.clearInterval(this.scrollTimer);
};
this.startScroll = function (x, y) {
     this.stopScroll();
     this.scrollTimer = window.setInterval(
      function(){ self.scrollBy(x, y); }, 40
     );
};
this.swapContent = function (c, w, h) {
     o = c;
     var list = o.getElementsByTagName("div");
     for (var i = 0; i < list.length; i++) {
      if (list[i].className.indexOf("Scroller-Container") > -1) {
       o = list[i];
      }
     }
     if (w) this.viewableWidth     = w;
     if (h) this.viewableHeight = h;
     this.reset();
};

//variables
this.content = o;
this.viewableWidth     = w;
this.viewableHeight = h;
this.totalWidth     = o.offsetWidth;
this.totalHeight = o.offsetHeight;
this.scrollTimer = null;
this.reset();
};

 

 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值