如何缩小Html元素？

我想在html.I创建云标签是能够使用UL标签和them.Following应用CSS是我的云标签图像来创建它们：如何缩小Html元素？

enter image description here

现在我想这样的效果，当我将鼠标移动到任何文本（即任何云标签）时，请说“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>

，所以，请给一些解决方案来实现这一目标。预先感谢您。

来源

2013-10-05 sachin_ware

您可以使用CSS3转换并只增加文本的大小。谷歌的CSS转换和变换 –

这是你想要的。 - JS Fiddle

加入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%'}); 
    }); 
});

调整尺寸/定时/等合适。

干杯。

来源

2013-10-05 10:44:59 Deryck

使用jQuery .css()属性，您可以将字体大小更改为较小，从而产生“缩小”效果，但实际上字体只是较小。

例

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

此外，当你走出徘徊的“学习Java”，你可以使用事件onMouseOut的字体回到他正常的字体大小。

例

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

Fiddle

来源

2013-10-05 10:31:40 Yotam

动画方法可以与最好的效果被用作在下面的链接

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

以上方法用在HTML被称为在鼠标悬停和鼠标移开功能元件。

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

来源

2013-10-05 10:35:06

只是用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/

更新：

演示：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); 
     }

来源

2013-10-05 10:46:33

是的，它缩小了，但过渡效果没有顺利显示（如“http://jsfiddle.net/raJwX/")中显示的那样。它直接包含大小，并在鼠标移出时返回。所以请你可以建议我一个解决方案 –

@ user2681213然后更改显示：内联;显示：inline-block;正如你可以看到更新 –

CSS “改造”属性是你在找什么，这将帮助你实现这一目标。

但是我只是把你的代码，并在两个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/

希望你得到你所期待的。

P.S.我刚刚为webkit浏览器添加了css。

来源

2013-10-05 10:49:01 PSK

这只会帮助他在铬和safari – Deryck

是的没错，但他明白了。我确实在Post脚本中指定。 – PSK

是的抱歉，我发现后，发送 – Deryck

如何缩小Html元素？

回答

相关问题