设为首页收藏本站

SKY外语、计算机论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1513|回复: 0

[其他] js 对联广告

[复制链接]

7

主题

6

好友

130

积分

注册会员

Rank: 2

生肖
星座
金牛座
性别
发表于 2014-1-6 23:25:36 |显示全部楼层
本帖最后由 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.         }

  15.         /*fixed 位置固定*/

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

  24.         #left {
  25.             left: 10px;
  26.             /*right:10px; 分别的*/
  27.         }

  28.         #right {
  29.             right: 10px;
  30.         }

  31.         .colse {
  32.             position: absolute;
  33.             top: 0px;
  34.             right: 0px;
  35.         }

  36.      

  37.     </style>
  38.     <script type="text/javascript">
  39.         //function closeguanggao() //id
  40.         //{
  41.         //    //var adv = document.getElementById(id);

  42.         //    //adv.style.display = "none";
  43.         //}

  44.         //加载完之后运行的方法
  45.         //单击:关闭按钮 ---  实现单个的关闭
  46.         window.onload = function () {
  47.             //查询分离的行为,下面不显示document.getElementById("content").parentNode.style.display = "none";
  48.             var closebtn = document.getElementsByClassName("colse");
  49.             for (var i = 0; i < closebtn.length; i++) {

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

  54.             }
  55.             //------this.parent//取得父窗口
  56.         }

  57.     </script>
  58. </head>
  59. <body>
  60.     <div id="content">

  61.     <div id="left">
  62.         <img class="colse" src="../img/gif_45_025.gif" /><!--/onclick="closeguanggao(left)"-->      
  63.     </div>
  64.     <div id="right">
  65.         <img class="colse" src="../img/gif_45_025.gif" />
  66.     </div>

  67.         </div>
  68. </body>
  69. </html>
复制代码
您需要登录后才可以回帖 登录 | 立即注册


手机版|SKY外语、计算机论坛 ( 粤ICP备12031577 )    

GMT+8, 2019-10-22 06:26 , Processed in 0.166992 second(s), 27 queries .

回顶部