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

    目录

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

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

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

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

    案例：网站换肤

    案例：图片放大

    案例：网站换肤

    1. 分析：

    关键点：

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

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

    步骤：

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

     

    1. 代码实现：

    2. 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. 代码实现：

     

    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>

  • 相关阅读:
    分享Redshift渲染器的去噪方法技巧，一定要看看
    Tensorflow模型各部分自定义方式
    数据库 1.关系
    重磅｜ Falcon 180B 正式在 Hugging Face Hub 上发布！
    插入排序算法（Python版）
    Cookie和Session的工作流程是什么样的？5分钟学懂：简易用户登录（前端+后端+数据库）
    [附源码]JAVA毕业设计九宫格日志网站（系统+LW）
    《谷粒商城》开发记录 12：购物车和订单
    threejs 加载各种格式的3d模型 封装
    【漏洞复现-骑士cms-代码执行】vulfocus/骑士cms_cve_2020_35339
  • 原文地址：https://blog.csdn.net/m0_64550837/article/details/126311878