今天给大家分享一款页面视差滚动切换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. Mapreduce读取Hbase表,写数据到多个Hbase表中

    Job端的变化: 通过设置conf,配置输出表,在reduce中获取输出表名字 Configuration conf = job.getConfiguration(); //输出表1 conf.set ...

  2. 用pdo实现的织梦后台留言板

    <?php //ini_set("display_errors", "On"); include("data/common.inc.php&qu ...

  3. erlang代码片段

    转载自http://blog.csdn.net/sw2wolf/article/details/6797708 .列表操作 lists:foreach(fun(X) -> io:format(& ...

  4. Linux环境变量(小马哥推荐)

    /etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行. 并从/etc/profile.d目录的配置文件中搜集shell的设置. /etc/bashrc:为每一 ...

  5. RVM 安装&卸载

    安装: curl -L https://get.rvm.io | bash -s stable --autolibs=enabled [--ruby] [--rails] [—trace] $ cur ...

  6. poj 3299 Humidex

    直接套公式就可以,可我套公式第一遍都错了,英语差的孩子伤不起(┬_┬) #include <iostream> #include <cmath> #include <io ...

  7. 总结调用Flash的几种方法

    一.Adobe 提供的方法 <object width="200" height="200" classid="clsid:D27CDB6E-A ...

  8. EasyUI DataGrid 窗口大小自适用--------------未测试

    EasyUI 新版本里添加了 fit 属性,不需要老版本的那么复杂,重新load DataGrid.但是昨天用的时间发现只有一个DataGrid的时候用fit:true 很好使,但是如果有其它元素,如 ...

  9. 通过Microsoft Azure服务设计网络架构的经验分享(转)

    原文:http://www.infoq.com/cn/articles/azure-networking-tips 本文从产品设计和架构角度分享了 Microsoft Azure 网络服务方面的使用经 ...

  10. OperateParticleWithCodes

    [OperateParticleWithCodes] Listing 6-6 shows how you might configure an emitter’s scale property. Th ...