zoukankan      html  css  js  c++  java
  • 一个简单的提示效果

    一个简单的效果,修改了三次才能达到如意的效果。看来,细节真的是决定成败。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Document</title>
    <style>
    .b
    { width:200px; margin:10px auto; height:200px; border:1px solid #ccc; background:#eee;}
    .l
    { width:50px; height:50px; border:1px solid #ccc; margin:10px; float:right; display:none;}
    </style>
    <script>
    window.onload
    = function(){

    }
    </script>
    </head>
    <body>
    <div class="b" id="b0" onmouseover="c(0)">
    春江潮水连海平
    <div class="l" id="c0"><a href="#">收藏</a> <a href="#">删除</a></div>
    </div>
    <div class="b" id="b1" onmouseover="c(1)">
    春江潮水连海平
    <div class="l" id="c1"><a href="#">收藏</a> <a href="#">删除</a></div>
    </div>
    <div class="b" id="b2" onmouseover="c(2)">
    春江潮水连海平
    <div class="l" id="c2"><a href="#">收藏</a> <a href="#">删除</a></div>
    </div>
    <script>
    function $(id) {
    return document.getElementById(id);
    }
    function c(n){
    for(var i=0; i<3; i++){
    $(
    'b' + i).style.background = "#eee";
    $(
    'c' + i).style.display = 'none';
    }
    $(
    'b' + n).style.background = "#eff";
    $(
    'c' + n).style.display = 'block';
    }
    </script>
    </body>
    </html>

    原理:

    先利用for循环初始化页面内待隐藏的div,然后根据循环外传来的参数对未隐藏div的进行样式改变。

    基本上控制隐藏显示的灵魂人物是:“display:none | block | inline" 。css 属性如不多述。

  • 相关阅读:
    80386寄存器
    删除 Windows 旧 OS 加载器
    [C#] Socket 通讯,一个简单的聊天窗口小程序
    [erl] erlang 进程注册和注销
    VB中 '&' 和 '+' 号的区别
    如何成为一个牛逼的程序员
    [VB] if 判断语句 和 If、IIf函数的比较
    C#中通过反射方法获取控件类型和名称
    薪资至少10K的一道题,你能拿下吗
    Jass 技能模型定义(—):半人马酋长的反击光环
  • 原文地址:https://www.cnblogs.com/jikey/p/1621677.html
Copyright © 2011-2022 走看看