jquery视差推荐nikebetterworld视差平滑滚动效果.doc

jquery视差推荐：nikebetterworld视差平滑滚动效果[转]?? 让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。这就是视差滚动技术，作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。上次，我创建了一个jQuery的垂直视差演示，操纵CSS在不同的速度，相对的移动滚动条移动多个背景。 著名的耐克公司Nikebetterworld就是采用这样技术实现的；今天采用jquery视差脚本，重新建立一个类似Nikebetterworld网页,效果演示 Demo? 先来看看这样效果在网站当中的运用 ?Dennis Kleine 32.?Maid Stone Driving Lessons ?Benjamin Chirlin Sockho ?Farm House Fare ?HTML代码 script type=text/javascript src=/ajax/libs/jquery/1.4.4/jquery.min.js/script script type=text/javascript src=/mity_rui@126/blog/scripts/nbw-parallax.js/script script type=text/javascript src=/mity_rui@126/blog/scripts/jquery.localscroll-1.2.7-min.js/script script type=text/javascript src=/mity_rui@126/blog/scripts/jquery.scrollTo-1.4.2-min.js/script script type=text/javascript src=/mity_rui@126/blog/scripts/jquery.inview.js/script script type=text/javascript $(document).ready(function(){ $(#nav).localScroll(); }) /script 要达到我们想要的效果，需要使用的脚本文件是: jQuery 1.4.4 jQuery localscroll?(文章之间顺差滚动插件) jQuery scrollTo?(最主要的平滑滚动) jQuery Inview?(判断一篇文章是否在浏览) 页面包含6个部分，头部 ，尾部，然后分别定义4个DIV放置滚动的文章，在页面的右边创建一个无序的ul列表，他不会移动，通过它来控制文章的上下移动，效果图 右边UL代码如下 1 ul id=nav 2 lia href=/mity_rui@126/blog/#intro title=Next Sectionimg src=/mity_rui@126/blog/images/dot.png alt=Link //a/li 3 lia href=/mity_rui@126/blog/#second title=Next Sectionimg src=/mity_rui@126/blog/images/dot.png alt=Link //a/li 4 lia href=/mity_rui@126/blog/#third title=Next Sectionimg src=/mity_rui@126/blog/images/dot.png alt=Link //a/li 5 lia href=/mity_rui@126/blog/#fourth title=Next Sectionimg src=/mity_rui@126/blog/images/dot.png alt=Link //a/li 6 lia href=/mity_rui@126/blog/#fifth title=Next Sectionimg src=/mity_rui@126/blog/images/dot.png alt=Link //a/li 7 /ul 这些li元素创建了锚链接，当用户点击的时候链接到节点，这里并没有使用jquery，所以点击的时候速度会很快，给用户的体验不好，所以这里需要实现平滑滚动(稍候再说)，来展示我们的视觉效果； div id=intro div Article content here /div !--.story-- /div !--#intro-- 这段代码是正文部分，我们的内容就放在这里面，其他的只需要吧div id=intro换掉就可以 部分页面效果如下 Demo? The CSS 1 #intro{ 2 background:url(images/