Jquery - 旋转DIV在X轴上的50%
问题描述:
好吧,所以这应该很容易,我在那里的一半,但睡眠不足让我苦苦挣扎与它的基本数学。Jquery - 旋转DIV在X轴上的50%
我需要在滚动点位于50%时开始旋转DIV - '.thumb'DIV需要从CSS开始点开始,然后在50%的滚动点开始旋转,本质上模拟“竖起大拇指“从屏幕的一半。然后向上滚动重置拇指。
两个问题:
- 我如何获得该坝 '旋转' .thumb旋转到站立姿势?
- 迄今为止关于代码的任何建议是否会过于昂贵?
示例代码&小提琴:
$(window).scroll(function() {
var wintop = $(window).scrollTop(),
docheight = $('article').height(),
winheight = $(window).height(),
totalScroll = (wintop/(docheight-winheight)) * 100,
progressBar = $('.progress-bar');
// Note: too expensive polling??
if (totalScroll >= 50) {
// This bit is a mess and I can't figure it out yo.
// Start rotating from 0 to 100 (or from 90deg t 0deg??)
var rotate = (wintop/docheight) * 180;
$('.progress-thumb .thumb').css({ transform: 'rotate(' + rotate + 'deg)' });
}
progressBar.css('width', totalScroll + '%');
});
https://jsfiddle.net/keazyj6f/2/
感谢一如既往,感谢所有中肯的意见
答
在这里你去与问题的上半场的解决方案https://jsfiddle.net/keazyj6f/5/
$(window).scroll(function() {
var wintop = $(window).scrollTop(),
docheight = $('article').height(),
winheight = $(window).height(),
totalScroll = (wintop/(docheight-winheight)) * 100,
progressBar = $('.progress-bar');
// Note: too expensive polling??
if (totalScroll >= 50) {
// This bit is fucked and I can't figure it out yo.
// Start rotating from 0 to 100 (or from 90deg t 0deg??)
var rotate = (wintop/(docheight-winheight)) * 180;
$('.progress-thumb .thumb').css({ transform: 'rotate(' + rotate + 'deg)' });
} else {
\t $('.progress-thumb .thumb').css({ transform: 'rotate(0deg)'});
} \t
progressBar.css('width', totalScroll + '%');
});
article {
position: relative;
height: 4000px;
width: 100%;
&:after {
content: '50% Start rotating thumb';
display: block;
position: absolute;
top: 50%;
left: 0;
width: 20px;
height: 2px;
background: #000;
}
}
.container-progress {
left:0;
width: 100%;
height: 25px;
margin-bottom: 0px;
position: fixed;
top: 50px;
/*overflow: hidden;*/
background-color: white;
content: "";
display: table;
table-layout: fixed;
.progress-bar {
position: relative;
width: 0%;
float: left;
height: 100%;
z-index:99;
max-width: 100%;
background-color: #009dff;
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
.progress-thumb {
display: block;
position: absolute;
right: 0px;
top: -28px;
width: 60px;
height: 60px;
background-color: blue;
.thumb {
display: block;
position: absolute;
left: 24px;
top: 15px;
width: 50px;
height: 20px;
transform-origin: center center;
background-color: red;
}
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-progress">
<div class="progress-bar">
<div class="progress-thumb">
<div class="thumb"></div>
</div>
</div>
</div>
<article></article>
希望这将解决问题的第1部分。我会研究下一部分。
你错过了从docheight var rotate = (wintop/(docheight-winheight)) * 180;
答
if (totalScroll >= 50) {
var rotate = (wintop/docheight) *** 120;** // change the value from 180 - 120
console.log('rotate: ', rotate);
$('.progress-thumb .thumb').css({ transform: 'rotate(' + rotate + 'deg)' });
}
希望它可以帮助减去winheight。
嘿,伙计,这是非常接近。它以一个随机角度开始初始轮换(50%标记),而不是我期望的平稳“大拇指”,但给了我足够的基础上更新的数学前进。干杯。 – Danny
您是否正在从0%或50%标记看到一个平滑的“竖起大拇指”? – Shiladitya