0顶

仿谷歌个性首页拖拽效果

稿源：互联网 2022-04-02 21:40:00 点击： 6399 撤稿纠错

研究谷歌个性首页拖拽效果，借鉴了别人的，直接上效果，代码比较粗糙，还没及时封装

以下讨论的是和拖拽谷歌相关的仿谷歌个性首页拖拽效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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 type="text/javascript" src="http://misc.360buyimg.com/201006[InstallDir_ChannelDir]jquery-1.2.6.pack.js"></script>
<style type="text/css">
*{padding:0;margin:0;}
.container{width:200px;height:400px;overflow:hidden;margin:100px;border:5px solid #0046a3;}
.com{overflow:hidden;color:white;}
.modbox{width:96px;height:96px;}
.line1{float:left;width:100px;height:400px;}
.red{background:red;width:100px;height:100px;}
.blue{background:blue;width:100px;height:100px;}
.black{background:black;width:100px;height:100px;}
.yellow{background:yellow;color:red;width:100px;height:100px;}
.special{width:1px;height:1px;position:relative;}
</style>
</head>
<body>
<div id="container" class="container">
 <div class="line1">
  <div class="red com"></div>
  <div class="blue com"></div>
  <div class="special com"></div>
 </div>
 <div class="line1">
  <div class="black com"></div>
  <div class="yellow com"></div>
  <div class="special com"></div>
 </div>
</div>
<script type="text/javascript">
var $com = $(".com");
//解决IE6问题  选择对象会
$com.css({"position" : "relative"});
var extend = function(destination,source){
 for(var o in source)
  destination[o] = source[o];
 return destination;
};
var Core = {};
Core.Events = {};
Core.Events.addEvent = function(m, h, g, a) {
    var j = m;
    if (j == null) {
        $Debug("addEvent 没有找到时间句柄" + m);
        return
    }
    if (typeof a == "undefined") {
        a = false
    }
    if (typeof g == "undefined") {
        g = "click"
    }
    if (j.addEventListener) {
        j.addEventListener(g, h, a);
        return true
    } else {
        if (j.attachEvent) {
            var b = j.attachEvent("on" + g, h);
            return true
        } else {
            j["on" + g] = h
        }
    }
};
Core.Events.removeEvent = function(a, b, g) {
    var h = a;
    if (h == null) {
        $Debug("removeEvent 没有找到时间句柄" + a);
        return
    }
    if (typeof b != "function") {
        return
    }
    if (typeof g == "undefined") {
        g = "click"
    }
    if (h.addEventListener) {
        h.removeEventListener(g, b, false)
    } else {
        if (h.attachEvent) {
            h.detachEvent("on" + g, b)
        }
    }
    b[g] = null
};
extend(Core.Events,{
 bind : function(object, fun) {
  return function() {
   return fun.apply(object, arguments);
  }
 },
 bindAsEventListener : function(object, fun) {
  return function(event) {
   return fun.call(object, (event || window.event));
  }
 },
 getPos : function (e) {
  e = e || window.event;
  var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
  var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
  
  return { 'pageX':x,'pageY':y };
 }    
});
var Utils = {};
/*
拖拽组件   by suntiger035
*/
Utils.Drag = function(container, drag,options){
 this.init(container, drag,options); 
}
Utils.Drag.prototype = {
 constructor : Utils.Drag,
 init : function(container,drag,options){
  this.container = typeof container == "string" ? $("#" + container)[0] : container[0];
  this.drag = typeof drag == "string" ? $("#" + drag)[0] : drag[0];
  this.x = 0;
  this.y = 0;
  this.startFunc = options.startFunc || function(){};
  this.moveFunc = options.moveFunc || function(){};
  this.endFunc = options.endFunc || function(){};
  this.Move = Core.Events.bindAsEventListener(this,this.move);
  this.Stop = Core.Events.bind(this,this.stop);
  this.drag.style.cursor = "move"; 
  Core.Events.addEvent(this.drag,Core.Events.bindAsEventListener(this,this.start),"mousedown");
 },
 start : function(E){ 
  this.x = E.clientX - this.container.offsetLeft;
  this.y = E.clientY - this.container.offsetTop;  
  Core.Events.addEvent(document,this.Move,"mousemove");
  Core.Events.addEvent(document,this.Stop,"mouseup");
  this.startFunc.call(this,E, $(this.container));
  if(document.all){
   Core.Events.addEvent(this.drag, this.Stop, "losecapture");
   this.container.setCapture();
  }else{
   Core.Events.addEvent(window, this.Stop, "blur");
   E.preventDefault();
  }
 },
 move : function(E){
  window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
  this.moveFunc.call(this,E, $(this.container));
  this.container.style.left = E.clientX - this.x + "px";
  this.container.style.top = E.clientY - this.y + "px";
 },
 stop : function(E){
  Core.Events.removeEvent(document,this.Move,"mousemove");
  Core.Events.removeEvent(document,this.Stop,"mouseup");
  this.endFunc.call(this,E, $(this.container));
  if(document.all){
   Core.Events.removeEvent(this.drag, this.Stop, "losecapture");
   this.container.releaseCapture();
  }else{
   Core.Events.removeEvent(window, this.Stop, "blur");
  }
 }
};
function findMax($obj){
 var distance = []; 
 for(var i = 0,len = $com.size();i < len; i++){
  if($($com[i]) == $obj){
   continue;
  }
  distance.push([parseInt($com[i].distance, 10), $com[i]]);
 }
 distance.sort(function(a,b){return a[0]-b[0]});
 //console.log(distance);
 return distance[0][1];
 //return distance;
}
function calu($obj){
 var offset = $obj.offset();
 return {
  left : offset.left,
  top : offset.top
 };
}
function run(){
 $com.each(function(i){
  var offset = calu($(this));
  this.left = offset.left;
  this.top = offset.top;
 });
}
// 移动时显示的占位虚线框
var ghostElement  =   null ;
// 获取这个虚线框，通过dom动态生成
var getGhostElement  =   function  () {
     if  ( ! ghostElement) {
        ghostElement  =  document.createElement( "DIV" );
        ghostElement.className  =   " modbox " ;
        ghostElement.backgroundColor  =   "" ;
        ghostElement.style.border  =   " 2px dashed #aaa " ;
        ghostElement.innerHTML  =   "   " ;
    }
     return  ghostElement;
};
function cal(page){
 $com.each(function(i){
  this.distance = Math.floor(Math.sqrt((page.pageX - this.left) * (page.pageX - this.left) + (page.pageY - this.top) * (page.pageY - this.top)));
 });
}
function whenDrag($obj){
 var found = findMax($obj);
 
     var  _ghostElement  =  getGhostElement();
     if  (found  !=   null   &&  _ghostElement.nextSibling  !=  found) {
        found.parentNode.insertBefore(_ghostElement, found);
    } 
}
function endDrag($obj){
     var  ele  =  getGhostElement();
     if  (ele.nextSibling  !=   $obj[0].orgN) {
        ele.parentNode.insertBefore( $obj[0], ele.nextSibling);
    }
    ele.parentNode.removeChild(ele);  
}
$com.each(function(){
 var $this = $(this); 
 new Utils.Drag($this, $this, {
  startFunc : function(E, $obj){
   run();
   $this.css({"position" : "absolute","z-index" : "1000"});
   $obj[0].orgN = $obj[0].nextSibling;
  },
  moveFunc : function(E, $obj){
   var page = Core.Events.getPos(E);
   cal(page);
   whenDrag($obj);
  },
  endFunc : function(E, $obj){
   $this.css({"position" : "","z-index" : "0"});
   endDrag($obj);
  }
 });
});
</script>
</body>
</html>

关于仿谷歌个性首页拖拽效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011090173652.shtml方便下次再访问哦。

·上一篇： 精美的弹出层效果
·下一篇： 模拟了一个文字掉落的JS效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

仿谷歌个性首页拖拽效果

文章分类LIST >>返回首页

最新游戏

最新新闻