SKY外语计算机学习

标题: js 对联广告 [打印本页]
作者: sky_yoyo    时间: 2014-1-6 23:25
标题: js 对联广告
本帖最后由 sky_yoyo 于 2014-1-8 17:34 编辑

我们经常在浏览网页时，看到像是对联一样的广告或者其他的图片文字等等，但是怎么实现这样的效果呢，那么我下面做的就是类似于这种的效果，本人的那个，美观性做的不是很好，大家见谅，将就看吧，知道原理就好了，哈哈



  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <style type="text/css">
  7.         #content{
  8.            /*border-radius:700px; 椭圆型
  9.            height:160px;
  10.            background: -webkit-linear-gradient(yellow,orange,red,green,blue,purple);*/
  11.            border:100px;
  12.            height:190px;
  13.            background:-webkit-radial-gradient(white,black); /*渐变的背景色*/
  14.         }

  16.         /*fixed 位置固定*/

  18.         #left, #right {
  19.             width: 100px;
  20.             height: 100px;
  21.             position: fixed;
  22.             top: 260px;
  23.             border: 1px solid red;
  24.             background-color:#b200ff;
  25.         }

  27.         #left {
  28.             left: 10px;
  29.             /*right:10px; 分别的*/
  30.         }

  32.         #right {
  33.             right: 10px;
  34.         }

  36.         .colse {
  37.             position: absolute;
  38.             top: 0px;
  39.             right: 0px;
  40.         }

  42.      

  44.     </style>
  45.     <script type="text/javascript">
  46.         //function closeguanggao() //id
  47.         //{
  48.         //    //var adv = document.getElementById(id);

  50.         //    //adv.style.display = "none";
  51.         //}

  53.         //加载完之后运行的方法
  54.         //单击：关闭按钮 ---  实现单个的关闭
  55.         window.onload = function () {
  56.             //查询分离的行为，下面不显示document.getElementById("content").parentNode.style.display = "none";
  57.             var closebtn = document.getElementsByClassName("colse");
  58.             for (var i = 0; i < closebtn.length; i++) {

  60.                 closebtn[i].onclick = function () {
  61.                     //实现关闭的分离  ----内容与行为的分离
  62.                     this.parentNode.style.display = "none";
  63.                 }

  65.             }
  66.             //------this.parent//取得父窗口
  67.         }

  69.     </script>
  70. </head>
  71. <body>
  72.     <div id="content">

  74.     <div id="left">
  75.         <img class="colse" src="../img/gif_45_025.gif" /><!--/onclick="closeguanggao(left)"-->      
  76.     </div>
  77.     <div id="right">
  78.         <img class="colse" src="../img/gif_45_025.gif" />
  79.     </div>

  81.         </div>
  82. </body>
  83. </html>
复制代码




欢迎光临 SKY外语计算机学习 (http://join.skywj.com/) Powered by Discuz! X2.5