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

仿谷歌个性首页拖拽效果

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

以下是程序代码

<!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/34097' title='柳传志马云陷舆论漩涡：请不要辜负这个时代' target="_blank">
                        柳传志马云陷舆论漩涡：请不要辜负这个时代</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/16159' title='谷歌新技术进入iOS平台：将叫板苹果Siri' target="_blank">
                        谷歌新技术进入iOS平台：将叫板苹果Siri</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/393' title='NEC拟出售移动效劳子公司NEC Mobile ' target="_blank">
                        NEC拟出售移动效劳子公司NEC Mobile </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6899' title='高通拼抢国际芯片市场 联发科海外拓展难安心' target="_blank">
                        高通拼抢国际芯片市场 联发科海外拓展难安心</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34300' title='中移动将推出多项4G资费新政' target="_blank">
                        中移动将推出多项4G资费新政</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34276' title='组建铁塔公司倒逼运营商改革 或加速4G网建设' target="_blank">
                        组建铁塔公司倒逼运营商改革 或加速4G网建设</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34275' title='阿里巴巴450亿勾画“现代服务业”藏宝图' target="_blank">
                        阿里巴巴450亿勾画“现代服务业”藏宝图</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34321' title='去看看外面的世界吧！别窝里斗了，中国在线旅游商们' target="_blank">
                        去看看外面的世界吧！别窝里斗了，中国在线旅游商们</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34131' title='HTC以品牌营销突围 专家建议改变经营思路' target="_blank">
                        HTC以品牌营销突围 专家建议改变经营思路</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-2026 爱易网页 当前在线：307人　
        网站在4时23分5秒内访问总人数：65962人
    3秒前 29.97%
　<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>