仿谷歌个性首页拖拽效果-JS特效-爱易网页

仿谷歌个性首页拖拽效果

日期：2014-05-18　浏览次数：20104 次

以下是程序代码

<!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/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){
  t</div></div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="3256">下一篇：点击图层DIV闪动的JS特效代码</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10827' title='快递企业征收“份子钱” 成全了谁 苦了谁？' target="_blank">
                        快递企业征收“份子钱” 成全了谁 苦了谁？</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34127' title='三星手机在国内陷入困境：华为中兴小米紧追' target="_blank">
                        三星手机在国内陷入困境：华为中兴小米紧追</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34379' title='电信运营商员工涌入虚拟运营商，待遇差距多大？' target="_blank">
                        电信运营商员工涌入虚拟运营商，待遇差距多大？</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34084' title='苹果App Store被大量刷榜:iTunes账号成帮凶' target="_blank">
                        苹果App Store被大量刷榜:iTunes账号成帮凶</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/675' title='苹果CEO抱歉解读：是战略而非“屈服”' target="_blank">
                        苹果CEO抱歉解读：是战略而非“屈服”</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6894' title='微软提示XP只剩365天寿命：用户被绑架？' target="_blank">
                        微软提示XP只剩365天寿命：用户被绑架？</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10835' title='传诺基亚5月14日发布会推出Lumia 950' target="_blank">
                        传诺基亚5月14日发布会推出Lumia 950</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34279' title='湖南卫视扶持芒果TV杀入媒体：版权独播不分销' target="_blank">
                        湖南卫视扶持芒果TV杀入媒体：版权独播不分销</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34341' title='靠谱分析：6月发生的WWDC和谷歌I/O大会，将会出现哪些新产品？' target="_blank">
                        靠谱分析：6月发生的WWDC和谷歌I/O大会，将会出现哪些新产品？</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2025 爱易网页 当前在线：595人　
        网站在19时42分49秒内访问总人数：229978人
    当前 9.42%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>