学习随笔——2.仿苹果官网效果,滚动缩放图片

这是一篇差点把自己搞死的随笔
苹果官网的样式:https://www.apple.com/cn/macos/catalina-preview/
参考的代码:http://sc.chinaz.com/jiaoben/150729439860.htm

虽然找到了类似的代码,但是看了后发现很多值都不知道他是怎么算的,resize的时候也会有问题。
于是自己重新计算修改了,下面详细说一下。

1.目录结构
在这里插入图片描述

2.index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
		 <meta name="viewport" content="user-scalable=0">
		<title>图片缩放示例</title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/common.css" />
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
	</head>

	<body>
		<div class="banner">
			<div class="box">
				<div class="undertitle">滚动鼠标,图片缩放示例</div>
				<div class="bgbox">
					<div class="bigImg">
						<div class="smallimgBox">
							<div class="smallimg"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="bannertitle">滚动前的文字</div>
		</div>
		<div style="height: 300px;background: #333333;"></div>
	</body>

</html>
  1. common.css
    注意:undertitle的高度需要加上在js中设置的scroll_length,以便滚动完成后仍暂较为合适的地方展示
body{
	overflow-x: hidden;
}
.banner{
	position: relative;
	height: 1880px;
	overflow: hidden;
	min-width: 750px;
}
.box{
	width: 100%;
	height: auto;
	position: absolute;
}
.undertitle{
	width: 100%;
	height: 650px;
	font-size:46px;
	font-weight: bold;
	text-align: center;
	padding-top: 450px;
	margin: 0 auto;
	box-sizing: border-box;
	
}
.bgbox{
	width: 736px;
	height: 430px;
	margin:0 auto;
	background: url(../img/a1.jpg) no-repeat;
	background-size: contain;
	-moz-transition:-moz-transform .1s linear;
	-webkit-transition:-webkit-transform .2s linear;
	box-sizing: border-box;
	transform-origin: center center;
	position: relative;
}
.bigImg{
	width: 562px;
	height: 352px;
	margin:0 auto;
	background: url(../img/a2.jpg) no-repeat;
	background-size: cover;
	position: relative;
	top: 30px;
}
.smallimgBox{
	width: 100%;
	height: 100%;
}
.smallimg{
	width: 100%;
	height: 100%;
	background: url(../img/a3.jpg) no-repeat;
	background-size: cover;
}
.bannertitle{
	position: absolute;
	top:200px;
	left: 0;
	right: 0;
	margin: 0 auto;
	font-size:86px;
	font-weight: bold;
	text-align: center;
	color: #fff;
	-moz-transition:.1s linear;
	-webkit-transition:.2s linear;
}



.footer{
	background: #333;
	height: 200px;
}

  1. 划重点,js
    代码中内核判断,处理兼容其实并没怎么用到,但我感觉挺全面,就流下来了,以备以后使用。
    首先先来说放大图片:
    1)因为不想图片拉伸变形,所以对最大放大倍数(scale_big)进行了判断。
    2)移动过程中的放大倍数(scale_num)的计算公式如下:
    在这里插入图片描述
    至此,放大的问题就解决了
    接下来,问题就是移动了:
    移动主要需要理清的就是放大元素的中心到底移动了多少
    1)找到未滚动(图最大)时的中心位置
    在这里插入图片描述
    此时 var t_h_b = phone_min_h * scale_big / 2 - 30 * scale_big; 其中30为图和电脑框之间的最小间距(css中写的值)
    2)找到滚动完成(图最小)时的中心位置
    在这里插入图片描述
    即 var t_h_s = $(".undertitle").innerHeight() + phone_min_h / 2; 因为此时图距离整个页面的顶部的距离是 $(".undertitle").innerHeight() 。

3)中心点移动的最大距离就是 var t_h = t_h_s - t_h_b;

4)移动过程中的中心点的移动距离(translate_num )的计算公式如下:
在这里插入图片描述
最后透明度变化,当然也可以加其他的

啊,对然后处理一下屏幕resize

$(document).ready(function() {
	/* 安卓版本兼容 */
	var brower = {
		versions: function() {
			var u = window.navigator.userAgent;
			var num;
			if(u.indexOf('Trident') > -1) {
				//IE
				return "IE";
			} else if(u.indexOf('Presto') > -1) {
				//opera
				return "Opera";
			} else if(u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1) {
				//firefox
				return "Firefox";
			} else if(u.indexOf('AppleWebKit' && u.indexOf('Safari') > -1) > -1) {
				//苹果、谷歌内核
				if(u.indexOf('Chrome') > -1) {
					//chrome
					return "Chrome";
				} else if(u.indexOf('OPR')) {
					//webkit Opera
					return "Opera_webkit"
				} else {
					//Safari
					return "Safari";
				}
			} else if(u.indexOf('Mobile') > -1) {
				//移动端
				if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
					//ios
					if(u.indexOf('iPhone') > -1) {
						//iphone
						return "iPhone"
					} else if(u.indexOf('iPod') > -1) {
						//ipod
						return "iPod"
					} else if(u.indexOf('iPad') > -1) {
						//ipad
						return "iPad"
					}
				} else if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
					//android
					num = u.substr(u.indexOf('Android') + 8, 3);
					return {
						"type": "Android",
						"version": num
					};
				} else if(u.indexOf('BB10') > -1) {
					//黑莓bb10系统
					return "BB10";
				} else if(u.indexOf('IEMobile')) {
					//windows phone
					return "Windows Phone"
				}
			}
		}
	}

	var system = brower.versions();

	if(system != "IE") {
		var sc_t=0;
		bg(sc_t);
		$(window).resize(function() {
			sc_t = $(window).scrollTop();
			bg(sc_t);
		})
	} else {
		//ie样式
	}

	function bg(sc_t) {
		//图片最大宽高
		var window_h = $(window).height();
		var window_w = $(window).width();

		//图片最小宽高
		var img_min_h = 352;
		var img_min_w = 562;
		//壳最小宽高
		var phone_min_h = 430;
		var phone_min_w = 736;
		//壳最大宽高
		var phone_set_h = window_h / img_min_h * phone_min_h;
		var phone_set_w = window_w / img_min_w * phone_min_w;

		//最大缩放倍数
		var scale_big_x = phone_set_w / phone_min_w;
		var scale_big_y = phone_set_h / phone_min_h;
		var scale_big = scale_big_x >= scale_big_y ? scale_big_x : scale_big_y;

		//图最小时的中心点高
		var t_h_s = $(".undertitle").innerHeight() + phone_min_h / 2;
		
		//图最大时的中心点高
		var t_h_b = phone_min_h * scale_big / 2 - 30 * scale_big;
		
		//中心点位移
		var t_h = t_h_s - t_h_b;

		//停止放大缩小时滚动条的位置
		var scroll_length = 300;

		$(window).scroll(function() {
			var scroll_num = $(window).scrollTop();
			setPhoneSize(scroll_num);
		});

		setPhoneSize(sc_t);

		function setPhoneSize(num) {
			//缩放倍数
			var scroll_num = (1 - scale_big) * num / scroll_length + scale_big;

			//num中心点 num= num
			var translate_num = (0 - t_h) / scroll_length * num + t_h;

			//透明度
			var op_num = 1 - (num / scroll_length);
			if(num >= scroll_length) {
				$(".bgbox").css({
					"-moz-transform": "translate(0,0) scale(1)",
					"-webkit-transform": "translate(0,0) scale(1)"
				});
				$(".bannertitle").css({
					"opacity": "0",
					"display": "none"
				});
				$(".smallimgBox").css({
					"opacity": "1"
				})

			} else {
				$(".bgbox").css({
					"-moz-transform": "translate(0,-" + translate_num + "px) scale(" + scroll_num + ")",
					"-webkit-transform": "translate(0,-" + translate_num + "px) scale(" + scroll_num + ")"
				});
				$(".bannertitle").css({
					"opacity": op_num,
					"display": "block"
				});
				$(".smallimgBox").css({
					"opacity": 1 - op_num
				})

			}

		}
	}

});

这就是全部了,如果有什么不对或者大家有什么不同的实现方法,欢迎一起讨论。

  • 2
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值