zoukankan      html  css  js  c++  java
  • 有缓冲的伸缩下拉菜单(js)

    <html>
    <head>
    <title>有缓冲的伸缩下拉菜单(js)_网页代码站(www.webdm.cn)</title>
    <style>
    body
    {
    background
    :white
    }
    #menuList
    {
    border-bottom
    :solid 1px #333333;
    width
    :500px;
    }
    .boxStyle .caption
    {
    border-top
    :none;
    cursor
    :pointer;
    background
    :#33FF99;
    height
    :30px;
    line-height
    :30px;
    font-family
    :"Lucida Sans Unicode";
    font-size
    :12px;
    padding-left
    :5px;
    }
    .boxStyle
    {
    border
    :solid 1px #333333;
    border-bottom
    :none;
    background
    :#0099CC;
    overflow
    :hidden;
    position
    :relative
    }
    img
    {
    border
    :none
    }
    .infor
    {
    background
    :#000000;
    position
    :absolute;
    bottom
    :0;
    left
    :0;
    width
    :100%;
    filter
    : Alpha(opacity=50);
    -moz-opacity
    :.5;
    opacity
    :0.5;
    display
    :none;
    cursor
    :pointer
    }
    .infor:hover
    {
    filter
    : Alpha(opacity=90);
    -moz-opacity
    :.9;
    opacity
    :.9;
    }
    </style>
    <script type="text/javascript">
    window.onload
    =function(){
    getData();
    init();
    imgInfor();
    }
    var speed=0;
    var openOrClose=1;
    var check=2;
    var INIT_HEIGHT="30px";
    var inforOHeight="20px";
    var inforEHeight="320px";
    var k_menuBox=new Array();
    var k_originalHeight=new Array();
    var k_caption=new Array();
    var k_infor=new Array();
    function $(ele,tags){
    if(tags=="id"){
    return document.getElementById(ele);
    }
    else
    return getElementsBytagName(ele);
    }
    function getData(){
    var k=$("menuList","id").getElementsByTagName("div");
    for(var i=0;i<k.length;i++){
    if(k[i].className=="infor"){
    k_infor.push(k[i]);
    k[i].style.height
    =inforOHeight;
    }
    if(k[i].className=="boxStyle"){
    k_menuBox.push(k[i]);
    k_originalHeight.push(k[i].style.height);
    initHeight();
    var t=k[i].getElementsByTagName("div");
    for(var ii=0;ii<t.length;ii++){
    if(t[ii].className=="caption"){
    k_caption.push(t[ii]);
    }
    }
    }
    }
    }
    function imgInfor(){
    for(var i=0;i<k_infor.length;i++){
    k_infor[i].style.display
    ="none";
    k_infor[i].style.height
    =inforOHeight;
    k_infor[i].onclick
    =function(){
    if(check==0){
    if(this.style.height==inforOHeight){
    openIt(
    this,inforEHeight);
    }
    else{
    closeBox(
    this,inforOHeight);
    }
    }
    }
    }
    }
    function initHeight(){
    for(var i=0;i<k_menuBox.length;i++){
    k_menuBox[i].style.height
    =INIT_HEIGHT;
    }
    }
    function findIt(){
    for(var i=0;i<k_menuBox.length;i++){
    if(k_menuBox[i].style.height!=INIT_HEIGHT){
    return k_menuBox[i];
    }
    }
    return false;
    }
    function closeBox(ele,lastHeight){
    check
    =1;
    openOrClose
    =0;
    if(ele!=false){
    var h=parseInt(ele.style.height);
    if(h>parseInt(lastHeight)){
    animation(ele,lastHeight,
    50,8,"close");
    setTimeout(
    function(){closeBox(ele,lastHeight)},1);
    }
    else{
    ele.style.height
    =lastHeight;
    check
    =0;
    openOrClose
    =1;
    }
    }
    }
    //打开盒子
    function openIt(ele,lastHeight){
    check
    =1;
    openOrClose
    =0;
    var h=parseInt(ele.style.height);
    if(h<parseInt(lastHeight)){
    animation(ele,lastHeight,
    50,8,"open");
    setTimeout(
    function(){openIt(ele,lastHeight)},1);
    }
    else{
    ele.style.height
    =lastHeight;
    check
    =0;
    openOrClose
    =1;
    }
    }
    function animation(ele,lastHeight,ends,speeds,tag){
    if(Math.abs(parseInt(ele.style.height)-parseInt(lastHeight))>ends){
    if(speed<speeds)
    speed
    +=1;
    }
    else{
    if(speed!=1)
    speed
    --;
    }
    var g=parseInt(ele.style.height);
    if(tag=="open")
    g
    +=speed;
    else
    g
    -=speed;
    ele.style.height
    =g+"px";
    }
    function changeCaptionStyle(ele){
    for(var i=0;i<k_caption.length;i++){
    k_caption[i].style.backgroundColor
    ="#33FF99";
    k_caption[i].style.color
    ="#333333";
    if(k_caption[i]==ele){
    k_caption[i].style.color
    ="white";
    ele.style.backgroundColor
    ="#006666";
    }
    }
    }
    function changeCaptionStyle2(ele,bgcolor){
    if(ele.parentNode.style.height==INIT_HEIGHT){
    ele.style.backgroundColor
    =bgcolor;
    }
    }
    function init(){
    for(var i=0;i<k_caption.length;i++){
    k_caption[i].index
    = i;
    k_caption[i].onmouseover
    =function(){
    changeCaptionStyle2(
    this,"#33CC99");
    }
    k_caption[i].onmouseout
    =function(){
    changeCaptionStyle2(
    this,"#33FF99");
    }
    k_caption[i].onclick
    =function(){
    if(openOrClose==0){
    return false;
    }
    changeCaptionStyle(
    this);
    if(this.parentNode.style.height==INIT_HEIGHT){
    imgInfor();
    k_infor[
    this.index].style.display="block";
    closeBox(findIt(),INIT_HEIGHT);
    openIt(
    this.parentNode,k_originalHeight[this.index]);
    }
    else{
    imgInfor();
    changeCaptionStyle();
    closeBox(findIt(),INIT_HEIGHT);
    }
    }
    }
    }
    </script>
    </head>
    <body>
    <div id="menuList">
    <div style="height:350px;" class="boxStyle">
    <div class="caption">英国巨石阵,至今仍是谜</div>
    <a href="/" target="_blank">
    <div class="infor"></div>
    <img src="http://www.webdm.cn/images/wall5.jpg">
    </a>
    </div>
    <div style="height:350px;" class="boxStyle">
    <div class="caption">德国乡村,人与自然和谐</div>
    <a href="http://www.webdm.cn" target="_blank">
    <div class="infor"></div>
    <img src="http://www.webdm.cn/images/wall6.jpg">
    </a>
    </div>
    <div style="height:350px;" class="boxStyle">
    <div class="caption">纳差湖,一片洁净之地</div>
    <a href="/" target="_blank">
    <div class="infor"></div>
    <img src="http://www.webdm.cn/images/wall7.jpg">
    </a>
    </div>
    </div>
    </body>
    </html>
    <br>
    <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!

    文章来自:http://www.webdm.cn/webcode/3e676fb8-9feb-47a2-8d9d-3043a69203e7.html

  • 相关阅读:
    670. Maximum Swap
    653. Two Sum IV
    639. Decode Ways II
    636. Exclusive Time of Functions
    621. Task Scheduler
    572. Subtree of Another Tree
    554. Brick Wall
    543. Diameter of Binary Tree
    535. Encode and Decode TinyURL
    博客园自定义背景图片
  • 原文地址:https://www.cnblogs.com/webdm/p/1929434.html
Copyright © 2011-2022 走看看