$(function() {
var $win = $(window),
h = 0,
opacity = 0,
getWidth = function() {
h = $win.height();
};
$win.mousemove(function(e) {
getWidth();
opacity = (e.pageY / h);
console.log(opacity);
$('#myElement').css('opacity', opacity);
});
});
#myElement {
height: 100px;
width: 100px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myElement"></div>
http://jsfiddle.net/WV8jX/791/
当鼠标按下时,元素显示。我想做同样的事情,除了我希望元素在你向下滚动时消失,而不是显示出来。任何想法如何做到这一点?
答案 0 :(得分:4)
由于opacity
是一个可以包含0到1之间任何值的属性,因此您可以通过简单地更改以下行来反转该行为:
opacity =(e.pageY / h);
类似于:
opacity = 1 - (e.pageY / h);
您可以查看工作示例here
答案 1 :(得分:0)
我认为这应该可以解决问题。
$(function(){
var $win = $(window),
h = 0,
opacity = 0,
getWidth = function() {
h = $win.height();
};
$win.mousemove(function(e) {
getWidth();
opacity = 1 - (e.pageY/h);
console.log(opacity);
$('#myElement').css('opacity',opacity);
});
});