分享一款页面视差滚动切换jquery.localscroll插件

妖狐艹你老母 2022-08-05 16:20 153阅读 0赞

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

![201501170934281471.jpg][]

[在线预览][Link 1]   [源码下载][Link 2]

实现的代码。

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>

其他精彩文章 jQuery教程(29)-jQuery插件开发之为插件方法指定参数 jQuery教程(28)-jQuery插件开发之使用插件 jQuery教程(27)-jQueryajax操作之修改默认选项 jQuery教程(26)-ajax操作之使用JSONP加载远程数据
     
      
      
       jQuery教程(25)-ajax操作之安全限制
     
      更多关于android开发文章

[201501170934281471.jpg]: /images/20220806/03d7159e3c4f4488bbf716aa958453b2.png
[Link 1]: http://www.w2bc.com/demo/2015-01-17-jquery-page/index.html
[Link 2]: http://www.w2bc.com/article/17400

发表评论取消回复

表情：

评论列表（有 0 条评论，153人围观）

还没有评论，来说两句吧...

相关阅读

相关视差滚动_滚动上的视差声波动画

视差滚动 ![Sound Waves Parallax][] Scrolling animations are fun. They are fun to create an

红太狼/ 2023年02月22日 03:46/ 0 赞/ 1 阅读

相关 html5页面滚动视差效果特,34个网页视差滚动插件和视差特效教程分享

34个网页视差滚动插件和视差特效教程分享 Sponsor![10a45d2d0c23f68c6aa68c87bb9e706a.png][] 视差滚动这个设计趋势从去年开始一

小咪咪/ 2022年10月06日 04:46/ 0 赞/ 259 阅读

相关视差滚动Parallax

参考资料: 1.[https://www.youtube.com/watch?v=STwoa-9jxi0][https_www.youtube.com_watch_v_ST

怼烎@/ 2022年09月23日 13:52/ 0 赞/ 205 阅读

相关纯CSS视差滚动

参考旭哥的：[http://www.zhangxinxu.com/wordpress/2015/03/css-only-parallax-effect/][http_www.z

ゝ一世哀愁。/ 2022年09月23日 13:51/ 0 赞/ 260 阅读

相关分享一款页面视差滚动切换jquery.localscroll插件

今天给大家分享一款页面视差滚动切换jquery.localscroll插件。滚动鼠标液动条看下页面的切换效果。该插件适用浏览器：IE8、360、FireFox、Chrome、

妖狐艹你老母/ 2022年08月05日 16:20/ 0 赞/ 154 阅读

相关视差滚动

利用background-attachment属性实现视差滚动： background-attachment: scroll: 默认值。背景图像会随着页面其余部分

淩亂°似流年/ 2022年06月02日 05:19/ 0 赞/ 198 阅读

相关分享一款“暗黑系列”Idea主题插件Material Theme

偶然发现一款“暗黑系列”idea主题插件，感觉非常不错，分享一下~ github：[https://github.com/equinusocio/material-them

灰太狼/ 2022年05月21日 04:29/ 0 赞/ 198 阅读

相关 parallax插件视差效果实现

效果图： ![20181122113332713.gif][] 首先引入需要的文件，parallax依赖于jQuery，parallax下载地址[https://cdn.b

旧城等待，/ 2022年04月15日 05:44/ 0 赞/ 337 阅读

相关 stellar.js 视差滚动插件

视差滚动插件视差滚动（Parallax Scrolling）指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术主要核心就是前景和

「爱情、让人受尽委屈。」/ 2022年04月01日 15:23/ 0 赞/ 213 阅读

相关一款快速切换变量风格的idea插件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

红太狼/ 2022年01月21日 03:21/ 0 赞/ 278 阅读