이번에는 특정 포털 웹사이트의 탐색 페이지에서 이미지 드래그 및 정렬을 구현하는 jQuery를 소개하겠습니다. 특정 포털 웹사이트의 탐색 페이지에서 이미지를 드래그하여 정렬할 때 jQuery에서 구현하는 주의사항은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.
팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.
공유해주신 360 탐색 페이지 아이콘 드래그 정렬 효과 코드는 다음과 같습니다
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta> <title>图标拖动排序效果代码</title> <script></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> <p> </p><p> </p>
适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
이 글의 사례를 읽으신 후 방법을 마스터하셨을 거라 믿습니다. PHP 중국어 웹사이트!
추천 도서:
tablesorter 플러그인 사용에 대한 자세한 설명(케이스 포함)
위 내용은 jQuery는 포털 웹사이트의 탐색 페이지에서 이미지의 드래그 정렬을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

WebStorm Mac 버전
유용한 JavaScript 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전

뜨거운 주제



