javascript - 如何缩小 Html 元素？

Question

我正在尝试在 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>

,所以请给出一些解决方案来实现这一点。先感谢您。

score 3 · Accepted Answer

只需使用 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);
        }

score 1 · Accepted Answer

这就是你想要的。- 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%'}); 
  });
});

根据需要调整大小/时间/等。

干杯。

score 1 · Accepted Answer

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/

希望你得到你正在寻找的东西。

PS 我刚刚为 webkit 浏览器添加了 css。

score 0 · Accepted Answer

使用 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>

小提琴

score 0 · Accepted Answer

可以使用动画方法以达到最佳效果，如以下链接中使用的那样

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

以上方法在 html 元素上的 mouseover 和 mouseout 函数上调用。

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

javascript - 如何缩小 Html 元素？

5 回答 5

Related

Reference