用JQUERY实现的仿Google首页拖动特效-JS特效-爱易网页

用JQUERY实现的仿Google首页拖动特效

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

以下是程序代码

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>用JQUERY实现的仿Google首页拖动特效</title>
 <style type="text/css">
 
 #div_width{
  width:98%;
  margin:0 auto;
 }
 
 *{
  margin:0px;
  padding:0px;
 }
 
 #div_left,#div_right,#div_center{
  float:left;
  width:28%;
  height:900px;
  margin:0 3px;
 }
 
 #div_center{
  width:38%;
 }
 
 .can_move{
  border:1px solid blue;
  width:100%;
  margin:5px 0;
  min-height:150px;
  
 }
 
 .center_width{
  height:200px;
 }
 
 p{
  height:30px;
  color:#fff;
  line-height:30px;
  background:#000;
  cursor:move;
 }
 
 #xuxian{  /*虚线框*/
  border:1px dashed #000;
  margin:5px 0;
 }
 
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script>
 //<![CDATA[
 
 window.onload=function(){
  
  var mouse_down=false; //鼠标时候按下
  var x_old=null;   //按下鼠标时鼠标的坐标
  var y_old=null;
  var div_move=null;   //正在移动的div
  var div_move_width=null; //正在移动的div的宽
  var div_move_height=null; //正在移动的div的高
  var xuxian="<div id='xuxian'></div>"; //虚线框
  document.oncontextmenu=new Function('event.returnValue=false;'); //禁止右键
  document.onselectstart=new Function('event.returnValue=false;'); //禁止选中
  
  
  
  //当鼠标按下的时候
  $("p").mousedown(function(e){
   mouse_down=true; //鼠标按下
   div_move=$(this).parent(); //指定当前div为正在移动的div
   div_move_width=div_move.width();
   div_move_height=div_move.height();
   
   x_old=e.pageX-$(this).offset().left; //获取鼠标坐标
   y_old=e.pageY-$(this).offset().top;
   
   //把当前div的position改成absolute
   div_move.css({
    position:'absolute',
    zIndex:'10',
    width:div_move_width,
    height:div_move_height,
    top:div_move.offset().top,
    left:div_move.offset().left
   });
   
   //将虚线框添加到正在移动的div之前的位置
   div_move.before(xuxian);
   $("#xuxian").css({
    width:'100%',
    height:div_move_height
   });
  });
  
  
  //移动鼠标
  $(document).mousemove(function(e){
   if(!mouse_down) return false;
   var _x=e.pageX;
   var _y=e.pageY;
   var div_right_div=$("#div_right>div").not(div_move).not("#xuxian");
   
   
   div_move.css({   //改变正在移动div的top和left
    top:_y-y_old,
    left:_x-x_old
   });
   
/*注意,因为鼠标当前始终在正在移动的div上面,所以,鼠标移动不会触发其他元素的mouseenter,mouseleave,mouseover和mouseout事件,要想达到同样的效果,只能根据鼠标的坐标来判断鼠标是否进入其他元素*/
   var left_left=$("#div_left").offset().left; //确定左边div_left容器的位置
   var left_width=$("#div_left").width();
   var right_left=$("#div_right").offset().left; //确定右边div_right容器的位置
   var right_width=$("#div_right").width();
   var center_left=$("#div_center").offset().left; //确定中间div_center容器的位置
   var center_width=$("#div_center").width();
   
   
   //判断鼠标坐标是否进入左边div_left容器
   if(_x>left_left&&_x<(left_left+left_width)){
    /*选定左边div_left容器下的最后一个可移动div,不包含当前正在移动的div元素和虚线框*/
    var div_left_last=$("#div_left>div").not(div_move).not("#xuxian").filter(":last");
    if(div_left_last.length>=1){ //判断时候左边div_left容器下时候有可移动div元素
     if(_y>(div_left_last.offset().top+div_left_last.height())){  //判断鼠标是否在左边div_left容器最后一个元素的下边
      $("#xuxian").remove(); //如果是,移除之前添加的虚线框
      div_left_last.after(xuxian); //把虚线框添加为左边div_left容器的最后一个子元素
      $("#xuxian").css({ //设定虚线框的高和宽
       width:'100%',
       height:div_move_height
      });
     }else{ //如果鼠标不在左边div_left容器最后一个元素的下边,那么,循环判定鼠标是否进入左边div_left容器下的可移动div元素里面
       var div_left_div=$("#div_left>div").not(div_move).not("#xuxian");
       for(var i=0;i<div_l</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="3216">下一篇：一个让下拉列表图层浮动在视频层上面的特效案例</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/34321' title='去看看外面的世界吧！别窝里斗了，中国在线旅游商们' target="_blank">
                        去看看外面的世界吧！别窝里斗了，中国在线旅游商们</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34306' title='刘强东：京东上市融资用于开拓三至六线城市' target="_blank">
                        刘强东：京东上市融资用于开拓三至六线城市</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10849' title='陈天桥之鉴：产品创新被扼杀那些事' target="_blank">
                        陈天桥之鉴：产品创新被扼杀那些事</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34132' title='郭美美事件推手被抓 “秦火火”拷问网络底线' target="_blank">
                        郭美美事件推手被抓 “秦火火”拷问网络底线</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34091' title='小米打响手机价格战 为米3铺路或另有所图' target="_blank">
                        小米打响手机价格战 为米3铺路或另有所图</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34315' title='国美在线叫板京东：李俊涛底气在哪?' target="_blank">
                        国美在线叫板京东：李俊涛底气在哪?</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34401' title='微软史上最大规模裁员，一半诺基亚员工' target="_blank">
                        微软史上最大规模裁员，一半诺基亚员工</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34225' 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-2026 爱易网页 当前在线：272人　
        网站在20时21分2秒内访问总人数：163620人
    当前 26.88%
　<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>