zoukankan      html  css  js  c++  java
  • js实现右下角可关闭最小化div

    本实例使用Javascript实现右下角可关闭最小化div,可以用于展示推荐内容,效果预览网址:http://keleyi.com/keleyi/phtml/xuanfudiv/3.htm
    效果图片:

    完整源代码:

     1 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <title>js实现右下角可关闭最小化div--柯乐义</title>
     5 <script src="http://keleyi.com/keleyi/phtml/xuanfudiv/3/msg.js" type="text/javascript"></script>
     6 <style type="text/css" media="screen">    
     7 /* 右下角跳出的广告 */    
     8 #downmsg_emessage{POSITION: fixed;_position:absolute; z-index:100; bottom:0;right:0; background:url(http://keleyi.com/keleyi/phtml/xuanfudiv/3/down_msg_bg.gif) no-repeat left top;width:225px;}
     9 #donwmsg_head{float:left; display:inline; font-size:12px;color:#FFFFFF;margin-left: 26px;margin-top: 6px;}
    10 #downmsgBar .close{float:right;width:11px;height:11px;margin-top:6px;display:block;margin-right:5px;}
    11 #downmsgBar{height:25px;}
    12 #donwmsg_content{height:162px;overflow:hidden;}
    13 #donwmsg_content ul{font-size:12px;color:#007cc1;    top: 0px;padding:0px 2px 0 6px;left: 6px;line-height:180%; height:110px; overflow:hidden;}
    14 #donwmsg_content ul li{background:url(http://keleyi.com/keleyi/phtml/xuanfudiv/3/down_msg_bg.gif) no-repeat -100px -245px;text-indent:13px;}
    15 #donwmsg_content ul li a{color:#007cc1;}
    16 #donwmsg_content ul .ll a{color:#a10000;font-weight:bold;}
    17 #donwmsg_content p{position:absolute;left: 13px;top: 157px;}
    18 #donwmsg_content .lb{padding:0px; text-align:center;}
    19 #donwmsg_content .lb a{font-size:12px;color:Blue}
    20 a.msg-hidden-btn-2{width:11px; height:11px;overflow:hidden;float:right;display:block;margin-right:5px;margin-top:6px;background:url(http://keleyi.com/keleyi/phtml/xuanfudiv/3/down_msg_bg.gif) no-repeat -0px -250px;}
    21 a.msg-hidden-btn-1{ width:11px; height:11px;overflow:hidden;float:right;display:block;margin-right:5px;margin-top:6px;background:url(http://keleyi.com/keleyi/phtml/xuanfudiv/3/down_msg_bg.gif) no-repeat -50px -250px;}
    22 </style>
    23 </head>
    24 <body>
    25 <div id="downmsg_emessage" style="DISPLAY: block">
    26 <div id="downmsgBar">
    27 <div id="donwmsg_head">柯乐义推荐内容</div><a class="close" href="javascript:closeDiv()"></a><a class="msg-hidden-btn-1" id="msg_hidden_btn" href="javascript:showHideDiv()">&nbsp;</a></div>
    28 <div id="donwmsg_content" style="DISPLAY: block; HEIGHT: 162px">
    29 <ul>
    30 <li class="ll"><a href="http://keleyi.com/a/bjac/768f469b95b61487.htm" >单行文字间歇向上滚动</a></li>
    31 <li><a href="http://keleyi.com/a/bjac/a6d651710217f7a0.htm" >jQuery UI修饰title气泡</a></li>
    32 <li><a href="http://keleyi.com/a/bjac/bf0eb8c02085b10d.htm" >jquery清空textarea等输入框</a></li>
    33 <li><a href="http://keleyi.com/a/bjac/939631bb07adb4dc.htm" >jquery关灯特效</a></li>
    34 <li><a href="http://keleyi.com/a/bjac/7e8897e5ec0849e9.htm" >可改变大小DIV层</a></li>
    35 </ul>
    36 <div class="lb"><a href="http://keleyi.com/menu/jquery/" target="_blank">jQuery</a>   <a href="http://keleyi.com/menu/javascript/" target="_blank">Javascript</a>   <a href="http://keleyi.com/menu/cms/" target="_blank">CMS</a> </div>
    37 </div>
    38 </div>
    39 
    40 </body>
    41 </html>

    文本转载自柯乐义: http://keleyi.com/a/bjac/4r5tcg7v.htm

  • 相关阅读:
    2016.9.3 好好学习天天快乐解题报告
    2016.8.29 LGTB解题报告
    2016.8.29 解题报告之我会做的题都是简单题
    2016.8.28 随写
    2016.8.27一套简单的题解题报告
    2016.8.25 NOIP2012 day1 解题报告
    进度条君
    2016..8.25 切题总结
    2016.8.25 暑假总结
    dsu on tree学习笔记
  • 原文地址:https://www.cnblogs.com/jihua/p/tuijian.html
Copyright © 2011-2022 走看看