打印

再发个.鼠标控制对象滚动mScrollBox

mudoo [楼主]

经典木头

高级会员

帖子: 469
体力: 583
威望: 5
当前: 福建泉州

专长 网页设计,前端制作,JS

1^# 大中小发表于 2008-6-13 09:00

最近参考做的个小效果.算不上原创...一半..
可能用得上.就发上来.

鼠标移动控制对象滚动.
代码里面有用法.演示/.自己看吧.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mScrollBox</title>
<style type="text/css">

</style>
<script language="javascript" type="text/javascript">

</script>
<script language="javascript" type="text/javascript">

</script>
</head>
<body>
<div class="case">
	<div class="title"><a href="#" class="r">Top</a>mScrollBox&nbsp;调用方法</div>
	<div class="b">mScrollBox({ScrollFor, Mode, maxSpeed});</div>
	<ul class="info gray">
		<li><span class="key">ScrollFor：</span><span class="type">Object</span>滚动对象&nbsp;&nbsp;(*必须)</li>
		<li><span class="key">Mode：</span><span class="type">String</span>滚动模式&nbsp;-&nbsp;x:横向, y:纵向(默认)&nbsp;&nbsp;(*可选)</li>
		<li><span class="key">maxSpeed：</span><span class="type">Number</span>最大滚动步长&nbsp;-&nbsp;默认7&nbsp;&nbsp;(*可选)</li>
	</ul>
</div>
<div class="case">
	<div class="title"><a href="#" class="r">Top</a>mScrollBox&nbsp;演示&nbsp;-&nbsp;纵向滚动</div>
	<div id="testMSB1" class="itemList" style="border: solid 1px #EAEAEA; padding: 2em">
		<p>
		唐僧：啊啊！大家不要生气，生气会犯了嗔戒的！悟空你也太调皮了，我跟你说过，叫你不要乱扔东西， 乱扔东西这么做……   （咣当，悟空棍子掉在地上）   你看我还没有说完呢你把棍子又给扔掉了！月光宝盒是宝物，你把他扔掉会污染环境，唉，要是砸到小朋友那怎么办？就算没有砸到小朋友砸到那些花花草草也是不对的呀！<br />
		(黑夜，旷野)<br />
		观音：孙悟空，你这个畜牲，你本来答应如来佛祖护送你师傅唐三藏去取西经，你居然跟牛魔王串通要吃你师傅，你知不知道犯了弥天大罪？<br />
		孙悟空：少罗嗦！你追了我三天三夜，因为你是女人，我才不杀你，不要以为我怕了你了！<br />
		唐僧：悟空，你怎么可以这样跟观音姐姐讲话呢？<br />
		悟空：哗！不要吵！<br />
		唐僧：你又在吓我！<br />
		观音：你不是怕我,又为什么要打伤紫霞仙子,抢走她的月光宝盒呢？你不就是想躲开我吗。<br />
		悟空：既然躲不了，那老孙就跟你绝一死战！   (悟空将月光宝盒随手一抛，正好砸在唐僧头上。)<br />
		唐僧：又干什么？<br />
		悟空：嗯……   (准备动手)<br />
		唐僧：啊啊！大家不要生气，生气会犯了嗔戒的！悟空你也太调皮了，我跟你说过，叫你不要乱扔东西， 乱扔东西这么做……   （咣当，悟空棍子掉在地上）   你看我还没有说完呢你把棍子又给扔掉了！月光宝盒是宝物，你把他扔掉会污染环境，唉，要是砸到小朋友那怎么办？就算没有砸到小朋友砸到那些花花草草也是不对的呀！<br />
		(悟空一把抓住唐僧手中的月光宝盒)<br />
		唐僧：干什么？<br />
		悟空：放手！<br />
		唐僧：你想要啊？悟空，你要是想要的话你就说话嘛，你不说我怎么知道你想要呢，虽然你很有诚意地看着我，可是你还是要跟我说你想要的。你真的想要吗？那你就拿去吧！你不是真的想要吧？难道你真的想要吗？……<br />
		悟空：我Kao！   (悟空一拳将唐僧打倒。)<br />
		观音：啊？孙悟空！<br />
		悟空：大家看到啦？这个家伙没事就长篇大论婆婆妈妈叽叽歪歪，就好象整天有一只苍蝇，嗡……对不起，不是一只，是一堆苍蝇围着你，嗡…嗡…嗡…嗡…飞到你的耳朵里面，   救命啊！ (悟空倒地翻滚，异常痛苦。)<br />
		悟空：所以呢我就抓住苍蝇挤破它的肚皮把它的肠子扯出来再用它的肠子勒住他的脖子   用力一拉，呵－－！各位，整条舌头都伸出来啦！我再手起刀落哗－－！整个世界清净了。现在，大家明白了，为什么我要杀他！<br />
		观音：哼！悟空，你诸多借口，你根本就不想去取西经！<br />
		悟空：说那么多干什么，打呀！   (俩人开始斗法）<br />
		悟空：俺老孙有金刚不坏之身，十个观音我都不放在眼里。   (又一番斗法，观音将悟空收入甘露瓶。)<br />
		观音：今天我要替天行道！<br />
		唐僧：唉！徒弟有错做师傅的也有责任，求姐姐放他一条生路吧！<br />
		观音：我不消灭他我没法向玉皇大帝交代！<br />
		唐僧：请姐姐跟玉皇大帝说一声，贫僧愿意一命赔一命！(合十坐地，将法杖向空中一抛)喃呒阿弥陀佛！   (法杖将唐僧砸死。)<br />
	</div>
</div>
<div class="case">
	<div class="title"><a href="#" class="r">Top</a>mScrollBox&nbsp;演示&nbsp;-&nbsp;横向滚动</div>
	<div id="testMSB2" class="itemList2" style="border: solid 1px #EAEAEA; padding: 2em">
		悟空你也太调皮了，我跟你说过，叫你不要乱扔东西， 乱扔东西这么做…… （咣当，悟空棍子掉在地上） 你看我还没有说完呢你把棍子又给扔掉了！月光宝盒是宝物，你把他扔掉会污染环境，唉，要是砸到小朋友那怎么办？就算没有砸到小朋友砸到那些花花草草也是不对的呀！
	</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 mudoo 于 2008-6-13 17:17 编辑 ]

本帖最近评分记录

caiying2007 威望 +1 不错的原创一半 2008-6-19 14:40

TOP

西部数码分布式集群主机傲视群雄 | 韩国主机，快速稳定免备案，讯网科技

mudoo [楼主]

经典木头

高级会员

帖子: 469
体力: 583
威望: 5
当前: 福建泉州

专长 网页设计,前端制作,JS

2^# 大中小发表于 2008-6-13 12:04

呃.貌似鸡肋了...

TOP

PSD网页模板下载,高端实用 | 免费自助建站

geniuswe

中级会员

帖子: 99
体力: 211
威望: 4
当前: 福建厦门
离线: 57 天

3^# 大中小发表于 2008-6-13 12:24

创意不错

TOP

minssy

初级会员

帖子: 48
体力: 110
威望: 0
当前: 广东佛山
离线: 25 天

4^# 大中小发表于 2008-6-13 14:30

收````

TOP

tmulmt

墨墨无雨

银牌会员

帖子: 1715
体力: 1007
威望: 0
当前: 北京朝阳区

5^# 大中小发表于 2008-6-13 15:23

多谢楼主，收之。

不过，第二个是横向滚动的吧，我这里没反应，IE6。

TOP

mudoo [楼主]

经典木头

高级会员

帖子: 469
体力: 583
威望: 5
当前: 福建泉州

专长 网页设计,前端制作,JS

6^# 大中小发表于 2008-6-13 17:13

回复 tmulmt 在 5# 的帖子

嗷~~.IE6已经太容易让我忽视了.
IE7.FF一般就测试这俩个...

TOP

mudoo [楼主]

经典木头

高级会员

帖子: 469
体力: 583
威望: 5
当前: 福建泉州

专长 网页设计,前端制作,JS

7^# 大中小发表于 2008-6-13 17:17

解决了...样式问题而已.
IE6下要设置宽度~~`.

TOP

mudoo [楼主]

经典木头

高级会员

帖子: 469
体力: 583
威望: 5
当前: 福建泉州

专长 网页设计,前端制作,JS

8^# 大中小发表于 2008-6-13 17:28

貌似什么浏览器都支持的说...
都不用测试的~/嗯.不错~.~哈.

TOP

skybot

size

钻石会员

认证
帖子: 3158
体力: 7282
威望: 7
当前: 上海闵行
离线: 2 天

专长 JS,C#,MSSQL

9^# 大中小发表于 2008-6-13 20:17

哈,想法不錯

http://www.qlili.com 个人站帮点啊

TOP

bopooo

榕树下的落叶

中级会员

认证
帖子: 512
体力: 322
威望: 2
当前: 湖北武汉
离线: 1 天

专长 网页设计,前端制作,JS

10^# 大中小发表于 2008-6-13 22:18

效果不错和鼠标中键按住浏览网页的效果是一样的

TOP

copier

初级会员

帖子: 112
体力: 140
威望: 0
当前: 陕西西安
离线: 50 天

专长 网页设计,UI,PHP

11^# 大中小发表于 2008-9-25 18:52

非常经典~~

www.The2City.com

TOP

cloudgamer

天空里的一片云

版主

认证
帖子: 3890
体力: 7995
威望: 76
当前: 广东佛山

12^# 大中小发表于 2008-9-26 00:52

好东西

TOP

chenzhe

高级会员

帖子: 398
体力: 543
威望: 11
当前: 辽宁沈阳
离线: 385 天

专长 JS,C/C++,Python

13^# 大中小发表于 2008-11-8 11:59

引用:

原帖由 mudoo 于 2008-6-13 12:04 发表
呃.貌似鸡肋了...

怎么会鸡肋呢？好效果啊，有时间要看一下代码。感谢分享！

菜鸟吧

TOP

qxq864298

邪恶de小强

高级会员

认证
帖子: 966
体力: 730
威望: 0
当前: 北京海淀区
离线: 1 天

专长 前端制作,JS,PHP

14^# 大中小发表于 2008-11-8 12:48

嗯，不错啊，很好

TOP

menhin

高级会员

帖子: 330
体力: 636
威望: 0
离线: 14 天

专长 网页设计,UE

15^# 大中小发表于 2008-11-11 13:43

什么也不说,直接收下了!

TOP

第五只鼠

初级会员

帖子: 67
体力: 124
威望: 0
当前: 山东济南
离线: 2 天

专长 网页设计,前端制作,UE

16^# 大中小发表于 2008-11-11 14:43

在谷歌浏览器里
纵向滚动没反映
横向滚动还可以

TOP

methebest

初级会员

认证
帖子: 27
体力: 63
威望: 0
当前: 河南郑州
离线: 276 天

17^# 大中小发表于 2009-2-18 14:55

❀

TOP

mallard00

中级会员

帖子: 176
体力: 393
威望: 0
当前: 广东广州
离线: 9 天

专长 前端制作,JS

18^# 大中小发表于 2009-6-24 18:43

效果很好啊

TOP

cnfiowen

阿立

初级会员

帖子: 192
体力: 192
威望: 0
当前: 陕西西安
离线: 23 天

专长 前端制作

19^# 大中小发表于 2009-6-24 20:44

IE6横向不能滚

一天一问!

TOP

aobo711

新手上路

帖子: 272
体力: 41
威望: 0
当前: 浙江杭州
离线: 38 天

专长 前端制作,JS,JAVA

20^# 大中小发表于 2009-6-24 20:50

大话那段台词不错。。。

http://jsssc.cn

TOP