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 属性如不多述。

  • 相关阅读:
    悲观锁和乐观锁
    ClickOnce安装提示文件计算出的哈希值与清单中的指定值不同的解决办法
    DataView的toTable和Table
    DataTable中抽取Distinct数据
    CSTE学习网站
    我的SiteMap
    Typesetting Engine_Gecko
    VSTS使用Web测试
    创建Web 服务测试
    [ZZ]Browser Series_网页浏览器比较
  • 原文地址:https://www.cnblogs.com/jikey/p/1621677.html
Copyright © 2011-2022 走看看