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

发布于:2023-01-20 ⋅ 阅读:(10) ⋅ 点赞:(0) ⋅ 评论:(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>


网站公告

欢迎关注微信公众号

今日签到

点亮在社区的每一天
签到