<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>社区</title>
<meta http-equiv="X-UA-Compatible" content="edge,chrome=1" />
<meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 避免转码 -->
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="apple-itunes-app" content="app-id=932758491"> <!-- <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">--> <meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no" >
<meta name="apple-mobile-web-app-title" content="">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="screen-orientation" content="portrait"> <!-- uc强制竖屏 设置横屏应用得在config里面设置,网页是无法做到的 -->
<meta name="x5-orientation" content="portrait"> <!-- QQ强制竖屏 -->
<meta name="msapplication-tap-highlight" content="no"> <!-- windows phone 点击无高光 -->
<meta name="HandheldFriendly" content="true"> <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="wap-font-scale" content="no" /> </head> <style>
*{ margin: 0; padding: 0;}
ul,li{ list-style: none;} /*scene*/
.scenewp { position: relative; overflow: hidden; zoom: 1; }
.scnitem { position: relative; width: 1200px; height: 990px; margin: 0 auto;; }
.scnitem .img_scn { position: absolute; top: 0; left: 50%; width: 1920px; margin-left: -960px; overflow: hidden; }
.scnitem .img_scn img { display: block; width: 100%; -webkit-transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition:-webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition:-webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition:transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); } </style>
<body > <div class="scenewp">
<div class="scnitem scnitem_1">
<div class="img_scn">
<img src="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_01.jpg" data-original="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_01.jpg" alt="场景一" style="display: block; transform: translateY(-8.24545%);">
</div> </div> <div class="scnitem scnitem_2">
<div class="img_scn">
<img src="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_02.jpg?version=20161110" data-original="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_02.jpg?version=20161110" alt="场景二" style="transform: translateY(-1.98922%); display: block;">
</div> </div> <div class="scnitem scnitem_3">
<div class="img_scn">
<img src="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_03.jpg" alt="场景三">
</div> </div> <div class="scnitem scnitem_0">
<div class="img_scn">
<img src="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_00.jpg" alt="直播">
</div> </div> </div> <script src="http://m.lrlz.com/h5/fcj/js/jquery-2-0-3.js"></script>
<script>
// parallax 视差滚动
function Parallax(opt) {
this.$ele = $(opt.ele);
this.target = opt.target;
this.distance = opt.distance || 9; //可滚动距离百分比 9代码9%
} Parallax.prototype.scroll = function() {
var that = this; var _scrolltop = $(document).scrollTop(); for(var i = 0, len = that.$ele.length; i < len; i += 1) {
var $cur = $(that.$ele[i]),
_winheight = $(window).height(),
_pagetop = $cur.offset().top,
_diff = _winheight - (_pagetop - _scrolltop),
_pageheight = $cur.height(); if(_diff >= 0 && _diff < _pageheight) {
var val = _diff / _pageheight * this.distance;
$cur.find(that.target).css({
'-webkit-transform': 'translateY(' + -val + '%)',
'transform': 'translateY(' + -val + '%)'
});
}
} }; var parallax = new Parallax({
ele: '.scnitem',
target: '.img_scn img',
distance: 9
}); $(window).scroll(function() {
parallax.scroll();
}); //翻页滚动
function Slider(opt) {
this.$ele = $(opt.ele);
this.liminal = opt.liminal || 160; //阈值
this.time = opt.time || 100;
this.isScroll = false;
this.exScrolltop = 0;
}
Slider.prototype.scroll = function() {
var that = this; var _scrolltop = $(document).scrollTop(),
_pagetop = $(that.$ele[0]).offset().top,
_pageheight = $(that.$ele[0]).height(),
_winheight = $(window).height(),
_diff = _winheight - (_pagetop - _scrolltop); var index = Math.floor(_diff / _pageheight),
diff = _diff % _pageheight,
forward = false,
liminal = that.liminal; if(_scrolltop > that.exScrolltop) {
forward = true;
that.exScrolltop = _scrolltop;
}
else {
forward = false;
that.exScrolltop = _scrolltop;
} if(index == 0) {
liminal = _pageheight / 2;
}
else {
liminal = that.liminal;
}
if(index >= 0 && index < that.$ele.length && !that.isScroll && forward && diff > liminal && diff < _pageheight / 4 * 3) {
that.isScroll = true;
$('html,body').animate(
{scrollTop: $(that.$ele[index]).offset().top + 'px'},
{
duration: that.time,
complete: function() { that.isScroll = false; }
}
); }
} // var slider = new Slider({
// ele: '.scnitem',
// liminal: 160,
// time: 800 // }) </script> </body>
</html>

  

js 视差滚动 记录备份的更多相关文章

  1. stellar.js 视差滚动

    1.引入包 <script src="js/jquery.min.js"></script> <script src="js/jquery. ...

  2. Sequence.js 实现带有视差滚动特效的图片滑块

    Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...

  3. 分享七款视差滚动效果的jQuery 插件

    视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...

  4. 16个最棒的jQuery视差滚动效果教程

    今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...

  5. 视差滚动(Parallax Scrolling)效果的原理与实现

    视差滚动(Parallax Scrolling)效果的原理与实现1.视差滚动效果的主要特点:    1)直观的设计,快速的响应速度,更合适运用于单页面    2)差异滚动 分层视差    页面上很多的 ...

  6. 【转】视差滚动(Parallax Scrolling)效果的原理和实现

    原文:http://www.cnblogs.com/JoannaQ/archive/2013/02/08/2909111.html 视差滚动(Parallax Scrolling)是指让多层背景以不同 ...

  7. iOS开发之视差滚动视图

    首先声明一点,由于自己iOS开发经验有限,这里给下面将要实现的效果起名叫视差滚动视图,自己也不知道是否严谨,等以后有经验了,再来更新吧. 一.需求 有的时候我们可能会有这样一种需求,在一个UITabl ...

  8. css实现视差滚动效果

    今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使 ...

  9. 视差滚动(Parallax Scrolling)插件补充

    13. Windows Windows (github) 是一个让你用占据整个屏幕的section来构建单面网站的插件.该插件提供给你一些回调函数,当新的section出现在可视区并且并且处理快照时被 ...

随机推荐

  1. Proxy

    Proxy: Script: http://apgutmg01:8080/array.dll?Get.Routing.Script Server: apgutmg01 Port: 8080

  2. [CentOS] 打造vim环境

    安装vim yum install vim-enhanced 安装git rpm -Uvh http://mirrors.ustc.edu.cn/fedora/epel/6/x86_64/epel-r ...

  3. iconv 文件编码相互转换

    iconv 文件编码相互转换 示例: iconv -f utf-8 -t gbk ~/a.txt > ~/b.txt -f 从哪种格式转换 -t 要转换到哪种格式 a.txt要转换的文件 b.t ...

  4. JAVA线程池简介

    一 简介 线程的使用在java中占有极其重要的地位,在jdk1.4极其之前的jdk版本中,关于线程池的使用是极其简陋的.在jdk1.5之后这一情况有了很大的改观.Jdk1.5之后加入了java.uti ...

  5. MySQL查询缓存详解

    一:缓存条件,原理 MySQL Query Cache是用来缓存我们所执行的SELECT语句以及该语句的结果集,MySql在实现Query Cache的具体技术细节上类似典型的KV存储,就是将SELE ...

  6. python——快速找出两个电子表中数据的差异

    最近刚接触python,找点小任务来练练手,希望自己在实践中不断的锻炼自己解决问题的能力. 公司里会有这样的场景:有一张电子表格的内容由两三个部门或者更多的部门用到,这些员工会在维护这些表格中不定期的 ...

  7. Java基础14:离开IDE,使用java和javac构建项目

    更多内容请关注微信公众号[Java技术江湖] 这是一位阿里 Java 工程师的技术小站,作者黄小斜,专注 Java 相关技术:SSM.SpringBoot.MySQL.分布式.中间件.集群.Linux ...

  8. Javascript学习--BOM操作

    1 获取UA(user Agent)用户代理 <!DOCtype html> <html> <head> <title></title> & ...

  9. BZOJ2839集合计数

    题目描述 一个有N个元素的集合有2^N个不同子集(包含空集),现在要在这2^N个集合中取出若干集合(至少一个),使得 它们的交集的元素个数为K,求取法的方案数,答案模1000000007.(是质数喔~ ...

  10. 本地资源_Asset

    数据 using System.Collections.Generic; using UnityEngine; public enum Enum_Test { A, B, C, } [System.S ...