jQuery实现某门户网站导航页图片拖动排序
这次给大家带来jQuery实现某门户网站导航页图片拖动排序,jQuery实现某门户网站导航页图片拖动排序的注意事项有哪些,下面就是实战案例,一起来看一下。
小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的360导航页图标拖动排序效果代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图标拖动排序效果代码</title> <script src="js/jq.js"></script> <script> $(function() { function Pointer(x, y) { this.x = x ; this.y = y ; } function Position(left, top) { this.left = left ; this.top = top ; } $(".item_content .item").each(function(i) { 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() ; }, 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) ; } }) ; }, this.collisionCheck = function() { var currentItem = this ; var direction = null ; $(this).siblings(".item").each(function() { if( currentItem.pointer.x > this.box.offset().left && currentItem.pointer.y > this.box.offset().top && (currentItem.pointer.x < this.box.offset().left + this.box.width()) && (currentItem.pointer.y < this.box.offset().top + this.box.height()) ) { // 返回对象和方向 if(currentItem.box.offset().top < this.box.offset().top) { direction = "down" ; } else if(currentItem.box.offset().top > this.box.offset().top) { direction = "up" ; } else { direction = "normal" ; } this.swap(currentItem, direction) ; } }) ; }, 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) ; }, this.drag = function() { // 拖拽 var oldPosition = new Position() ; var oldPointer = new Pointer() ; var isDrag = false ; var currentItem = null ; $(this).mousedown(function(e) { e.preventDefault() ; oldPosition.left = $(this).position().left ; oldPosition.top = $(this).position().top ; oldPointer.x = e.clientX ; oldPointer.y = e.clientY ; isDrag = true ; currentItem = this ; }) ; $(document).mousemove(function(e) { var currentPointer = new Pointer(e.clientX, e.clientY) ; if(!isDrag) return false ; $(currentItem).css({ "opacity" : "0.8", "z-index" : 999 }) ; var left = currentPointer.x - oldPointer.x + oldPosition.left ; var top = currentPointer.y - oldPointer.y + oldPosition.top ; $(currentItem).css({ left : left, top : top }) ; currentItem.pointer = currentPointer ; // 开始交换位置 currentItem.collisionCheck() ; }) ; $(document).mouseup(function() { if(!isDrag) return false ; isDrag = false ; currentItem.move(function() { $(this).css({ "opacity" : "1", "z-index" : 0 }) ; }) ; }) ; } this.init() ; }) ; }) ; </script> <style> .item_content ul { list-style:none; } .item_content ul li { width:200px; height:120px; float:left; margin:10px } .item_content { width:740px; height:460px; border:1px solid #ccc; margin:0 auto; } .item_content .item { width:200px; height:120px; line-height:120px; text-align:center; cursor:pointer; background:#ccc; } .item_content .item img { width:200px; height:120px; border-radius:6px; } </style> </head> <body> <p class="item_container"> <p class="item_content"> <ul> <li> <p class="item"> <img src="images/youku.png" /> </p> </li> <li> <p class="item"> <img src="images/jd.png" /> </p> </li> <li> <p class="item"> <img src="images/taobao.png" /> </p> </li> <li> <p class="item"> <img src="images/fenghuan.png" /> </p> </li> <li> <p class="item"> <img src="images/souhu.png" /> </p> </li> <li> <p class="item"> <img src="images/wangyi.png" /> </p> </li> <li> <p class="item"> <img src="images/renren.png" /> </p> </li> <li> <p class="item"> <img src="images/360.png" /> </p> </li> <li> <p class="item"> <img src="images/360game.png" /> </p> </li> </ul> </p> </p> <p style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p> </p> </body> </html>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是jQuery实现某门户网站导航页图片拖动排序的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

随着社交媒体的不断发展,小红书已经成为越来越多年轻人分享生活、发现美好事物的平台。许多用户在发布图片时遇到了自动保存的问题,这让他们感到十分困扰。那么,如何解决这个问题呢?一、小红书发布自动保存图片怎么解决?1.清除缓存首先,我们可以尝试清除小红书的缓存数据。步骤如下:(1)打开小红书,点击右下角的“我的”按钮;(2)在个人中心页面,找到“设置”并点击;(3)向下滚动,找到“清除缓存”选项,点击确认。清除缓存后,重新进入小红书,尝试发布图片看是否解决了自动保存的问题。2.更新小红书版本确保你的小

随着抖音短视频的火爆,用户们在评论区互动变得更加丰富多彩。有些用户希望在评论中分享图片,以更好地表达自己的观点或情感。那么,抖音评论里怎么发图片呢?本文将为你详细解答这个问题,并为你提供一些相关的技巧和注意事项。一、抖音评论里怎么发图片?1.打开抖音:首先,你需要打开抖音APP,并登录你的账号。2.找到评论区:在浏览或发布短视频时,找到想要评论的地方,点击“评论”按钮。3.输入评论内容:在评论区输入你的评论内容。4.选择发送图片:在输入评论内容的界面,你会看到一个“图片”按钮或者“+”号按钮,点

Apple最近的iPhone可以通过清晰的细节、饱和度和亮度来捕捉回忆。但有时,您可能会遇到一些问题,这些问题可能会导致图像看起来不那么清晰。尽管iPhone相机上的自动对焦已经取得了长足的进步,可以让您快速拍照,但相机在某些情况下可能会错误地对焦错误的拍摄对象,从而使照片在不需要的区域更加模糊。如果iPhone上的照片看起来失焦或总体上缺乏清晰度,以下帖子应该可以帮助您使它们更清晰。如何在iPhone上使图片更清晰[6种方法]您可以尝试使用本机的“照片”应用来清理照片。如果您需要更多功能和选项

在PowerPoint中,让图片逐一显示是一种常用的技巧,可以通过设置动画效果来实现。本指南详细介绍了实现这一技巧的步骤,包括基本设置、图片插入、添加动画、调整动画顺序和时间。此外,还提供了高级设置和调整,例如使用触发器、调整动画速度和顺序,以及预览动画效果。通过遵循这些步骤和技巧,用户可以轻松地在PowerPoint中设置图片逐一出现,从而提升演示文稿的视觉效果并吸引观众的注意力。

有网友发现打开浏览器网页,网页上的图片迟迟加载不出来,是怎么回事?检查过网络是正常的,那是哪里出现了问题呢?下面小编就给大家介绍一下网页图片加载不出来的六种解决方法。 网页图片加载不出来: 1、网速问题 网页显示不出图片有可能是因为电脑的网速比较慢,电脑中开启的软件比较多, 而我们访问的图片比较大,这就可能因为加载超时,导致图片显示不出来, 可以将比较占网速的软件将关掉,可以去任务管理器查看一下。 2、访问人数过多 网页显示不出图片还有可能是因为我们访问的网页,在同时间段访问的

你们是不是也在使用福昕PDF阅读器软件呢?那么你们知道福昕PDF阅读器如何将pdf文档转成jpg图片吗?下面这篇文章就为大伙带来了福昕PDF阅读器将pdf文档转成jpg图片的方法,感兴趣的小伙伴们快来下文看看吧。先启动福昕PDF阅读器,接着在顶部工具栏找到“特色功能”,然后选择“PDF转其他”功能。在接下来,打开一个名为“福昕pdf在线转换”的网页。在页面上方右侧点击“登录”按钮进行登录,然后打开“PDF转图片”功能。之后点击上传按钮并将想要转换成图片的pdf文件添加进来,添加完毕后点击“开始转

在使用wps办公软件时,我们发现不单单只用一种形式,文字里会加入表格和图片,表格里也可以加入图片等等,这些都是兼并使用的,让整个文档的内容看起来更丰富,如果需要在文档中插入两张图片,而且需要并排排列。我们接下来的课程就可以解决这个问题:wps文档中两张图片怎么并排。1、首先需要打开WPS软件,找到你想要调整的图片。左键点击图片会弹出一个菜单栏,选择“页面布局”。2、在文字环绕中选择“紧密型环绕”。3、当需要的图片都确认设定为“紧密型文字环绕”之后,便可以把图片随意拖动到合适的位置,点击第一张图片

jQuery中如何使用PUT请求方式?在jQuery中,发送PUT请求的方法与发送其他类型的请求类似,但需要注意一些细节和参数设置。PUT请求通常用于更新资源,例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先,确保引入了jQuery库文件,然后可以通过以下方式发送PUT请求:$.ajax({u
