大神们，这个成效实现了，分全给你，不够的话还可以再商量-JavaSript-爱易网页

大神们，这个成效实现了，分全给你，不够的话还可以再商量

日期：2014-05-16　浏览次数：20372 次

大神们，这个效果实现了，分全给你，不够的话还可以再商量。

问题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/&g

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

大神们，这个成效实现了，分全给你，不够的话还可以再商量

相关资料更多>

推荐阅读更多>