百变鹏仔-专注前端行业精选
使用Jquery和bootstrap实现上移、下移、置顶、至底部等功能
作者：鹏仔先生日期：2020-06-03 11:33:30浏览：2771分类：JavaScript
最近休息了两个月，中途考了驾照，成功拿到驾照。
这几天刚换了家工作，主要做PC端，然后遇到了这个效果，就分享给大家咯！
一个使用jq和bootstrap实现的上下移动置顶的效果，如上图所示
附demo
下载地址：点击下载
需自行引入 jq和bootstrap 的js与css，demo里面已整理，可自行下载demo查看
代码如下（代码我从项目中复制粘贴过来，可能多一些没有用的，自行删除修改）：
.wrapper{
width: 100%;
height: 100%;
background: #000;
}
.bottom-pop-up{
width: 640px;
max-height: 494px;
background: #f8f8f8;
border-radius: 4px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -320px;
margin-top: -247px;
}
.bottom-pop-up-center{
width: 100%;
}
.bottom-pop-up-menu{
width: 100%;
background: #f1f2f6;
display: flex;
padding: 0 30px;
}
.bottom-pop-up-menu p{
font-size: 14px;
color: #6971a0;
line-height: 52px;
display: block;
width: 25%;
}
.bottom-pop-up-list{
overflow-y: scroll;
height: 300px;
background: #fff;
}
.bottom-pop-up-list .table-bordered{
border: 0;
}
.bottom-pop-up-list tr{
border-bottom: 1px solid #f3f3f5;
display: flex;
padding: 0 30px;
}
.bottom-pop-up-list tr td{
border: none !important;
width: 25%;
padding: 0 !important;
line-height: 50px !important;
}
.bottom-pop-up-show .iconright{
color: #00cf24;
cursor: pointer;
}
.bottom-pop-up-show .iconerror{
color: #ff4540;
cursor: pointer;
}
.bottom-pop-up-order .iconfont{
color: #716f70;
font-weight: bold;
border: none;
padding: 0 15px 0 0;
cursor: pointer;
}
.bottom-pop-up-operation .iconfont{
color: #aaadb2;
border: none;
padding: 0 15px 0 0;
cursor: pointer;
}
.bottom-pop-up-order .btn-primary{
background-color: transparent;
border-color: transparent;
}<body> <div class="wrapper"> <div class="bottom-pop-up" id="BottomPopUp"> <div class="bottom-pop-up-center"> <div class="bottom-pop-up-menu public-flex"> <p>栏目</p> <p>显示</p> <p>排序</p> <p>操作</p> </div> <div class="bottom-pop-up-list"> <table class="table table-bordered comTable table1"> <tr> <td> 留言板 <input type="text" name="city[]" value="11001" hidden> </td> <!-- 显示 --> <td class="bottom-pop-up-show"> <span class="iconfont iconright"></span> <input type="text" name="city[]" value="11001" hidden> </td> <!-- 顺序 置顶、上移、下移、置低 --> <td class="bottom-pop-up-order"> <span class="iconfont iconhighest btn top"></span> <span class="iconfont iconhigh btn up"></span> <span class="iconfont iconlow btn down"></span> <span class="iconfont iconlowest btn stick"></span> </td> <!-- 顺序 编辑、添加、删除 --> <td class="bottom-pop-up-operation"> <span class="iconfont iconedit"></span> <span class="iconfont iconaddEdge"></span> <span class="iconfont icondelete del"></span> <input type="text" name="city[]" value="11001" hidden> </td> </tr> <tr> <td> 首页 <input type="text" name="city[]" value="11002" hidden> </td> <!-- 显示 --> <td class="bottom-pop-up-show"> <span class="iconfont iconerror"></span> <input type="text" name="city[]" value="11002" hidden> </td> <!-- 顺序 置顶、上移、下移、置低 --> <td class="bottom-pop-up-order"> <span class="iconfont iconhighest btn top"></span> <span class="iconfont iconhigh btn up"></span> <span class="iconfont iconlow btn down"></span> <span class="iconfont iconlowest btn stick"></span> </td> <!-- 顺序 编辑、添加、删除 --> <td class="bottom-pop-up-operation"> <span class="iconfont iconedit"></span> <span class="iconfont iconaddEdge"></span> <span class="iconfont icondelete del"></span> <input type="text" name="city[]" value="11002" hidden> </td> </tr> <tr> <td> 关于我们 <input type="text" name="city[]" value="11003" hidden> </td> <!-- 显示 --> <td class="bottom-pop-up-show"> <span class="iconfont iconerror"></span> <input type="text" name="city[]" value="11003" hidden> </td> <!-- 顺序 置顶、上移、下移、置低 --> <td class="bottom-pop-up-order"> <span class="iconfont iconhighest btn top"></span> <span class="iconfont iconhigh btn up"></span> <span class="iconfont iconlow btn down"></span> <span class="iconfont iconlowest btn stick"></span> </td> <!-- 顺序 编辑、添加、删除 --> <td class="bottom-pop-up-operation"> <span class="iconfont iconedit"></span> <span class="iconfont iconaddEdge"></span> <span class="iconfont icondelete del"></span> <input type="text" name="city[]" value="11003" hidden> </td> </tr> <tr> <td> 联系我们 <input type="text" name="city[]" value="11004" hidden> </td> <!-- 显示 --> <td class="bottom-pop-up-show"> <span class="iconfont iconright"></span> <input type="text" name="city[]" value="11004" hidden> </td> <!-- 顺序 置顶、上移、下移、置低 --> <td class="bottom-pop-up-order"> <span class="iconfont iconhighest btn top"></span> <span class="iconfont iconhigh btn up"></span> <span class="iconfont iconlow btn down"></span> <span class="iconfont iconlowest btn stick"></span> </td> <!-- 顺序 编辑、添加、删除 --> <td class="bottom-pop-up-operation"> <span class="iconfont iconedit"></span> <span class="iconfont iconaddEdge"></span> <span class="iconfont icondelete del"></span> <input type="text" name="city[]" value="11004" hidden> </td> </tr> </table> </div> </div> </div> </div> </body>
<script>
//上下移动、置顶、置底操作
$(function(){
//上移
var $up = $(".up");
$up.click(function() {
var $tr = $(this).parents("tr");
if ($tr.index() != 0) {
$tr.fadeOut().fadeIn();
$tr.prev().before($tr);
}
});
//下移
var $down = $(".down");
var len = $down.length;
$down.click(function() {
var $tr = $(this).parents("tr");
if ($tr.index() != len - 1) {
$tr.fadeOut().fadeIn();
$tr.next().after($tr);
}
});
//置顶
var $top = $(".top");
$top.click(function(){
var $tr = $(this).parents("tr");
$tr.fadeOut().fadeIn();
$(".table1").prepend($tr);
$tr.css("color","red");
});
//置底
var $stick = $(".stick");
$stick.click(function(){
var $tr = $(this).parents("tr");
$tr.fadeOut().fadeIn();
$(".table1").append($tr);
$tr.css("color","red");
});
//删除
var $del = $(".del");
$del.click(function(){
$(this).parents("tr").remove();
});
//隐藏/隐藏
var $iconerror = $(".iconerror");
$iconerror.click(function(){
if ($(this).hasClass('iconerror')) {
$(this).removeClass('iconerror');
$(this).addClass('iconright')
} else {
$(this).removeClass('iconright');
$(this).addClass('iconerror')
}
});
var $iconright = $(".iconright");
$iconright.click(function(){
if ($(this).hasClass('iconright')) {
$(this).removeClass('iconright');
$(this).addClass('iconerror')
} else {
$(this).removeClass('iconerror');
$(this).addClass('iconright')
}
});
});
</script>
猜你还喜欢
- 04-19 VUE实现点击复制
- 04-16 vue将页面生成图片 vue生成海报
- 04-16 vue路由切换滑动效果 vue页面跳转交互 vue实现动画跳转
- 04-16 table固定表头和列 css实现表格固定表头
- 04-07 vue跳转页面清除历史记录，页面跳转删除历史记录
- 02-22 VUE You are using the runtime-only build of Vue where the template compiler is not available. Either
- 01-19 elementui多选上传 before-upload 格式效验错误总会触发before-remove （elementui多选上传on-success只执行了一次，只上传成功了一条）
- 10-08 vue按钮限制连点封装 自定义指令限制连点
- 09-14 nvm常用命令有哪些？nvm如何切换node版本？nvm如何下载node？
- 08-19 使用HBuilderX将vue或H5项目打包app
- 07-15 小程序嵌入网页向小程序跳转并传参，微信小程序中实现公众号授权获取openId
- 07-13 vue中实现文件批量打包压缩下载（以及下载跨域问题分析）
暂无评论，来添加一个吧。