个人中心
gpt4 book ai didi

javascript - 如何缩小Html元素？

转载 作者：行者123 更新时间：2023-11-30 08:49:19 24 4
gpt4 key购买 nike

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

,所以请提供一些解决方案来实现这一目标。提前谢谢你。

最佳答案

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

关于javascript - 如何缩小Html元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19196701/

24 4 0
文章推荐： python - Keras 输入数据格式
文章推荐： machine-learning - 为什么 imagenet 数据集标签存在差异？
文章推荐： javascript - npm 安装 + 额外命令
文章推荐： JavaScript:将变量设为默认值？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com