Question

我正在尝试在html中创建云标签。我可以使用ul标签创建它们并在它们上应用css。以下是我的云标记图像：

enter image description here

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

，所以请给出一些解决方案来实现这个目标。提前谢谢。

Answer 1

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

Answer 2

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

根据需要调整尺寸/时间等。

干杯。

Answer 3

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/

希望你得到你想要的东西。

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

Answer 4

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

Fiddle

Answer 5

Animate方法可以在下面的链接

中使用效果最佳

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

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

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

如何缩小Html元素？

5 个答案: