分享一款页面视差滚动切换jquery.localscroll插件
今天给大家分享一款页面视差滚动切换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插件的更多相关文章
- 一款可定制的外国jQuery图表插件jqplot
jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图和柱状图.jqPlot支持为图表设置各种不同的样式.提供Tooltips,数据点高亮显示等功能. 用法: 1.引入jQuery类库和相 ...
- 分享10款功能强大的HTML5/CSS3应用插件
1.纯CSS3美化Checkbox和Radiobox按钮 外观很时尚 利用CSS3我们可以打造非常具有个性化的用户表单,今天我们就利用CSS3美化Checkbox复选框和Radiobox单选框.CSS ...
- 分享9款最新超酷HTML5/CSS3应用插件
新的一周开始了,小编继续要为大家分享实用超酷的HTML5应用,今天分享的这9款最新HTML5/CSS3应用你一定会很喜欢,一起来看看. 1.HTML5 Canvas模拟衣服撕扯动画 超级逼真 今天又要 ...
- 简易页面场景滚动的jquery插件
(function($){ $.extend($.fn, { scene_scroll:function(arg_obj){ // 参数检测 // 场景数组 var $scene_arr = arg_ ...
- 介绍一款移动端滚动加载的插件---dropload
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 分享8款绚丽的HTML5/jQuery特效插件
有几天没有分享前端资源了,今天要向大家分享15款非常给力的HTML5/jQuery特效插件,废话少说,一起来看看. 1.CSS3图片重力感应特效 很酷的一款CSS3模拟重力感应特效,你可以拖动图片来甩 ...
- 9款风格华丽的jQuery/CSS3插件
今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧. 1.jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚 ...
- 分享22款响应式的 jQuery 图片滑块插件
响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...
- 10款超酷实用的jQuery焦点图赏析及源码
1.jquery整屏滚动插件Scrollify Scrollify是一个jQuery插件协助整屏滚动和顺利拍摄部分.完全可配置和优化. 在线演示 源码下载 2.jquery实现网易邮箱页面插件full ...
随机推荐
- C# 必应代码搜索
微软宣布推出必应代码搜索服务,暂时只支持 C# 语言,日后将支持更多代码语言. Visual Studio 用户安装必应搜索插件之后可使用该服务来简化编程任务.Visual Studio 与 MSDN ...
- Numpy矩阵取列向量
>>> A=matrix("1 2;3 4") >>> A matrix([[1, 2], [3, 4]]) >>> A[:, ...
- NServiceBus-进阶
下载 在本教程中我们将创建一个非常简单的订购系统,将从客户机向服务器发送消息.订单系统包括三个项目:客户端.服务器和消息,来完成这个任务,我们将执行以下步骤: 创建客户端项目 创建项目的消息 创建服务 ...
- poj 1005 I Think I Need a Houseboat
#include <iostream> using namespace std; const double pi = 3.1415926535; int main() { ;; doubl ...
- 全面理解Linux输入输出重定向
全面理解Linux输入输出重定向 本教程通过视频方式讲解shell操作,理解感念,教程通俗易懂,比起看一大堆文档要舒服的多.本次教程主要讲解 Linux Shell 中支持输入输出重定向,用符号&l ...
- 60分钟内从零起步驾驭Hive实战学习笔记
本博文的主要内容是: 1. Hive本质解析 2. Hive安装实战 3. 使用Hive操作搜索引擎数据实战 SparkSQL前身是Shark,Shark强烈依赖于Hive.Spark原来没有做SQL ...
- 使用DNSPod来处理网站的均衡负载(转)
add by zhj:配置倒是蛮简单的,其实就是把域名与多个IP进行关联,在数据库中实现这个应该也是蛮简单的. 原文:http://kb.cnblogs.com/page/75571/ 首先介绍下DN ...
- oracle关键字使用
v_Describe:=substr(v_Describe,0,length(v_Describe)-1); substr(目标内容,开始位置,截取长度) length(要计算的内容长度) 上述语句可 ...
- test是否被执行?
procedure TForm2.Button1Click(Sender: TObject); function test(value:boolean):boolean; begin res ...
- HTML第三天学习笔记
昨天学的超链接,今天深入学习了下,发现了更多的知识点,而且关于初始新建网页时,由于是初学者,所以还是纯手写代码~ <html> <head> <title>超链接& ...