读书人
栏目▼

大神们这个成效实现了分全给你不

发布时间： 2012-06-20 20:37:21 作者： rapoo

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

问题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/> 
 
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/>
aasdasd
<br/>
aasdasd
<br/>
<br/>
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
aasdasd
<br/>
<br/>
<br/>
aasdasd
aasdasd
aasdasd
aasdasd
aasdasd
<br/>
<a id="backtop">回到顶部</a>
</body>
</html>
<script type="text/javascript">
   jQuery.extend(jQuery.easing,
{
   easeOutBounce: function (x, t, b, c, d) {
       if ((t /= d) < (1 / 2.75)) {
           return c * (7.5625 * t * t) + b;
       } else if (t < (2 / 2.75)) {
           return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
       } else if (t < (2.5 / 2.75)) {
           return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
       } else {
           return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
       }
   }
});
//---scrollTo----//
(function (d) { var k = d.scrollTo = function (a, i, e) { d(window).scrollTo(a, i, e) }; k.defaults = { axis: 'xy', duration: parseFloat(d.fn.jquery) >= 1.3 ? 0 : 1 }; k.window = function (a) { return d(window)._scrollable() }; d.fn._scrollable = function () { return this.map(function () { var a = this, i = !a.nodeName || d.inArray(a.nodeName.toLowerCase(), ['iframe', '#document', 'html', 'body']) != -1; if (!i) return a; var e = (a.contentWindow || a).document || a.ownerDocument || a; return d.browser.safari || e.compatMode == 'BackCompat' ? e.body : e.documentElement }) }; d.fn.scrollTo = function (n, j, b) { if (typeof j == 'object') { b = j; j = 0 } if (typeof b == 'function') b = { onAfter: b }; if (n == 'max') n = 9e9; b = d.extend({}, k.defaults, b); j = j || b.speed || b.duration; b.queue = b.queue && b.axis.length > 1; if (b.queue) j /= 2; b.offset = p(b.offset); b.over = p(b.over); return this._scrollable().each(function () { var q = this, r = d(q), f = n, s, g = {}, u = r.is('html,body'); switch (typeof f) { case 'number': case 'string': if (/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)) { f = p(f); break } f = d(f, this); case 'object': if (f.is || f.style) s = (f = d(f)).offset() } d.each(b.axis.split(''), function (a, i) { var e = i == 'x' ? 'Left' : 'Top', h = e.toLowerCase(), c = 'scroll' + e, l = q[c], m = k.max(q, i); if (s) { g[c] = s[h] + (u ? 0 : l - r.offset()[h]); if (b.margin) { g[c] -= parseInt(f.css('margin' + e)) || 0; g[c] -= parseInt(f.css('border' + e + 'Width')) || 0 } g[c] += b.offset[h] || 0; if (b.over[h]) g[c] += f[i == 'x' ? 'width' : 'height']() * b.over[h] } else { var o = f[h]; g[c] = o.slice && o.slice(-1) == '%' ? parseFloat(o) / 100 * m : o } if (/^\d+$/.test(g[c])) g[c] = g[c] <= 0 ? 0 : Math.min(g[c], m); if (!a && b.queue) { if (l != g[c]) t(b.onAfterFirst); delete g[c] } }); t(b.onAfter); function t(a) { r.animate(g, j, b.easing, a && function () { a.call(this, n, b) }) } }).end() }; k.max = function (a, i) { var e = i == 'x' ? 'Width' : 'Height', h = 'scroll' + e; if (!d(a).is('html,body')) return a[h] - d(a)[e.toLowerCase()](); var c = 'client' + e, l = a.ownerDocument.documentElement, m = a.ownerDocument.body; return Math.max(l[h], m[h]) - Math.min(l[c], m[c]) }; function p(a) { return typeof a == 'object' ? a : { top: a, left: a} } })(jQuery);

   jQuery(function ($) {
       $('#backtop').click(function () {
           $.scrollTo(0, 2500, { easing: 'easeOutBounce' });
           return false; 
 
       });
   });
</script>



[解决办法]
这个也挺简单的，就是个tween弹簧效果，给你个简单版的。
HTML code
<!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>test</title>        <script>        function easeOut(t,b,c,d){            if ((t/=d) < (1/2.75)) {return c*(7.5625*t*t) + b;}            else if (t < (2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;}            else if (t < (2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;}            else {return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;}        }            function toTop(){                var sTop=document.documentElement.scrollTop;                var t=0;b=sTop,c=(0-sTop),d=100;                var interval=setInterval(                    function(){                        t++;                        document.documentElement.scrollTop=Math.ceil(easeOut(t,b,c,d));                        if(t>=d) clearInterval(interval);                    },10                );            }        </script>    </head>    <body>        <div style="width:960px;height:2000px;border:solid 1px green;margin:0 auto;">            <div style="margin-top:200px;height:50px;background:orange;"></div>        </div>        <div id="d_top" style="width:20px;height;50px;border:solid 1px red;position: absolute;right:10px;cursor: pointer;" onclick="toTop()">            回顶部        </div>    </body></html>
读书人网 >JavaScript

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net