您的位置:CSS主页 > CSS模块 >

点击显示层再点击其它区域隐藏层CSS特效

 

DIV+CSS+JS的点击显示层再点击其它区域隐藏层,点击链接显示需显示的内容或DIV层,再点击其它地方隐藏显示的对象层

目录
  1. 使用说明
  2. 特效代码
  3. 效果截图
  4. 在线演示
  5. 打包下载

1、使用说明:   -   TOP

此DIV CSS特效为显示与隐藏对象层,点击需要点击链接或图片,对应显示要显示的层,再点击其它地方隐藏该显示的层。此层包括了DIV+CSS+js代码。

thinkcss提供完整的特效压缩包。

2、特效HTML代码:   -   TOP

  1. <!DOCTYPE html> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta charset="GB2312" /> 
  5. <title>点击显示层再点击其它区域隐藏层 - 特效在线演示 www.thinkcss.com</title> 
  6. <script src="images/coke.js" type="text/javascript"> 
  7. </script> 
  8. <style type="text/css"> 
  9. body{ text-align:center} 
  10. #main{ margin:0 auto; width:600px; border:1px dashed #00F; padding:10px;} 
  11. #ThinkCSS { border:1px solid #000000; 
  12. width:200px; height:100px; margin:0 auto; 
  13. background:#FFF; text-align:center} 
  14. </style> 
  15. </head> 
  16. <body> 
  17. <p>以下为点击显示层案例演示:</p> 
  18. <div id="main"> 
  19.     <div id="ThinkCSS" style="display:none;"> 
  20.         <a href="http://www.thinkCSS.com" target="_blank">DIV+CSS</a> 
  21.         之显示层案例演示<br /> 
  22.         <a href="http://www.thinkCSS.com" target="_blank">www.thinkcss.com</a> 
  23.     </div> 
  24.  
  25. <div><a href="#" id="showDiv">点击显示ThinkCSS层</a></div> 
  26. </div>
  27. </body> 
  28. </html> 

3、特效演示截图:   -   TOP

点击显示层特效截图
点击显示层隐藏层特效截图

4、在线演示地址:   -   TOP

http://www.thinkcss.com/yanshi/20120716/

5、在线下载:   -   TOP

百度网盘:百度网盘下载

标签(Tag): 特效 隐藏 点击隐藏 隐藏层

更多

 

HTML必备基础教程

 

CSS必备基础教程

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期:2012-07-16     点击:
原创来源:ThinkCSS     来源网址:http://www.thinkcss.com/view/m42.html
本文WWW.ThinkCSS.COM(DIV CSS) ThinkCSS版权所有,欢迎转载,并注明出处来源及URL!

 

推荐信息