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

仿谷歌个性首页拖拽效果

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

以下是程序代码

<!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/34312' title='京东物流"最后一公里"：颠覆阿里或者被阿里干掉' target="_blank">
                        京东物流"最后一公里"：颠覆阿里或者被阿里干掉</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34432' title='iPhone 6 Plus要召回是谣言' target="_blank">
                        iPhone 6 Plus要召回是谣言</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34326' title='“论文查重”网店一月收入竟过百万' target="_blank">
                        “论文查重”网店一月收入竟过百万</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34389' title='从雷军的“互联网七字诀”告诉你一个非妖魔化的小米' target="_blank">
                        从雷军的“互联网七字诀”告诉你一个非妖魔化的小米</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34101' title='火狐手机发展前路：或被运营商绑架' target="_blank">
                        火狐手机发展前路：或被运营商绑架</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34454' title='永不磨灭的九大尖端编程语言' target="_blank">
                        永不磨灭的九大尖端编程语言</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34456' title='解析2014年阿里百度等五大互联网巨头深度布局' target="_blank">
                        解析2014年阿里百度等五大互联网巨头深度布局</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34105' title='唯品会股价飙升 引天猫当当京东进军闪购' target="_blank">
                        唯品会股价飙升 引天猫当当京东进军闪购</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34448' title='英特尔VS苹果：移动芯片大战' target="_blank">
                        英特尔VS苹果：移动芯片大战</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-2024 爱易网页 当前在线：536人　
        网站在54秒内访问总人数：536人
    当前 39.05%
　<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>