点击页面任何位置隐藏div的实现方法


Posted in Javascript onSeptember 05, 2016

实例如下:

<include file="Public:header" /> 
<style type="text/css"> 
  table{width:100%;margin: 0;} 
</style> 
<script type='text/javascript' src="/{:APP_PATH}/Public/js/unslider.min.js"></script> 
  <script type="text/javascript"> 
  //定义页面载入事件 
  /*$(function(){ 
    $('#more').addClass('moreno'); 
    $('#more').click(function(){ 
      //隐藏元素(向左移动) 
      if ($('#more').hasClass('moreno')) { 
        $('#sider').animate({ 
        left:0 
        },1000,function(){ 
          $('#more').removeClass('moreno'); 
        }); 
      }else{ 
         $('#sider').animate({ 
        left:-120 
      },1000,function(){ 
        $('#more').addClass('moreno'); 
      }); 
      } 
    }); 
  });*/ 
//定义页面载入事件 
  $(function(){ 
    $('#more').addClass('moreno'); 
    //点击界面除了容器id为more的区域外,任何地方隐藏掉 
    $(document).click(function(){ 
   
     $('#sider').animate({ 
        left:-120 
      },1000,function(){ 
        $('#more').addClass('moreno'); 
      }); 
    }); 
     
    $('#more').click(function(event){ 
      event.stopPropagation(); 
      //隐藏元素(向左移动) 
    event.stopPropagation(); 
      if ($('#more').hasClass('moreno')) { 
        $('#sider').animate({ 
        left:0 
        },1000,function(){ 
          $('#more').removeClass('moreno'); 
        }); 
      }else{ 
         $('#sider').animate({ 
        left:-120 
      },1000,function(){ 
        $('#more').addClass('moreno'); 
      }); 
      } 
    }); 
  }); 
  </script> 
  <div class="header_one"> 
    <div class="Central"> 
      <div class="first_one" style="position:absolute;"> 
        <img id="more" style="margin-top:8px;" src="/{:APP_PATH}/Public/img/pic/more.png" /> 
      </div> 
      <div> 
        <img style="height:30px;" src="/{:APP_PATH}/Public/img/main/logo1.png" /> 
      </div> 
    </div> 
  </div> 
  <div class="bg"> 
    <div class="pic" style="height:180px;"> 
      <div id="lunbo" style="overflow: hidden;"> 
      <ul style="margin:0px;" id="lunboul" style="position: relative;"> 
        <volist name="pic" id="vo"> 
          <li style="float:left;text-align:center;"> 
            <img src="{$vo['pic']}" alt="" style="height:176px;margin:auto;" > 
          </li> 
        </volist> 
      </ul> 
    </div>   
  <script type="text/javascript"> 
  $('#lunbo').unslider({ 
    speed: 0, 
    delay: 3000, 
    complete: function() {}, 
    keys: true, 
    dots: true, 
    fluid: false 
  }); 
  function autoScroll(obj){  
    $(obj).find("#voo").animate({  
      marginTop : "-30px"  
    },500,function(){  
      $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);  
    })  
  }  
  $(function(){  
    setInterval('autoScroll("#xst")',2000);  
  }) 
  </script> 
  </div> 
  <div style="width:100%;background-color:#EEEEEE;height:30px;margin:10px 0;"> 
    <div class="scroll" id="xst" style="float:right;margin-left:10px;height:30px;width:75%;overflow:hidden;"> 
      <ul id='voo' style="margin-top:0px;"> 
        <volist name='gonggao' id="vo"> 
          <li style="line-height:30px;height:30px;padding-left:5px;padding-top:2px;text-align:left;"> 
            <a href="{:U('/Index/PlatDetail',array('id'=>$vo['id']))}">{$vo['name']}</a> 
          </li> 
        </volist> 
      </ul> 
       
    </div> 
    <div style="float:right;margin:5px 0;"> 
      最新公告 
    </div> 
  </div> 
  <table id="fone" onclick="javascript:location.href='/Invest/InvestHp/biao_type/love'"> 
    <tr> 
      <td class="norrow"><img src="/{:APP_PATH}/Public/img/pic/new.png"/></td> 
      <td class="secon">新手标</td> 
      <td><span class="blo">8-10%</span><span class="tblo">预期年化收益</span></td> 
      <td><span class="blo">7<span class="cao_one">天</span></span><span class="tblo">投资期限</span></td> 
      <td class="jian_rig"><img class="rig_pic" src="/{:APP_PATH}/Public/img/pic/rightshow.png" /></td> 
    </tr>  
  </table> 
 
  <table class="bird" onclick="javascript:location.href='/Invest/InvestList/biao_type/yxlc'"> 
    <tr> 
      <td class="norrow"><img src="/{:APP_PATH}/Public/img/pic/fast.png" /></td> 
      <td class="secon">快系列</td> 
      <td><span class="blo">8-10%</span><span class="tblo">预期年化收益</span></td> 
      <td><span class="blo">1<span class="cao_one">个月</span></span><span class="tblo">投资期限</span></td> 
      <td class="jian_rig"><img class="rig_pic" src="/{:APP_PATH}/Public/img/pic/rightshow.png" /></td> 
    </tr>  
  </table> 
 
  <table class="se_cond" onclick="javascript:location.href='/Invest/InvestList/biao_type/gxd'"> 
    <tr> 
      <td class="norrow"><img src="/{:APP_PATH}/Public/img/pic/stable.png" /></td> 
      <td class="secon">稳系列</td> 
      <td><span class="blo">12-14%</span><span class="tblo">预期年化收益</span></td> 
      <td><span class="blo">3-6<span class="cao_one">个月</span></span><span class="tblo">投资期限</span></td> 
      <td class="jian_rig"><img class="rig_pic" src="/{:APP_PATH}/Public/img/pic/rightshow.png" /></td> 
    </tr>   
  </table> 
  <if condition="$GLOBALS['userinfo']['org_code'] eq 'fc'"> 
  <table class="last_fcb" onclick="javascript:location.href='/Invest/InvestList/biao_type/fcb'"> 
    <tr> 
      <td class="norrow"><img src="/{:APP_PATH}/Public/img/pic/house.png" /></td> 
      <td class="secon">房产宝</td> 
      <td><span class="blo">8-16%</span><span class="tblo">预期年化收益</span></td> 
      <td><span class="blo">3-6<span class="cao_one">个月</span></span><span class="tblo">投资期限</span></td> 
      <td class="jian_rig"><img class="rig_pic" src="/{:APP_PATH}/Public/img/pic/rightshow.png" /></td> 
    </tr> 
   
  </table> 
  </if> 
  <div class="bott_ton" onclick="javascript:location.href='/Goods/Index'"> 
    <img src="/{:APP_PATH}/Public/img/pic/logobean.png"/> 
  </div> 
  <div id="sider"> 
    <ul id="usecond"> 
    <li style="line-height:36px"> <a href="{:U('Index/Platann')}" style="color:#FFF">平台公告</a></li> 
    <li style="line-height:36px"> <a href="{:U('Index/HelpCenter')}" style="color:#FFF">帮助中心</a></li> 
    <li style="line-height:36px"> <a href="{:U('Index/PlatIntro')}" style="color:#FFF">平台介绍</a></li> 
    <li style="line-height:36px"> <a href="{:U('Index/Contact')}"style="color:#FFF">联系我们</a></li> 
    </ul> 
  </div> 
  </div> 
<include file="Public:footer" />

 点击页面任何位置隐藏div的实现方法

以上这篇点击页面任何位置隐藏div的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript document.referrer 用法
Apr 30 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
canvas实现图像放大镜
Feb 06 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
JS锚点的设置与使用方法
Sep 05 #Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 #Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 #Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 #Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 #Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 #Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 #Javascript
You might like
PHP中函数内引用全局变量的方法
2008/10/20 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
自动更新作用
2006/10/08 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
Python检测QQ在线状态的方法
2015/05/09 Python
在Python中使用成员运算符的示例
2015/05/13 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
python+requests接口自动化框架的实现
2020/08/31 Python
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
如何保障Web服务器安全
2014/05/05 面试题
酒店管理毕业生自我鉴定
2014/03/02 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
孔繁森观后感
2015/06/10 职场文书
小学毕业感言100字
2015/07/30 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL