每天一个jquery插件-做置顶插件1
做置顶插件1
效果如下
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做置顶特效</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/zzdtx.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#test1{
background-color: white;
width: 100%;
height: 1500px;
}
#test2{
background-color: lightgray;
width: 300px;
height: 500px;
overflow: auto;
}
#test3{
background-color: gray;
width: 200px;
height: 700px;
}
</style>
</head>
<body>
<div id="test1">
<div id="test2">
<div id="test3"></div>
</div>
</div>
</body>
</html>
<script>
$(function(){
var temp1 = zzdtx("html");
var temp2 = zzdtx("#test2");
temp1.load();
temp2.load();
})
</script>
var zzdtx = function(id) {
var $id = $(id);
$id.css({
"position": "relative"
})
var $btn = $("<div>↑</div>");
$btn.css({
"width": "50px",
"height": "50px",
"display": "flex",
"justify-content": "center",
"align-items": "center",
"position": "absolute",
"bottom": "10px",
"right": "10px",
"background-color": "white",
"border":"1px solid lightgray",
"font-size":"24px"
})
$btn.appendTo($id)
return {
$btn:$btn,
$id: $id,
load: function() {
var that = this;
that.$btn.click(function(){
that.$id.stop().animate({
scrollTop:'0px'
})
})
}
}
}
讲下想法
- 一开始置顶我想的是就和我之前做的那个楼梯滚动用的置顶差不多，直接给找到粘贴就行了，不过感觉这样子做出来的一点进步都没有，所以就是做一个通用的置顶插件
- 它的效果应该有这些①置顶状态下应该隐藏②当滑动一定距离按钮才改出现于消失③当点击置顶按钮的时候逐步的滑向顶部④滑动的时候应该还要有各种速度选择⑤此外应该设置不同的动画效果，比如基础的按钮替换成一根从上面往下放置的绳子，然后点击绳子的时候回配合动画绳子收放与遮罩界面播放动画，到后面结束动画回到顶部
- 虽然我是这么想的，但是今天有一个问题一直没想到咋处理，就是我给这个容器始终定位在一个可视区域的地方没搞懂，之前html界面那是直接fixed定位就可以放在可视区域的指定位置，但是我在这里面的用浮动之后的absolute我的按钮会跟着滑动条一起走，这不是我想要的，但是今天没试出结果，容我先搜搜
- 然后我上面说的效果大部分没完成，不过先期待一下，未完，溜了