jQuery实现样式和文字的切换

最新推荐文章于 2024-07-11 15:03:45 发布

weixin_33842328

最新推荐文章于 2024-07-11 15:03:45 发布

阅读量626

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/kitty0107/blog/1621913

本文介绍了一个简单的网页元素缩放案例，通过使用jQuery库，实现了点击按钮后网页内的特定元素在大小上的放大和缩小效果。案例中定义了两个按钮，分别用于触发元素的放大与缩小，并通过为元素添加或移除特定的CSS类来实现尺寸的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
   <style type="text/css">

   #big{
       width: 800px;
       height: 500px;
       background:gray;
   }

   .cla1{
       width: 400px;
       height: 400px;
       background: red;




   }
   .cla2{
       width: 800px;
       height: 800px;
       background: red;


   }
   a{
       text-decoration: none;
       font-size: 20px;
   }

   </style>

</head>
<body>
<div id="big">
   <div id="small" class="cla1"><a href="javascript:void(0)" class="a1">放大</a>
   <a href="javascript:void(0)" class="a2" style="display: none;">缩小</a>

   </div>
   <script type="text/javascript">

   var big=document.getElementById('big');
   var small=document.getElementById('small');
   var a1=document.querySelector('.a1');
   var a2=document.querySelector('.a2');

   $(function(){
           a1.onclick=function(){
               $("#small").addClass("cla2");
               $(".a1").hide();
               $(".a2").show();
           }
           a2.onclick=function(){
               $("#small").removeClass("cla2");
               $(".a2").hide();
               $(".a1").show();
           }

   })

   </script>

</div>

</body>
</html>

转载于:https://my.oschina.net/kitty0107/blog/1621913