这是一篇差点把自己搞死的随笔
苹果官网的样式：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>
- 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;
}
- 划重点，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
})
}
}
}
});
这就是全部了，如果有什么不对或者大家有什么不同的实现方法，欢迎一起讨论。
486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
