Maison > Article > interface Web > jQuery imitation 360 page de navigation icône glisser tri effet code Sharing_jquery
jQuery imitation 360 page de navigation icône glisser tri effet code Sharing_jquery
- WBOYoriginal
- 2016-05-16 15:43:091306parcourir
jquery réalise le glissement et la réorganisation des icônes de la page de navigation du navigateur 360. Le code source est un code qui imite le glisser-déposer et le tri des icônes de sites Web sur la page de navigation du navigateur 360. Ce code peut être utilisé sur toutes les pages Web. Les amis intéressés peuvent l’apprendre.
Rendu des opérations : --------------------------------
Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.
Le code d'effet de tri par glisser-déposer des icônes de la page de navigation 360 partagé avec tout le monde est le suivant 
<!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="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>
<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>Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Effet de menu TRee d'arbre d'expansion verticale à plusieurs niveaux implémenté par jquery CSS_jqueryArticle suivant：Effet de menu TRee d'arbre d'expansion verticale à plusieurs niveaux implémenté par jquery CSS_jquery
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript