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


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

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

在线预览

页面视差滚动切换jquery.localscroll插件2015-01-17-jquery-page.rar

实现的代码。

html代码:

  1. <div class="pageWidth" id="box_root">
  2.         <!-- 头部导航开始 -->
  3.         <div id="nav">
  4.             <a href="index.html" title="返回引导页" class="logo_a">站长素材</a>
  5.             <ul id="menu">
  6.                 <li class="" id="mn_home"><a href="index.html#home">网站首页</a> </li>
  7.                 <li id="mn_about" class="selected"><a href="index.html#about">站长素材</a> </li>
  8.                 <li id="mn_news"><a href="index.html#news">新闻资讯</a> </li>
  9.                 <li id="mn_products" class=""><a href="index.html#products">核心项目</a> </li>
  10.                 <li id="mn_chanye" class=""><a href="index.html#sector">产业板块</a> </li>
  11.                 <li id="mn_about" class=""><a href="index.html#famous">名家寄语</a> </li>
  12.                 <li class="last" id="mn_contact"><a href="index.html#contact">联系我们</a> </li>
  13.             </ul>
  14.         </div>
  15.         <div class="top_rim">
  16.             <a href="index.html#home">回到顶部</a>
  17.         </div>
  18.         <!-- 头部导航结束 -->
  19.         <div id="box_main">
  20.             <div id="home" style="background-position: 50% -110px;">
  21.                 <div class="sprite1" style="background-position: 50% 550px;">
  22.                 </div>
  23.                 <div class="sprite" style="background-position: 50% 0px;">
  24.                 </div>
  25.                 <div class="screen">
  26.                 </div>
  27.             </div>
  28.             <div id="about" style="background-position: 50% -110px;">
  29.                 <div class="contents">
  30.                     <div class="about_rim">
  31.                         <div class="columnSpace" id="elem-FrontSpecifies_show01-13**89271850" name="说明页">
  32.                             <!-- 装饰器样式开始 -->
  33.                             <div class="border_05">
  34.                                 <div class="border_05-topr">
  35.                                     <div class="border_05-topl">
标签: backgroundposition

更多 background 相关资讯

一款jquery和css3实现的卡通人物动画特效

一款jquery和css3实现的卡通人物动画特效

之前为大家分享了很多jquery和css3的动画实例。今天给大家带来一款非常炫的jquery和css3实现的卡通人物动画特效。效果图如下:在线预览 源码下载实现的代码。html

一款基于jquery和css3的头像恶搞特效

一款基于jquery和css3的头像恶搞特效

今天给大家分享一款基于jquery和css3的头像恶搞特效。这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子。效果图如下:在线

jquery实现的个人中心导航菜单

jquery实现的个人中心导航菜单

这是一款由jquery开发的导航菜单。适合放在门户网站的个人用户中心后台。效果和美观都非常不错。我们先一起看看效果图: 在线预览 源码下载 一起看下实现的代码:

炫酷霸气的HTML5/jQuery应用及源码

炫酷霸气的HTML5/jQuery应用及源码

也许在5年前,HTML5还是一种很前卫的技术,大家还只是将它当做实验来看待,更别说产品应用了。但是现在HTML5已经非常流行,无论从PC端还是移动端,HTML5都扮演着非常重要的角色。今天

干货分享 超炫丽的HTML5/jQuery应用及代码

干货分享 超炫丽的HTML5/jQuery应用及代码

今天我们要来分享一些HTML5干货,对于前段开发者来说,这些HTML5应用和jQuery插件将会让你的项目更加生动和炫丽,至少在UI设计方面,或多或少会带给你一点设计灵感,赶紧收藏和分享吧

jQuery模拟百度新闻不间断滚动效果

jQuery模拟百度新闻不间断滚动效果

一、jQuery.roll 插件使用说明 jQuery.roll 是模拟百度新闻不间断滚动效果,并支持文字、图片水平垂直滚动,该函数使用方法为: /* * @作者 华子yjh http://www.cnblogs.com/yan

HTML5的音频和JQUERY的全屏幻灯片

在今天的教程中,我们将创建一个全屏的照片幻灯片来说明纽约图片系列。 我们将增加对HTML5的音频元素的声音,为了给生活画廊,并尝试重建这个充满活力的城市环境。 在今天的教

HTML5 CSS3 jQuery制作视频播放器完全指南

导读:毫无疑问HTML5已经是大势所趋,知名视频网站YouTube在两年前就开始推广HTML5播放器来代替Flash。虽然国内还没有完全普及HTML5浏览器,但在各大本土浏览器厂商的努力

jQuery插件实现css3效果

jQuery插件实现css3效果

css3可以轻松实现很多譬如图片边框、多重背景、文字阴影等效果,但是目前支持css3的浏览器少之又少,往往了实现圆角效果要去写一堆代码,下面介绍的这些强大的jQuery插件可以轻松

更多 position 相关资讯

一款jquery和css3实现的卡通人物动画特效

一款jquery和css3实现的卡通人物动画特效

之前为大家分享了很多jquery和css3的动画实例。今天给大家带来一款非常炫的jquery和css3实现的卡通人物动画特效。效果图如下:在线预览 源码下载实现的代码。html

炫酷霸气的HTML5/jQuery应用及源码

炫酷霸气的HTML5/jQuery应用及源码

也许在5年前,HTML5还是一种很前卫的技术,大家还只是将它当做实验来看待,更别说产品应用了。但是现在HTML5已经非常流行,无论从PC端还是移动端,HTML5都扮演着非常重要的角色。今天

干货分享 超炫丽的HTML5/jQuery应用及代码

干货分享 超炫丽的HTML5/jQuery应用及代码

今天我们要来分享一些HTML5干货,对于前段开发者来说,这些HTML5应用和jQuery插件将会让你的项目更加生动和炫丽,至少在UI设计方面,或多或少会带给你一点设计灵感,赶紧收藏和分享吧

HTML5的音频和JQUERY的全屏幻灯片

在今天的教程中,我们将创建一个全屏的照片幻灯片来说明纽约图片系列。 我们将增加对HTML5的音频元素的声音,为了给生活画廊,并尝试重建这个充满活力的城市环境。 在今天的教

jQuery跟随屏幕滚动代码

jQuery跟随屏幕滚动代码

我们在很多网站看到,当我们滚动网页时,网页内的广告或某个小区域并不会消失,而是浮动在屏幕的某个地方,特别是一些局域广告。那么这是怎么实现的呢?本文将引用乌徒帮的跟随屏幕滚

HTML5 CSS3 jQuery制作视频播放器完全指南

导读:毫无疑问HTML5已经是大势所趋,知名视频网站YouTube在两年前就开始推广HTML5播放器来代替Flash。虽然国内还没有完全普及HTML5浏览器,但在各大本土浏览器厂商的努力