<!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. cpj-swagger分别整合struts2、spring mvc、servlet

    cpj-swagger 原文地址:https://github.com/3cpj/swagger 1. Swagger是什么? 官方说法:Swagger是一个规范和完整的框架,用于生成.描述.调用和可 ...

  2. display 垂直居中

    /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex ...

  3. SpringMVC+MyBatis+Shiro 配置文件详解

    1.web.xml文件的配置 <?xml version="1.0" encoding="UTF-8"?> <web-app version= ...

  4. 汕头市队赛 SRM 09 A 撕书

    A 撕书I-3 SRM 09 背景&&描述 琉璃在撕书.     书总共有n页,都悬浮在数轴上,第i页的位置为,上面写着一个数字.     琉璃从右往左撕书.假如看到了第i页,就把在第 ...

  5. BS4爬取豆瓣电影

    爬取豆瓣top250部电影 ####创建表: #connect.py from sqlalchemy import create_engine # HOSTNAME='localhost' # POR ...

  6. C语言中函数strcpy ,strncpy ,strlcpy的用法【转】

    转自:http://blog.chinaunix.net/uid-20797562-id-99311.html strcpy ,strncpy ,strlcpy的用法好多人已经知道利用strncpy替 ...

  7. Centos7部署Open-Falcon监控

    参考博主:努力哥完成 一.Open-Falcon介绍 1.监控系统,可以从运营级别(基本配置即可),以及应用级别(二次开发,通过端口进行日志上报),对服务器.操作系统.中间件.应用进行全面的监控,及报 ...

  8. ReportView控件的使用

    ReportView控件的使用Posted on 2012-01-06 17:02 随遇 阅读(3006) 评论(0)  编辑 收藏 最近使用了ReportView控件绑定数据,总结下: 1.在设计器 ...

  9. CentOS7.0使用Yum安装Nginx

    安装Nginx yum install nginx 正常情况下必定是: 已加载插件:fastestmirror, langpacks base | 3.6 kB 00:00:00 docker-mai ...

  10. (5)java基础知识2

    一.方法 方法相当于功能的实现. public   static   int          max    (int num1, int num2)   {....................} ...