<!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>单一按钮显示/隐藏</title>

</head>

<style>

body,div,ul,li,h2{margin:0;padding:0;}

body{font:12px/1.5 Tahoma;}

ul{list-style-type:none;}

#outer{width:200px;border:1px solid #aaa;margin:10px auto;}

#outer h2{cursor:pointer;color:#57646E;font-size:14px;font-weight:400;border:1px solid;height:30px;line-height:30px;padding-left:10px;background:#ced3d7 url(img/ico.gif) 180px 15px no-repeat;border-color:#fff #e9edf2;}

#outer h2.open{background-position:180px -12px;}

#outer ul{border-top:1px solid #DEE3E6;}

#outer li{height:25px;line-height:25px;vertical-align:top;}

#outer a{display:block;color:#6b7980;background:#e9edf2;text-decoration:none;padding:0 10px;}

#outer a:hover{background:#fff;text-decoration:underline;}

</style>

<script>

window.onload = function ()

{

    var oH2 = document.getElementsByTagName("h2")[0];

    var oUl = document.getElementsByTagName("ul")[0];

    oH2.onclick = function ()

    {

        var style = oUl.style;

        style.display = style.display == "none" ? "block" : "none";

        oH2.className = style.display == "none" ? "open" : ""

    }

}

</script>

<body>

<div id="outer">

    <h2>播放列表...</h2>

    <ul>

        <li><a href="javascript:;">玩家之徒 - 蔡依林</a></li>

        <li><a href="javascript:;">原谅我就是这样的女生 - 戴佩妮</a></li>

        <li><a href="javascript:;">猜不透 - 丁当</a></li>

        <li><a href="javascript:;">自导自演 - 周杰伦</a></li>

        <li><a href="javascript:;">浪漫窝 - 弦子</a></li>

        <li><a href="javascript:;">流年 - 王菲</a></li>

    </ul>

</div>

</body>

</html>

提示框效果

<!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>提示框效果</title>

<style>

body,div,h2,ul,li{margin:0;padding:0;}

body{font:12px/1.5 Tahoma;}

ul{list-style-type:none;}

#outer{width:560px;border:1px solid #333;margin:10px auto;padding:0 0 10px 10px;}

#outer h2{line-height:30px;text-align:center;margin-top:10px;}

#outer ul:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

#outer ul{zoom:1;}

#outer ul li{position:relative;float:left;border:1px solid #333;margin:10px 10px 0 0;display:inline;}

#outer ul li img{position:absolute;top:-14px;left:-14px;display:none;border:2px solid #999;cursor:crosshair;}

#outer ul li a{color:#666;width:80px;height:80px;display:block;background:#f0f0f0;text-decoration:none;padding:10px;}

#outer ul li a strong{display:block;}

.zindex{z-index:1;}

</style>

<script>

window.onload = function ()

{

    var oLi = document.getElementsByTagName("li");

    var oA = document.getElementsByTagName("a");

    var oImg = document.getElementsByTagName("img");

    for (var i = 0; i < oLi.length; i++)

    {

        oA[i].index = oImg[i].index = i;

        oA[i].onmouseover = function() {

            oLi[this.index].className = "zindex";

            oImg[this.index].style.display = "block"

        };

        oA[i].onmouseout = function ()

        {

            oLi[this.index].className = "";

            oImg[this.index].style.display = "none"

        };

        oImg[i].onmouseover = function()

        {

            oLi[this.index].className = "zindex";

            this.style.display = "block"

        };

        oImg[i].onmouseout = function()

        {

            oLi[this.index].className = "";

            this.style.display = "none"

        }

    }

}

</script>

</head>

<body>

<div id="outer">

    <h2>名车车标展示-鼠标移过显示车标</h2>

    <ul>

        <li>

            <a href="javascript:;" title="BMW 宝马汽车"><strong>BMW</strong>宝马汽车</a>

            <img src="img/1.jpg" alt="BMW 宝马汽车" />

        </li>

        <li>

            <a href="javascript:;" title="Alfa Romeo 阿尔法-罗米欧"><strong>Alfa Romeo</strong> 阿尔法-罗米欧</a>

            <img src="img/2.jpg" alt="Alfa Romeo 阿尔法-罗米欧" />

        </li>

        <li>

            <a href="javascript:;" title="Skoda 斯柯达"><strong>Skoda</strong> 斯柯达</a>

            <img src="img/3.jpg" alt="Skoda 斯柯达" />

        </li>

        <li>

            <a href="javascript:;" title="Volkswagen 大众汽车"><strong>Volkswagen</strong> 大众汽车</a>

            <img src="img/4.jpg" alt="Volkswagen 大众汽车" />

        </li>

        <li>

            <a href="javascript:;" title="Saab 萨布牌轿"><strong>Saab</strong> 萨布牌轿车</a>

            <img src="img/5.jpg" alt="Saab 萨布牌轿" />

        </li>

        <li>

            <a href="javascript:;" title="Lamborghini 兰博基尼"><strong>Lamborghini</strong> 兰博基尼</a>

            <img src="img/6.jpg" alt="Lamborghini 兰博基尼" />

        </li>

        <li>

            <a href="javascript:;" title="Porsche 保时捷"><strong>Porsche</strong> 保时捷</a>

            <img src="img/7.jpg" alt="Porsche 保时捷" />

        </li>

        <li>

            <a href="javascript:;" title="Peugeot 标致"><strong>Peugeot</strong> 标致</a>

            <img src="img/8.jpg" alt="Peugeot 标致" />

        </li>

        <li>

            <a href="javascript:;" title="Mercedes1 梅赛德斯 奔驰"><strong>Mercedes1</strong> 梅赛德斯 奔驰</a>

            <img src="img/9.jpg" alt="Mercedes1 梅赛德斯 奔驰" />

        </li>

        <li>

            <a href="javascript:;" title="Buick 别克汽车"><strong>Buick</strong> 别克汽车</a>

            <img src="img/10.jpg" alt="Buick 别克汽车" />

        </li>

    </ul>

</div>

</body>

</html>

单一按钮显示/隐藏&&提示框效果的更多相关文章

  1. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

  2. 【转】提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果

    原文网址:http://www.zhimengzhe.com/IOSkaifa/37910.html MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显 ...

  3. 通过自定义window来实现提示框效果

    #import <UIKit/UIKit.h>#import <Foundation/Foundation.h> @interface ZMStatuBarHud : NSOb ...

  4. 微信小程序API交互反馈,wx.showToast显示消息提示框

    导读:wx.showToast(OBJECT) 显示消息提示框. OBJECT参数说明: 参数 类型 必填 说明 最低版本 title String 是 提示的内容 icon String 否 图标, ...

  5. WPF提示框效果

    WPF提示框效果 1,新建WPF应用程序 2,添加用户控件Message 3,在Message中编写如下代码 <Border x:Name="border" BorderTh ...

  6. 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  7. PowerShell 显示气球提示框 1

    #加载 Winform 程序集,使用Out-Null抑制输出 [system.Reflection.Assembly]::LoadWithPartialName('System.Windows.For ...

  8. div+css实现圆形div以及带箭头提示框效果

    .img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...

  9. 基于JQuery 的消息提示框效果代码

    提示框效果 一下是封装到 Jquery.L.Message.js 中的JS文件内容 var returnurl = ''; var messagebox_timer; $.fn.messagebox ...

随机推荐

  1. 转：Java SoftReference 使用构建对象缓存

    本文介绍对象的强.软.弱和虚引用的概念.应用及其在UML中的表示. 1．对象的强.软.弱和虚引用   在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无法再使用这个对象.也就是说, ...

  2. 51nod 1851 俄罗斯方块

    玩过俄罗斯方块?那你知道俄罗斯方块共有七种吧(其实只有五种) 给一个黑白图,每次能将某些区域的格子黑白反转,至于某些区域的意思嘛,就是俄罗斯方块形状的区域咯(可水平翻转.上下翻转.旋转) 求能否将图变 ...

  3. VC++中有关句柄和指针及其转换（转）

    原文转自 https://blog.csdn.net/jearmy/article/details/47030011 1.MFC窗口的句柄和指针的转换 (1) 一般窗口对象都会有一个其对应的句柄变量, ...

  4. 给notepad++加nppFtp插件连接ubuntu编写文本

    打开notepad++的菜单栏中的插件,如果没有“插件管理”,去https://github.com/ashkulz/NppFTP/releases/tag/v0.27.2,下载对应的版本,将其解压后 ...

  5. Linux安转scala

    1. 创建目录 > mkdir  /opt/scala > cd  /opt/scala 2. 下载scala压缩包到上述目录 scala-2.12.6.tgz 3. 解压缩.建立软连接 ...

  6. UVA 11925:Generating Permutations(冒泡排序 Grade D)

    VJ题目链接 题意:n个数(n<300),是一个1~n的某个排列.有两种操作:操作1把前两个数换位置,操作2把第一个数移动到最后.问给出一个排列,问通过怎样的操作,能把1,2,3,...,n变到 ...

  7. POJ 3041.Asteroids-Hungary(匈牙利算法)

    Asteroids Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 23963   Accepted: 12989 Descr ...

  8. Codeforces 581F Zublicanes and Mumocrates（树型DP）

    题目链接  Round 322 Problem F 题意  给定一棵树,保证叶子结点个数为$2$(也就是度数为$1$的结点),现在要把所有的点染色(黑或白) 要求一半叶子结点的颜色为白,一半叶子结点的 ...

  9. Codeforces 208E - Blood Cousins（树上启发式合并）

    208E - Blood Cousins 题意 给出一棵家谱树,定义从 u 点向上走 k 步到达的节点为 u 的 k-ancestor.多次查询,给出 u k,问有多少个与 u 具有相同 k-ance ...

  10. 洛谷—— P1022 计算器的改良

    P1022 计算器的改良 题目背景 NCL是一家专门从事计算器改良与升级的实验室,最近该实验室收到了某公司所委托的一个任务:需要在该公司某型号的计算器上加上解一元一次方程的功能.实验室将这个任务交给了 ...