堆棧內存溢出
  簡體   English   中英

如何縮小HTML元素？

[英]How to zoom out Html element?

 原文  2013-10-05 10:26:39  3   5    javascript/ jquery/ html/ css

問題描述

我正在嘗試在html中創建雲標簽，我能夠使用ul標簽並在它們上應用CSS來創建它們，以下是我的雲標簽圖像：

在此處輸入圖片說明

現在我想要這樣的效果，當我將鼠標移至任何文本（即任何雲標簽）時，說“ Learn java”標簽，它應該縮小，而當我將鼠標移出它時，它應該回到其位置。 我已經在許多網站上看到了此功能。 以下是我在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" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#java").hover(function(){
    alert("You entered on java cloud tag!");
    },function); 
});
</script>
<title>Css Globe: tag clouds</title>
<style>

body {
    margin:0;
    padding:0;
    background:#e1e1e1;
    font:80% Trebuchet MS, Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}
a{color:#3c70d0;}
h1{
    font-size:180%;
    font-weight:normal;
    margin:0 20px;
    padding:1em 0;
    }
h2{
    font-size:160%;
    font-weight:normal;
    }   
h3{
    font-size:140%;
    font-weight:normal;
    }   
img{border:none;}
pre{
    display:block;
    font:12px "Courier New", Courier, monospace;
    padding:10px;
    border:1px solid #bae2f0;
    background:#e3f4f9; 
    margin:.5em 0;
    width:500px;
    }   

#container{
    margin:0 auto;
    text-align:left;
    width:700px;
    background:#fff;
    }
#main{
    float:right;
    display:inline;
    width:380px;
    margin-left:20px;   
    }
#side{
    float:left;
    display:inline;
    width:260px;
    margin-left:20px;
    }   
#footer{
    clear:both;
    padding:1em 0;
    margin:0 20px;
    }


/* Tag cloud */

    .tags ul{
        margin:1em 0;
        padding:.5em 10px;
        text-align:center;
        background:#71b5e9 url(bg_tags.gif) repeat-x;       
        }

        .cld{
            height:100px;
            width:400px;
        }
    .tags li{
        margin:0;
        padding:0;
        list-style:none;
        display:inline;
        }
    .tags li a{
        text-decoration:none;
        color:#fff;
        padding:0 2px;  
        }
    .tags li a:hover{   
        color:#cff400;
        }       

    .tag1{font-size:100%;}
    .tag2{font-size:120%;}
    .tag3{font-size:140%;}
    .tag4{font-size:160%;}
    .tag5{font-size:180%;}

    /* alternative layout */

    .tags .alt{
        text-align:left;
        padding:0;
        background:none;
        }
    .tags .alt li{
        padding:2px 10px;
        background:#efefef;
        display:block;
        }
    .tags .alt .tag1, 
    .tags .alt .tag2, 
    .tags .alt .tag3, 
    .tags .alt .tag4, 
    .tags .alt .tag5{font-size:100%;}
    .tags .alt .tag1{background:#7cc0f4;}
    .tags .alt .tag2{background:#67abe0;}
    .tags .alt .tag3{background:#4d92c7;}
    .tags .alt .tag4{background:#3277ad;}
    .tags .alt .tag5{background:#266ca2;}

/* // Tag cloud */

</style>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

</script>

</head>

<body>  <!--******************************************************************************-->>

<div id="container">    




    <script type="text/javascript" src="http://cssglobe.com/ads/blogsponsor.js"></script>



    <div id="side">

        <h2>Side column (Tag Cloud)</h2>

        <div class="tags">
            <ul class="cld">
                <li class="tag1" id="java"><a href="https://www.google.com">Learn java</a></li> 
                <li class="tag2"><a href="#">Find Markets</a></li>
                <li class="tag3"><a href="#">sitemap</a></li>
                <li class="tag2"><a href="#">Sales</a></li>
                <li class="tag4"><a href="#">Gohome</a></li>
                <li class="tag1"><a href="#">Movies</a></li>
                <li class="tag1"><a href="#">It Jobz</a></li>
                <li class="tag5"><a href="#">Gym</a></li>
                <li class="tag2"><a href="#">Sea food</a></li>
                <li class="tag1"><a href="#">Hospital</a></li>
                <li class="tag3"><a href="#">Smart phone</a></li>
                <li class="tag4"><a href="#">Pizza </a></li>
                <li class="tag1"><a href="#">Aerobics</a></li>
                <li class="tag5"><a href="#">Electronics</a></li>
                <li class="tag1"><a href="#">Anti-Virus</a></li>
                <li class="tag2"><a href="#">Travel</a></li>
            </ul>
        </div>
    </div>



</div>

</body>
</html>

，因此請提供一些解決方案以實現此目的。 先感謝您。

5 個解決方案

解決方案1
 3  2013-10-05 10:46:33

只需使用css3比例 

.element{
  -webkit-transform:scale3d(1,1,1);
  -moz-transform:scale3d(1,1,1);
  -transform:scale3d(1,1,1);
  -webkit-transition:300ms ease-in-out all;
  -moz-transition:300ms ease-in-out all;
  -transition:300ms ease-in-out all;
}

.element:hover{
  -webkit-transform:scale3d(1.4,1.4,1.4);
  -moz-transform:scale3d(1.4,1.4,1.4);
  -transform:scale3d(1.4,1.4,1.4);
}

演示： http : //jsfiddle.net/raJwX/

**

  1. 更新：

**

演示： http ： //jsfiddle.net/raJwX/1/ 

    .tags li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    -webkit-transform:scale3d(1,1,1);
    -moz-transform:scale3d(1,1,1);
    -transform:scale3d(1,1,1);
    -webkit-transition:300ms ease-in-out all;
    -moz-transition:300ms ease-in-out all;
    -transition:300ms ease-in-out all;
    }
    .tags li a{
        text-decoration:none;
        color:#fff;
        padding:0 2px;  
        }
    .tags li:hover{   
        -webkit-transform:scale3d(1.4,1.4,1.4);
        -moz-transform:scale3d(1.4,1.4,1.4);
        -transform:scale3d(1.4,1.4,1.4);
        }

解決方案2
 1 已采納  2013-10-05 10:44:59

這就是你想要的。 -JS小提琴

添加到CSS： 

.tags ul li {
    -moz-transition: font-size 0.2s;
    -webkit-transition: font-size 0.2s;
    transition: font-size 0.2s;
}

將jQuery替換為： 

$(document).ready(function(){
  $("#java").hover(function(){
      $(this).css({'fontSize': '150%'});
  }, function(){
      $(this).css({'fontSize': '100%'}); 
  });
});

適當調整大小/時間/等。

干杯。

解決方案3
 1  2013-10-05 10:49:01

您正在尋找CSS “ transform”屬性，這將幫助您實現這一目標。

但是我只是拿了你的代碼並在兩個CSS類中進行了更改 

 .tags li a{
        text-decoration:none;
        display:inline-block;
        -webkit-transition: all .2s ease-in-out;
        color:#fff;
        padding:0 2px;  
        }
    .tags li a:hover{   
        color:#cff400;
        -webkit-transform: scale(1.3);
        }

供參考http://jsfiddle.net/yNt6X/3/

希望您能得到想要的東西。

PS我剛剛為webkit瀏覽器添加了CSS。

解決方案4
 0  2013-10-05 10:31:40

使用jQuery .css()屬性，您可以將字體大小更改為較小，從而產生“縮小”效果，但實際上字體只是較小。

例 

<script>
$(document).ready(function(){
  $("#java").hover(function(){
    $("#java").css('font-size', "10px");
  }); 
});
</script>

另外，當您將鼠標懸停在“ Learn Java”上時，可以使用onMouseOut事件將字體恢復為其正常的字體大小。

例 

<script>
$(document).ready(function(){
  $("#java").mouseout(function(){
    $("#java").css('font-size', "18px"); // Assuming that normal font is 18px.
  }); 
});
</script>

小提琴

解決方案5
 0  2013-10-05 10:35:06

可以在以下鏈接中使用效果最佳的動畫方法 

  $(this).animate({width: "500px"}, 'slow');

上面的方法在html元素上的mouseover和mouseout函數上被調用。

http://jsfiddle.net/jquerybyexample/nPeaV/

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 放大或縮小 HTML 滾動元素 如何從html容器中縮小圖像 放大、縮小 html 中的功能 如何防止HTML畫布上的縮小 如何將 d3.zoom() 應用於 HTML 元素 如何在點擊所有img html標簽時添加放大/縮小？ 我們如何在html5和javascript中放大和縮小圖表？ 如何禁用頁面上某些HTML元素的縮放效果 如何動態縮放 HTML 元素而不影響其父元素？ 如何確定一個HTML元素是否在另一個HTML元素后面？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM