今天给大家分享一款页面视差滚动切换jquery.localscroll插件。 滚动鼠标液动条看下页面的切换效果。该插件适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:

在线预览   源码下载

实现的代码。

html代码：

  <div class="pageWidth" id="box_root">

        <!-- 头部导航开始 -->

        <div id="nav">

            <a href="index.html" title="返回引导页" class="logo_a">站长素材</a>

            <ul id="menu">

                <li class="" id="mn_home"><a href="index.html#home">网站首页</a> </li>

                <li id="mn_about" class="selected"><a href="index.html#about">站长素材</a> </li>

                <li id="mn_news"><a href="index.html#news">新闻资讯</a> </li>

                <li id="mn_products" class=""><a href="index.html#products">核心项目</a> </li>

                <li id="mn_chanye" class=""><a href="index.html#sector">产业板块</a> </li>

                <li id="mn_about" class=""><a href="index.html#famous">名家寄语</a> </li>

                <li class="last" id="mn_contact"><a href="index.html#contact">联系我们</a> </li>

            </ul>

        </div>

        <div class="top_rim">

            <a href="index.html#home">回到顶部</a>

        </div>

        <!-- 头部导航结束 -->

        <div id="box_main">

            <div id="home" style="background-position: 50% -110px;">

                <div class="sprite1" style="background-position: 50% 550px;">

                </div>

                <div class="sprite" style="background-position: 50% 0px;">

                </div>

                <div class="screen">

                </div>

            </div>

            <div id="about" style="background-position: 50% -110px;">

                <div class="contents">

                    <div class="about_rim">

                        <div class="columnSpace" id="elem-FrontSpecifies_show01-1367889271850" name="说明页">

                            <!-- 装饰器样式开始 -->

                            <div class="border_05">

                                <div class="border_05-topr">

                                    <div class="border_05-topl">

                                    </div>

                                </div>

                                <div class="border_05-mid">

                                    <div class="borderContent">

                                        <div id="FrontSpecifies_show01-1367889271850" class="FrontSpecifies_show01-d3_c1">

                                            <div class="comptitle_05">

                                                <em><span class="extendLink"><a href="index.html#about_cont" target="_self">更多详情 +</a></span></em></div>

                                            <div class="describe htmledit">

                                                <div class="about_txt">

                                                </div>

                                            </div>

                                        </div>

                                        <div class="clearBoth">

                                        </div>

                                    </div>

                                </div>

                            </div>

                            <!-- 装饰器样式结束 -->

                        </div>

                    </div>

                </div>

                <div class="sprite" style="background-position: 50% 0px;">

                </div>

                <div class="screen" style="background-position: 50% 550px;">

                </div>

            </div>

            <div id="about_cont" style="background-position: 50% 0px;">

                <div class="contents">

                    <div class="about_rim">

                        <p>

                            关于我们</p>

                    </div>

                </div>

                <div class="sprite" style="background-position: 50% 0px;">

                </div>

                <div class="screen" style="background-position: 50% 550px;">

                </div>

                <div class="screen1" style="background-position: 50% 110px;">

                </div>

            </div>

            <div id="news" style="background-position: 50% -110px;">

                <div class="contents">

                    <div id="box_news">

                        <p>

                            新闻资讯</p>

                    </div>

                </div>

            </div>

            <div id="products" style="background-position: 50% -110px;">

                <div class="pro_list">

                    <p>

                        核心项目</p>

                </div>

                <div class="sprite" style="background-position: 50% 0px;">

                </div>

                <div class="screen" style="background-position: 50% 220px;">

                </div>

            </div>

            <div id="sector" style="background-position: 50% -110px;">

                <div class="contents">

                    <div class="sector_img">

                        <p>

                            产业模块</p>

                    </div>

                </div>

                <div class="screen" style="background-position: 50% 550px;">

                </div>

                <div class="sprite" style="background-position: 50% 0px;">

                </div>

            </div>

            <div id="famous" style="background-position: 50% -90px;">

                <div class="contents">

                    <div class="famous_rim">

                        <p>

                            名家寄语</p>

                    </div>

                </div>

                <div class="sprite" style="background-position: 50% 450px;">

                </div>

            </div>

            <div id="contact">

                <div class="contents">

                    <div id="box_contact">

                        <div class="columnSpace" id="elem-FrontSpecifies_show01-1368432548167" name="说明页">

                            <div id="FrontSpecifies_show01-1368432548167" class="FrontSpecifies_show01-d3_c1">

                                <div class="describe htmledit">

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="sprite" style="background-position: 50% 0px;">

                </div>

                <div class="screen">

                </div>

            </div>

        </div>

    </div>

via:http://www.w2bc.com/Article/17400

分享一款页面视差滚动切换jquery.localscroll插件的更多相关文章

  1. 一款可定制的外国jQuery图表插件jqplot

    jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图和柱状图.jqPlot支持为图表设置各种不同的样式.提供Tooltips,数据点高亮显示等功能. 用法: 1.引入jQuery类库和相 ...

  2. 分享10款功能强大的HTML5/CSS3应用插件

    1.纯CSS3美化Checkbox和Radiobox按钮 外观很时尚 利用CSS3我们可以打造非常具有个性化的用户表单,今天我们就利用CSS3美化Checkbox复选框和Radiobox单选框.CSS ...

  3. 分享9款最新超酷HTML5/CSS3应用插件

    新的一周开始了,小编继续要为大家分享实用超酷的HTML5应用,今天分享的这9款最新HTML5/CSS3应用你一定会很喜欢,一起来看看. 1.HTML5 Canvas模拟衣服撕扯动画 超级逼真 今天又要 ...

  4. 简易页面场景滚动的jquery插件

    (function($){ $.extend($.fn, { scene_scroll:function(arg_obj){ // 参数检测 // 场景数组 var $scene_arr = arg_ ...

  5. 介绍一款移动端滚动加载的插件---dropload

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 分享8款绚丽的HTML5/jQuery特效插件

    有几天没有分享前端资源了,今天要向大家分享15款非常给力的HTML5/jQuery特效插件,废话少说,一起来看看. 1.CSS3图片重力感应特效 很酷的一款CSS3模拟重力感应特效,你可以拖动图片来甩 ...

  7. 9款风格华丽的jQuery/CSS3插件

    今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧. 1.jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚 ...

  8. 分享22款响应式的 jQuery 图片滑块插件

    响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...

  9. 10款超酷实用的jQuery焦点图赏析及源码

    1.jquery整屏滚动插件Scrollify Scrollify是一个jQuery插件协助整屏滚动和顺利拍摄部分.完全可配置和优化. 在线演示 源码下载 2.jquery实现网易邮箱页面插件full ...

随机推荐

  1. 【VC】VC工具栏图标合并工具（非tbcreator和visual toolbar）

    VC开发难免会用到toolbar,在没有美工的时候,大部分时间我们只能自己上. 第一个方法:fireworks/photoshop平铺.现在的图片资源大多为背景透明的png图片,虽然fireworks ...

  2. SharePoint咨询师之路：备份和恢复系列--制定备份计划

    本来想研究下如何做数据库服务器的集群,然而突然被同事问起如何在部署SharePoint服务场的时候做备份和恢复的计划,就先来复习和研究一下. 本系列包括: 备份服务器场和配置 备份web和服务应用程序 ...

  3. python报错ordinal not in range(128)

    python编码问题:'ascii' codec can't decode byte 0xb0 in position 1: ordinal not in range(128) 这种问题有三种原因: ...

  4. Python下调用Linux的Shell命令

    有时候难免需要直接调用Shell命令来完成一些比较简单的操作,比如mount一个文件系统之类的.那么我们使用Python如何调用Linux的Shell命令?下面来介绍几种常用的方法: 1. os 模块 ...

  5. iOS的几种定时器

    //gcd的定时器timer必须先保存为一个属性或者成员变量 @property (nonatomic , assign) dispatch_source_t timer; //第一种 每一秒执行一次 ...

  6. fastreport for .net 数据邦定

    C# Code: private void button4_Click(object sender, EventArgs e){   //打印主从表数据    string file = Applic ...

  7. springmvc中forward和redirect

    一.跳转 import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; im ...

  8. 用java写一个web服务器

    一.超文本传输协议 Web服务器和浏览器通过HTTP协议在Internet上发送和接收消息.HTTP协议是一种请求-应答式的协议——客户端发送一个请求,服务器返回该请求的应答.HTTP协议使用可靠的T ...

  9. Remove a Driver Package from the Driver Store

    http://technet.microsoft.com/en-us/library/cc730875.aspx Determine the name of the driver package in ...

  10. SCCM 2012系列之新特性

    SCCM 2012站点类型: 站点 作用 相对于SCCM 2007 的变化 中心管理站点The central administration site(CAS) 中心管理站点协调内部站点的数据复制.使 ...