jQuery仿360導覽頁圖示拖曳排序效果程式碼分享

首頁

web前端

js教程

jQuery仿360導覽頁圖示拖曳排序效果程式碼分享_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:43 PM

jquery實作360瀏覽器導航頁圖示拖曳從新排序特效原始碼是一款模仿360瀏覽器導覽頁網站圖示拖曳排序的程式碼。本段程式碼適應所有網頁使用，有興趣的朋友可以學習一下。

運行效果圖： ----------------------查看效果下載源碼----- ------------------

小提示：瀏覽器中如果無法正常運作，可以嘗試切換瀏覽模式。
為大家分享的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>360导航页图标拖动排序效果代码</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>
 <div class="item_container">
 <div class="item_content">
  <ul>
  <li>
   <div class="item">
   <img  src="/static/imghwm/default1.png"  data-src="images/youku.png"  class="lazy" / alt="jQuery仿360導覽頁圖示拖曳排序效果程式碼分享_jquery" >
   </div>
  </li>
  <li>
   <div class="item">
   <img  src="/static/imghwm/default1.png"  data-src="images/jd.png"  class="lazy" / alt="jQuery仿360導覽頁圖示拖曳排序效果程式碼分享_jquery" >
   </div>
  </li>
  <li>
   <div class="item">
   <img  src="/static/imghwm/default1.png"  data-src="images/taobao.png"  class="lazy" / alt="jQuery仿360導覽頁圖示拖曳排序效果程式碼分享_jquery" >
   </div>
  </li>
  <li>
   <div class="item">
   <img  src="/static/imghwm/default1.png"  data-src="images/fenghuan.png"  class="lazy" / alt="jQuery仿360導覽頁圖示拖曳排序效果程式碼分享_jquery" >
   </div>
  </li>
  <li>
   <div class="item">
   <img  src="/static/imghwm/default1.png"  data-src="images/souhu.png"  class="lazy" / alt="jQuery仿360導覽頁圖示拖曳排序效果程式碼分享_jquery" >
   </div>
  </li>
  <li>
   <div class="item">
   <img  src="/static/imghwm/default1.png"  data-src="images/wangyi.png"  class="lazy" / alt="jQuery仿360導覽頁圖示拖曳排序效果程式碼分享_jquery" >
   </div>
  </li>
  <li>
   <div class="item">
   <img  src="/static/imghwm/default1.png"  data-src="images/renren.png"  class="lazy" / alt="jQuery仿360導覽頁圖示拖曳排序效果程式碼分享_jquery" >
   </div>
  </li>
  <li>
   <div class="item">
   <img  src="/static/imghwm/default1.png"  data-src="images/360.png"  class="lazy" / alt="jQuery仿360導覽頁圖示拖曳排序效果程式碼分享_jquery" >
   </div>
  </li>
  <li>
   <div class="item">
   <img  src="/static/imghwm/default1.png"  data-src="images/360game.png"  class="lazy" / alt="jQuery仿360導覽頁圖示拖曳排序效果程式碼分享_jquery" >
   </div>
  </li>
  </ul>
 </div>
 </div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
</div>
</body>
</html>

以上就是為大家分享的jQuery仿360導覽頁圖示拖曳排序效果程式碼，希望大家可以喜歡。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答本文將探討兩種在JavaScript中替換字符串字符的方法：在JavaScript代碼內部替換和在網頁HTML內部替換。在JavaScript代碼內部替換字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項，需使用正則表達式並添加全局標誌g： str = str.replace(/fi

自定義Google搜索API設置教程Mar 04, 2025 am 01:06 AM

本教程向您展示瞭如何將自定義的Google搜索API集成到您的博客或網站中，提供了比標準WordPress主題搜索功能更精緻的搜索體驗。令人驚訝的是簡單！您將能夠將搜索限制為Y

構建您自己的Ajax Web應用程序Mar 09, 2025 am 12:11 AM

因此，在這裡，您準備好了解所有稱為Ajax的東西。但是，到底是什麼？ AJAX一詞是指用於創建動態，交互式Web內容的一系列寬鬆的技術。 Ajax一詞，最初由Jesse J創造

示例顏色json文件Mar 03, 2025 am 12:35 AM

本文系列在2017年中期進行了最新信息和新示例。在此JSON示例中，我們將研究如何使用JSON格式將簡單值存儲在文件中。使用鍵值對符號，我們可以存儲任何類型的

8令人驚嘆的jQuery頁面佈局插件Mar 06, 2025 am 12:48 AM

利用輕鬆的網頁佈局：8 ESTISSEL插件jQuery大大簡化了網頁佈局。本文重點介紹了簡化該過程的八個功能強大的JQuery插件，對於手動網站創建特別有用

什麼是這個＆＃x27;在JavaScript？Mar 04, 2025 am 01:15 AM

核心要點 JavaScript 中的 this 通常指代“擁有”該方法的對象，但具體取決於函數的調用方式。沒有當前對象時，this 指代全局對象。在 Web 瀏覽器中，它由 window 表示。調用函數時，this 保持全局對象；但調用對象構造函數或其任何方法時，this 指代對象的實例。可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。這些方法使用給定的 this 值和參數調用函數。 JavaScript 是一門優秀的編程語言。幾年前，這句話可