js 视差滚动记录备份

<!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 视差滚动记录备份的更多相关文章

stellar.js 视差滚动
1.引入包 <script src="js/jquery.min.js"></script> <script src="js/jquery. ...
Sequence.js 实现带有视差滚动特效的图片滑块
Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...
分享七款视差滚动效果的jQuery 插件
视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...
16个最棒的jQuery视差滚动效果教程
今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...
视差滚动（Parallax Scrolling）效果的原理与实现
视差滚动(Parallax Scrolling)效果的原理与实现1.视差滚动效果的主要特点: 1)直观的设计,快速的响应速度,更合适运用于单页面 2)差异滚动分层视差页面上很多的 ...
【转】视差滚动(Parallax Scrolling)效果的原理和实现
原文:http://www.cnblogs.com/JoannaQ/archive/2013/02/08/2909111.html 视差滚动(Parallax Scrolling)是指让多层背景以不同 ...
iOS开发之视差滚动视图
首先声明一点,由于自己iOS开发经验有限,这里给下面将要实现的效果起名叫视差滚动视图,自己也不知道是否严谨,等以后有经验了,再来更新吧. 一.需求有的时候我们可能会有这样一种需求,在一个UITabl ...
css实现视差滚动效果
今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使 ...
视差滚动(Parallax Scrolling)插件补充
13. Windows Windows (github) 是一个让你用占据整个屏幕的section来构建单面网站的插件.该插件提供给你一些回调函数,当新的section出现在可视区并且并且处理快照时被 ...

随机推荐

NoSQL数据库技术实战-第1章 NoSQL的数据一致性传统关系型数据库的ACID
在看着章节的时候,我简单的回顾了一下关系型数据库的事务处理的ACID原则,其中原子性和持久性比较好理解.由于以前没有深入去研究.关于一致性和隔离性上我产生了疑问,在整理后分析如下: 一致性:书中所 ...
如何阻止<a>标签默认行为和表单提交
阻止<a>标签默认行为方式一 (通过return false) <!DOCTYPE html> <html> <head> <meta char ...
ubuntu NAT dhcp
说明: 1.在服务器版本中,没有想桌面版一样的NetworkManager工具,所以的一切都是在命令行上操作的. 2.本文只针对DHCP默认分配的IP进行查看. 方法: 1.如果要使用DHCP,那么需 ...
lnmp环境搭建（Ubuntu）
dpkg -l | grep gcc ubuntu系统查看已安装的包 dpkg -S nginx 查看安装的nginx apt-get update 首先更新 ...
Centos 7 安装 Xilinx SDSoC Development Environment
1.CentOS版本信息 $ cat /etc/redhat-releaseCentOS Linux release 7.6.1810 (Core) 2.SDSoC下载地址: https://www. ...
npm+cnpm+vuecli3打包相关
1,npm install和cnpm install时的不同 https://blog.csdn.net/csm0912/article/details/90264026 2,npm设置和查看仓库源 ...
微信小程序获得unionid
一.微信小程序中app.js中: wx.login({ success: res => { if(res.code){ var code = res.code; wx.getSetting({ ...
C++：#include和using namespace
https://blog.csdn.net/u013719339/article/details/80221899
JVM-GC算法（一）-标记清除算法
首先,我们得知道根搜索算法,它可以解决我们应该回收哪些对象的问题,但是它显然还不能承担垃圾搜集的重任,因为我们在程序(程序也就是指我们运行在JVM上的JAVA程序)运行期间如果想进行垃圾回收,就必须让 ...
flask 第六篇 flask内置的session
Flask中的Session非常的奇怪,他会将你的SessionID存放在客户端的Cookie中,使用起来也非常的奇怪 1. Flask 中 session 是需要 secret_key 的 from ...

js 视差滚动 记录备份

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

随机推荐

热门专题

js 视差滚动记录备份

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