点击页面任何位置隐藏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 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
InnerHtml和InnerText的区别分析
Mar 13 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
很棒的vue弹窗组件
May 24 Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 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
一个用于网络的工具函数库
2006/10/09 PHP
php部分常见问题总结
2008/03/27 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
php实现两个数组相加的方法
2015/02/17 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
Javascript常考语句107条收集
2010/03/09 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
python删除过期文件的方法
2015/05/29 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
如何做好总经理助理
2013/11/12 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
法制宣传教育方案
2014/05/09 职场文书
贷款担保申请书
2014/05/20 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
2015年党性分析材料
2014/12/19 职场文书
歌剧魅影观后感
2015/06/05 职场文书
小学班主任心得体会
2016/01/07 职场文书
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android