<!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. Linux环境准备20160921

    这篇文章,是我准备linux的java环境时候,碰到的各种问题,采用的是centos 6.5版本. 1.卸载open jdk  先查看 rpm -qa | grep java  # java-1.4. ...

  2. [网络流24题] COGS 运输问题1

    11. 运输问题1 ★★☆   输入文件:maxflowa.in   输出文件:maxflowa.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述]     一个工厂每天生 ...

  3. [ CodeVS冲杯之路 ] P1169

    不充钱,你怎么AC? 题目:http://codevs.cn/problem/1169/ 感觉这题目好恐怖,莫名其妙乱码一堆就AC了…… 它看上去是两个子问题,实际上可以看成从起点找两条不相交的路径使 ...

  4. 转 C++中的static关键字

    C++中的static关键字 C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的static.前者应用于普通变量和函数,不涉及类:后者主要说明static在类中的作 ...

  5. 【转载】Photoshop-制作图片圆角2种方法

    学习网址:http://www.23ps.com/photoshop/cjjc/300002034.htm 方案一: 使用选区和蒙版相结合,用图章制作圆角选区,删除多余部分 效果: 实现步骤: 一.如 ...

  6. Vue.js之父子组件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 程序员利用javascript代码开发捕鱼游戏

    面试这么成功,全靠这个捕鱼游戏来完成,看的就是里面javascript代码,所以说前端最重要的还是javascript这一关,不管是现在HTML5时代还是以后如何,javascript永远不会落后,大 ...

  8. luogu P1577 切绳子

    题目描述 有N条绳子,它们的长度分别为Li.如果从它们中切割出K条长度相同的 绳子,这K条绳子每条最长能有多长?答案保留到小数点后2位. 输入输出格式 输入格式: 第一行两个整数N和K,接下来N行,描 ...

  9. 透视投影(Perspective Projection)变换推导

    透视投影是3D固定流水线的重要组成部分,是将相机空间中的点从视锥体(frustum)变换到规则观察体(Canonical View Volume)中,待裁剪完毕后进行透视除法的行为.在算法中它是通过透 ...

  10. 来自Jakob Jenkov的Jackson教程

    Jakob Jenkov是Java界的牛人. 下面是收集的与Jackson有关的教程: JSON: http://tutorials.jenkov.com/java-json/index.html J ...