点击页面任何位置隐藏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 相关文章推荐
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
js实现微博发布小功能
Jan 12 Javascript
原生js二级联动效果
Jun 20 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
vue render函数动态加载img的src路径操作
Oct 26 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中与数组相关的函数
2007/03/22 PHP
jQuery 源码分析笔记
2011/05/25 PHP
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
Python中index()和seek()的用法(详解)
2017/04/27 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
python实现数字炸弹游戏程序
2020/07/17 Python
PyCharm 2020.2下配置Anaconda环境的方法步骤
2020/09/23 Python
python元组拆包实现方法
2021/02/28 Python
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
linux面试相关问题
2013/04/28 面试题
销售部主管岗位职责
2013/12/18 职场文书
餐饮加盟计划书
2014/01/10 职场文书
商铺租赁意向书
2014/04/01 职场文书
新闻传播专业求职信
2014/07/22 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
幼儿园感谢信
2015/01/21 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL