问题1:
大神们,去看看这个:http://imyuao.com/,这个网址的回到顶部的效果,有谁会的?
当点击top这张图片, 你看它的纵向滚动条的效果。 带有弹性的,大神,这个代码应该是JS实现的。
可是小弟才疏学浅,代码不会写,大神们,请求这种效果的源码,我看了下这个网站的代码,没看明白,然后百度也查了,只可惜
没找到,没这种效果,说句老实话。这种效果小弟第一次见,请大神们,写出这种效果的代码,然后测试成功后,把代码贴上来,
大家共同分享。
问题2:
大神,如果上面的效果没实现,那知道云飘动的JS代码,就是它网站那种云飘动的效果的。大神们,实现了其中任何一个。我分全
部给你。
急急急!!! 在此谢过了,大神们。
------解决方案--------------------
1.
最简单的返回顶部就是 window.scroll(0, 0)
参考 http://www.w3school.com.cn/htmldom/met_win_scrollto.asp
有滑动效果的就是 点击时 动态改变scrollTop的值,直到为0结束
有弹性效果的就是上面滑动效果的一种变形
楼主可以研究下
http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html
2
云飘的效果就是用了这个图片
http://imyuao.com/assets/snowpink/clouds.png
采用了传说中的css sprite,视情况改变top left,
比如
- HTML code
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312" /> <title></title> <style> div { margin:0 auto; width:800px; /*1320*/ height:513px; background:url(http://whoisleon.com/wp-content/themes/whoisleon/images/n_cloud1.jpg) repeat-x; } </style> </head> <body> <div id="test"></div> <script> var $ = function(id){ return document.getElementById(id); }; var obj = $('test'); var i = 0; setInterval(function(){ obj.style.backgroundPosition = (--i)+'px'; }, 30) </script> </body> </html>
------解决方案--------------------
楼主想要你说的网站那个效果?
我已经给你搞出来了,测试没问题测试代码如下,多给点分哈
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript" src="aaa.js"></script>
</head>
<body>
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
<br/>
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
<br/>
<br/>
aasdasd
aasdasd
aasdasd
aasdasd
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
<br/>
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
<br/>
<br/>
aasdasd
aasdasd
aasdasd
aasdasd
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
<br/>
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
<br/>
<br/>
aasdasd
aasdasd
aasdasd
aasdasd
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
<br/>
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
<br/>
<br/>
aasdasd
aasdasd
aasdasd
aasdasd
aasdasd
aasdasd
aasdasd
aasdasd
aasdasd
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>