• 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>

  • 相关阅读:
    掌握Linux技能：关键命令与测试题解析
    软件测试肖sir__python之ui自动化测试框架作业案例
    数据导入与预处理-拓展-pandas时间数据处理02
    如何使用Docker构建前端项目
    [附源码]计算机毕业设计springboot疫情管理系统
    【Tikhonov】基于Tikhonov正则化的图像超分辨率重建
    [SystemC]SystemC中的模块和程序
    【多任务案例：猫狗脸部定位与分类】
    flink实现kafka、doris精准一次说明
    2023-python-解释器是什么东西？
  • 原文地址：https://blog.csdn.net/m0_64550837/article/details/126311878