重庆分公司

咨询热线：

028-86922220

关于我们

服务项目

小程序开发

案例展示

建站动态

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

jQuery中怎么实现视差滚动

本篇文章给大家分享的是有关jQuery中怎么实现视差滚动，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

在文昌等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都做网站、网站建设网站设计制作按需定制网站,公司网站建设,企业网站建设,品牌网站制作,成都全网营销推广,外贸营销网站建设,文昌网站建设费用合理。

1 – 创建基本的html

首先创建最基本的html文件架构，这个就不多说了，代码如下:

             Clouds demo                        Home
              Box 2
              Box 3
              Box 4

主页

Box 2 Box 3 Box 4

定义一个header的ID标记，然后下面有个四个导航，用于切换的

2 – 一些CSS代码

创建一个新的CSS文件，把它定义成layout.css

/*** Style Definitions ***/  html                { background:#67b2ff; font-family:Arial, Helvetica, sans-serif; }       /*** Header ***/  h1#logo                { background:url(../images/Logo.png) top left no-repeat; height:62px; width:481px;                           text-indent:-9999px; position:absolute; top:10px; left:10px; }       #menu                { float:right; position:absolute; top:20px; right:10px; z-index:10; }       #menu a                { background:#FFF; color:#67b2ff; border:#AAA 3px solid;  text-decoration:none; padding:10px;                           margin-right:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}       #menu a:hover        { background:#67b2ff; color:#FFF; border:#FFF 3px solid; text-decoration:none; padding:10px;                           margin-right:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}       #menu li            { float:left; }       /*** Body Content ***/  #wrapper    { width:100%; height:100%; position:absolute; top:0; left:0; overflow:hidden; }       #mask        { width:400%; height:100%; }       .box        { width:25%; height:100%; float:left; }       .content    { width:960px; height:400px; top:20%; margin: 0 auto; position:relative; background:rgba(255,255,255, 0.3);                   border-radius:35px; -moz-border-radius:35px; -webkit-border-radius:35px; }       .inner        { width:920px; height:360px; background:rgba(255, 255, 255, 0.3); border-radius:30px; -moz-border-radius:30px;                       -webkit-border-radius:30px; margin:5px; padding:15px; top:5px; position:relative; }

这些CSS代码相信你能看到吧，我简单解释一下，我们把需要滚动的区域放在id为wrapper的DIV内，无论他在那个地方一定要保证他滚动的固定性。id为mask的标记做为具体的滑动实现，他的宽度是100%，因为这里有4个区域需要全屏滚动，所以他的宽度设置为400。

我们想让每个方形盒子在屏幕的中间，所以给每个方形盒子定义一个li元素哦。然后定义CSS3 border-radius圆角和rgba背景颜色来创建一个半透明的漂亮边框圆角效果，到这里为止创建的效果如下所示。

jQuery中怎么实现视差滚动

第3步 - 使用jQuery来创建效果

上面基本的网站架构做好之后并没有使用javascript，现在我们开始使用jquery创建有趣的滚动效果，我们使用ScrollTo的jquery插件来达到我们想要的效果，首先引入jquery文件。

然后打开这个文件看到最基本的jquery语法。

$(document).ready(function() {            $('a.link').click(function () {                $('#wrapper').scrollTo($(this).attr('href'), 800);              return false;            });        });

就这么简单，看看这个代码做个什么。

1，确保整个页面加载之前运行脚本。

2 ，增加了点击监听所有标签。在这种情况下，这是我们的导航菜单中的所有链接，但我们可以添加“链接”类行为的任何页面上的链接。然后，我们指定一个动作，点击检测功能。

3 呼吁＃包装的div的scrollTo插件，并传递给它的目的地，并以毫秒为单位的时间来完成动画。

4取消点击浏览器的默认行为。

现在我们知道如何滚动一个特定的div的内容，让我们在头部背景增加自己的DIV内容

增加CSS效果代码

/*** Clouds ***/ .clouds        { width:100%; height:262px; overflow:hidden; }  #clouds-small    { width:3000px; height:100%; background:url(../images/bg-clouds-small.png) repeat-x;}  #cloud2        { position:relative; top:-262px; }  #clouds-big    { width:4000px; height:100%; background:url(../images/bg-clouds-big.png) repeat-x;}

上面的代码，我增加了尺寸和背景图片的div，全屏宽度，以适应滚动和定位，效果如下图

第4步 - 完成所有的动作

我们几乎完成了！之前，我使用了scrollTo插件来进行移动，我需要写一个小的辅助功能，将告诉它移动定位到那个DIV。将有4点，我们需要设置，

function setPosition(check, div, p1, p2, p3, p4) {       if(check==='#box1')           {               $(div).scrollTo(p1, 800);           }       else if(check==='#box2')           {               $(div).scrollTo(p2, 800);           }       else if(check==='#box3')           {               $(div).scrollTo(p3, 800);           }       else           {               $(div).scrollTo(p4, 800);           }   };

$(document).ready(function() {         $('a.link').click(function () {             $('#wrapper').scrollTo($(this).attr('href'), 800);           //add this line           setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px')           //end add this           return false;         });     });

到这里每个云将移动400个像素，看他们之间的差异像素大小

$(document).ready(function() {            $('a.link').click(function () {            $('#wrapper').scrollTo($(this).attr('href'), 800);          setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px')          //add this line          setPosition($(this).attr('href'), '#cloud2', '0px', '800px', '1600px', '2400px')          //end add this          return false;        });    });

添加后续的云div，注意这里的div设置成800个像素了，这点需要大家注意

$(document).ready(function() {         $('a.link').click(function () {             $('#wrapper').scrollTo($(this).attr('href'), 800);           setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px')           setPosition($(this).attr('href'), '#cloud2', '0px', '800px', '1600px', '2400px')           //add this           $('a.link').removeClass('selected');             $(this).addClass('selected');           //end add this           return false;         });     });

#menu a.selected {   background:#AAA;   color:#FFF;   border:#67b2ff 3px solid;   text-decoration:none;   padding:10px;  margin-right:10px;   border-radius:10px;   -moz-border-radius:10px;   -webkit-border-radius:10px;  }

以上就是jQuery中怎么实现视差滚动，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。

名称栏目：jQuery中怎么实现视差滚动
文章出自：http://cqcxhl.cn/article/gedhee.html