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

举报
爱吃豆的土豆 发表于 2022/09/25 03:08:35 2022/09/25
【摘要】 目录 💂 个人主页: 爱吃豆的土豆🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 🏆人必有所执，方能有所成！ 🌈欢迎加入社区，福利多多哦！土豆社区 🐋希望大家多多支持😘一起进步呀！ 案例：网站换...

目录

  • 💂 个人主页: 爱吃豆的土豆
  • 🤟 版权: 本文由【爱吃豆的土豆】原创、在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>

文章来源: qianxu.blog.csdn.net，作者：爱吃豆的土豆，版权归原作者所有，如需转载，请联系作者。

原文链接：qianxu.blog.csdn.net/article/details/126311878

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
JavaScript 网站
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入