Javascript知识【案例：网站换肤&案例：图片放大】

发布于：2023-01-20 ⋅ 阅读:(255) ⋅ 点赞:(0)

目录

  • 💂 个人主页: 爱吃豆的土豆
  • 🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主
  • 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

  • 🏆人必有所执，方能有所成！

  • 🌈欢迎加入社区，福利多多哦！土豆社区

  • 🐋希望大家多多支持😘一起进步呀！

案例：网站换肤

案例：图片放大

案例：网站换肤

  1. 分析：

关键点：

  1. jQuery  click事件
  2. jquery操作css样式： css("属性名")

css("属性名","属性值");

步骤：

  1. 页面加载完成时，获取三个不同颜色的小div
  2. 给三个div绑定点击事件
  3. 点击事件中：获取当前div的backgourd-color值
  4. 把backgourd-color值赋值给大div

 

  1. 代码实现：

  2. <!DOCTYPE html>
    <html>
       <head>
          <meta charset="UTF-8">
          <title></title>
          <style>
             .buttonDiv{
                width: 25px;
                height: 25px;
                cursor: pointer;
             }
          </style>
          <script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
          <script>
             //1、页面加载完成时，获取三个不同颜色的小div
             $(function () {
                var d1 = $("#d1");
                var divs = $(".buttonDiv");
                //2、给三个div绑定点击事件
                divs.click(function () {
                   //3、点击事件中：获取当前div的background-color值
                   var bgColor = $(this).css("background-color");
                   //4、把backgourd-color值赋值给大div
                   d1.css("background-color",bgColor);
                });
             });
          </script>
       </head>
       <body>
          <div id="d1" style="width: 100px;height: 100px;border: 10px solid black;"></div>
          <div class="buttonDiv" style="background-color: red;"></div>
          <div class="buttonDiv" style="background-color: yellow;"></div>
          <div class="buttonDiv" style="background-color: blue;"></div>
          
       </body>
    </html>

关键点：

1，jQuery  click事件

2，jQuery操作css样式：css（“属性名”）css（“属性名”，“属性值”）

注意：进行css操作时，赋值也是为行内样式进行赋值 

案例：图片放大

 

  1. 分析：

关键点：

  1. jQuery事件：mouseover，mouseout
  2. jQuery自定义动画：animate

步骤：

  1. 页面加载完成时，为三张图片分别绑定mouseover，mouseout事件
  2. mouseover事件：开启自定义动画，宽和高都是原来的两倍
  3. mouseout事件：开启自定义动画，宽和高还原
  1. 代码实现：

 

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <style>
         img{
            width:80px;
            height:80px;
            border: 2px solid black;
            
         }
      </style>
      <script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
      <script>
   //1、页面加载完成时，为三张图片分别绑定mouseover，mouseout事件
   $(function () {
      var arr = $("p>img");
      arr.mouseover(function () {
         $(this).stop();
         //2、mouseover事件：开启自定义动画，宽和高都是原来的两倍
         $(this).animate({
            width:'160px',
            height:'160px'
         },500);
      }).mouseout(function () {
         //鼠标移出时，如果还在进行放大的动画，就会导致动画队列里数据越来越多，效果越来越延迟
         //鼠标移出时，将原先动画停止
         $(this).stop();
         //3、mouseout事件：开启自定义动画，宽和高还原
         $(this).animate({
            width:'80px',
            height:'80px'
         },500);
      });
   });
</script>


   </head>
   <body>
      <p align="center">
         <img src="img/p1.png"/>
         <img src="img/p2.png"/>
         <img src="img/p3.png"/>
      </p>
      
   </body>
</html>
本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布