jQuery仿360浏览器和火狐Firefox导航页九宫格图片拖拽排序并有抖动效果
2014-10-12 16:10:58 By: shinyuu
本例子主要实现的是通过jQuery仿360导航页和火狐浏览器图标div拖动排序效果同样这个代码也可以实现九宫格图片拖拽排序特效、如果有使用九宫格的朋友有福了
主要使用了jQuery的拖拽功能、运行效果大家可以下载源代码观看哈、实现代码非常简单
HTML代码
<div class="item_container"> <div class="item_content"> <ul> <li><div class="item"><img src="images/youku.png" /></div></li> <li><div class="item"><img src="images/jd.png" /></div></li> <li><div class="item"><img src="images/taobao.png" /></div></li> <li><div class="item"><img src="images/fenghuan.png" /></div></li> <li><div class="item"><img src="images/souhu.png" /></div></li> <li><div class="item"><img src="images/wangyi.png" /></div></li> <li><div class="item"><img src="images/renren.png" /></div></li> <li><div class="item"><img src="images/360.png" /></div></li> <li><div class="item"><img src="images/360game.png" /></div></li> </ul> </div> </div>
jQuery初始化代码
this.init = function() { this.box = $(this).parent() ; $(this).attr("index", i).css({ position : "absolute", left : this.box.offset().left, top : this.box.offset().top }).appendTo(".item_content") ; this.drag() ; }
jQuery拖动码
this.move = function(callback) { $(this).stop(true).animate({ left : this.box.offset().left, top : this.box.offset().top }, 500, function() { if(callback) { callback.call(this) ; } }) ; }
jQuery交换位置
this.swap = function(currentItem, direction) { if(this.moveing) return false ; var directions = { normal : function() { var saveBox = this.box ; this.box = currentItem.box ; currentItem.box = saveBox ; this.move() ; $(this).attr("index", this.box.index()) ; $(currentItem).attr("index", currentItem.box.index()) ; }, down : function() { // 移到上方 var box = this.box ; var node = this ; var startIndex = currentItem.box.index() ; var endIndex = node.box.index(); ; for(var i = endIndex; i > startIndex ; i--) { var prevNode = $(".item_content .item[index="+ (i - 1) +"]")[0] ; node.box = prevNode.box ; $(node).attr("index", node.box.index()) ; node.move() ; node = prevNode ; } currentItem.box = box ; $(currentItem).attr("index", box.index()) ; }, up : function() { // 移到上方 var box = this.box ; var node = this ; var startIndex = node.box.index() ; var endIndex = currentItem.box.index(); ; for(var i = startIndex; i < endIndex; i++) { var nextNode = $(".item_content .item[index="+ (i + 1) +"]")[0] ; node.box = nextNode.box ; $(node).attr("index", node.box.index()) ; node.move() ; node = nextNode ; } currentItem.box = box ; $(currentItem).attr("index", box.index()) ; } } directions[direction].call(this) ; }
最后给大家献上源代码的下载链接: http://dwtedx.com/download.html?bdkey=s/1mgC664g 密码: 4jbi
若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力
想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)
或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)
如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教
为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛