帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 元素位置调换效果代码
元素位置调换效果代码
浏览:840次
-
评论:0次
-
发布时间:2018-04-17
Html
Css
Js
1
2
3
4
5
上移
下移
* { padding:0; margin:0; } .wraper { width:500px; border:1px #ddd solid; margin:100px auto; position:relative; } ul { list-style:none; } ul li { height:32px; line-height:32px; background-color:red; margin-bottom:2px; position:relative; color:#fff; } ul li.slt { background-color:green; color:#000; } .up { position:absolute; top:10px; right:-35px; display:none; } .down { position:absolute; top:32px; right:-35px; display:none; }
$(document) //选择要移动的元素 .on('click', 'ul li', function() { var _this = $(this); _this.addClass('slt').siblings().removeClass('slt'); upDownBtnShow(_this); }) //点击别处重置 .on('click', function(e) { if ($(e.target).closest('li').length == 0 && $(e.target).closest('#up').length == 0 && $(e.target).closest('#down').length == 0) { $('#down,#up').hide(); $('ul li').removeClass('slt'); } }) //向上移动 .on("click", "#up", function() { moveTag('prev'); }) //向下移动 .on("click", "#down", function() { moveTag('next'); }); var isAnimate = false; //默认没有移动 function moveTag(type) { var seed = 300; var $c = $('li.slt'); if (type === 'next') { var $nextEle = $c.next(); if ($nextEle.length == 0) { alert('不能再往下移动了'); return false; } else { if (!isAnimate) { isAnimate = true; $nextEle.css('position', 'relative').animate({ top: '-' + $c.outerHeight(true) + 'px' }, seed); $c.css('position', 'relative').animate({ top: $nextEle.outerHeight(true) }, seed, function() { isAnimate = false; $nextEle.css({ top: 'auto' }).after($c.css({ top: 'auto' })); upDownBtnShow($('li.slt')); }); } } } else if (type === 'prev') { var $nextEle = $c.prev(); if ($nextEle.length == 0) { alert('不能再往上移动了'); return false; } else { if (!isAnimate) { isAnimate = true; $nextEle.css('position', 'relative').animate({ top: $c.outerHeight(true) }, seed); $c.css('position', 'relative').animate({ top: '-' + $nextEle.outerHeight(true) + 'px' }, seed, function() { isAnimate = false; $nextEle.css({ top: 'auto' }).before($c.css({ top: 'auto' })); upDownBtnShow($('li.slt')); }); } } } } function upDownBtnShow($ele) { var _this = $($ele); var _next = _this.next().length > 0; var _prev = _this.prev().length > 0; if (_next && !_prev) { //只能下移 $('#down').show().siblings('#up').hide(); } else if (_prev && !_next) { //只能上移 $('#up').show().siblings('#down').hide(); } else if (_next && _prev) { //上下都能移 $('#down,#up').show(); } else if (!_next && !_prev) { //不能移动 $('#down,#up').hide(); } }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.9.1
<!doctype html><html><head><meta charset="utf-8"><title>元素位置调换效果代码-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:点击按钮互换两个元素的位置
选中元素,判断元素位置显示按钮,点击按钮移动元素位置
PC端图片上传预览效果
超完美滚动轮播图效果
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
840
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值