滚动条位置控制元素透明度变化
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<style>
*{font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微软雅黑"}
body{line-height:26px;margin:0;height:3000px;background-color:black;}
.bg{position:fixed;top:0;}
.bg img{width:100%;opacity:0.4;}
.text{position:absolute;max-width:1000px;color:gray;text-align:center;}
</style>
<meta charset="UTF-8">
<title>滚动条的应用案例</title>
</head>
<body>
<div class="text">UI即User Interface（用户界面）的简称。<br>
泛指用户的操作界面，UI设计主要指界面的样式，美观程度。<br>
而使用上，对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。<br>
好的UI不仅是让软件变得有个性有品味，<br>
还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。</div>
<div class="bg"><img src="bg.jpg"></div>
<script>
//把文本块放在画面中间
$(".text").css({left:"50%",top:"50%"})
$(".text").css({marginLeft:-$(".text").width()/2})
//根据滚动条位置设置元素的透明度变化
var n=0
$(window).scroll(
function(){
n=$(window).scrollTop()
document.title=n
$(".text").css({opacity:1-n/300})
$(".bg img").css({opacity:n/300})
}
)
</script>
</body>
</html>
腾讯云开发者
