每天学一个juqery插件-水一下滚动
Posted 阿飞超努力
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每天学一个juqery插件-水一下滚动相关的知识，希望对你有一定的参考价值。
每天一个juqery插件-水一下滚动
水一下滚动
我记得有有个常见的效果叫做滚动视觉差，先自己试试能不能做出来一样的效果
效果如下
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水一下滚动</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
}
#div{
width: 100%;
height: 3000px;
background-color: #ecf0f1;
z-index: 1;
}
#box1{
width:200px;
height:200px;
z-index: 9;
background-color: #95a5a6;
position: fixed;
top: 100px;
left: 100px;
}
#box2{
width:200px;
height:200px;
z-index: 9;
background-color: #1abc9c;
position: fixed;
top: 100px;
left: 200px;
}
#box3{
width:200px;
height:200px;
z-index: 9;
background-color:#3498db;
position: fixed;
top: 100px;
left: 300px;
}
#box4{
width:200px;
height:200px;
z-index: 9;
background-color:#f1c40f;
position: fixed;
top: 100px;
left: 400px;
}
</style>
</head>
<body>
<div id="div"></div>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</body>
</html>
<script>
$(function(){
$("#box1").roll();
$("#box2").roll(0.5);
$("#box3").roll(20);
$("#box4").roll(-10);
})
$.prototype.roll = function(span){
var $that = $(this);
var top = $that.css("top");
$that.attr('data-top',top);
span = span==undefined?10:span;
$(document).scroll(function(){
var top1 = $(this).scrollTop();
var top2 = parseInt($that.attr('data-top'));
console.log(top2);
$that.css('top',(top1/span)+top2);
})
}
</script>
思路解释
- 暂时没扒拉大佬的代码，所以我先自己试试能不能实现效果
- 等到差不多了再去模仿大佬的代码
- 未完休息。
以上是关于每天学一个juqery插件-水一下滚动的主要内容，如果未能解决你的问题，请参考以下文章