jquery小练习

最新推荐文章于 2024-07-30 23:06:43 发布

江湖没什么好的

最新推荐文章于 2024-07-30 23:06:43 发布

阅读量130

点赞数 2

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/2301_81142776/article/details/140632459

版权

1使用jquery完成点击图片变换图片颜色

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apply Filters to Image with jQuery</title>
<style>
    .image-container {
        position: relative;
        display: inline-block;
    }
    .image-container img {
        max-width: 100%;
        height: auto;
    }
    .filter-button {
        margin-right: 10px;
    }
</style>
</head>
<body>

<div class="image-container">
    <img src="https://i2.hdslb.com/bfs/archive/a3ab8844e8182b09eb0da878420c10d106b7a517.jpg" id="myImage" alt="Example Image" width="600px">
</div>

<div>
    <button class="filter-button" data-filter="none">Reset</button>
    <button class="filter-button" data-filter="grayscale(100%)">Grayscale</button>
    <button class="filter-button" data-filter="sepia(100%)">Sepia</button>
    <button class="filter-button" data-filter="invert(100%)">Invert</button>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // 点击按钮应用滤镜效果
    $('.filter-button').click(function() {
        var filterValue = $(this).data('filter');
        $('#myImage').css('filter', filterValue);
    });

    // 点击重置按钮恢复原始图像
    $('.filter-button[data-filter="none"]').click(function() {
        $('#myImage').css('filter', 'none');
    });
});
</script>

</body>
</html>

2使用js的dom操作完成背景颜色渐变方向变换

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Gradient Direction on Background Click</title>
<style>
  .gradient-container {
    width: 100%;
    height: 300px;
    background: linear-gradient(to right, #ff8a00, #da1b60);
    transition: background 0.5s ease;
    cursor: pointer;
  }
</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var direction = 'to right'; // 初始渐变方向
    var gradientContainer = document.querySelector('.gradient-container');
    
    gradientContainer.addEventListener('click', function() {
      // 切换渐变方向
      if (direction === 'to right') {
        gradientContainer.style.background = 'linear-gradient(to bottom, #ff8a00, #da1b60)';
        direction = 'to bottom';
      } else {
        gradientContainer.style.background = 'linear-gradient(to right, #ff8a00, #da1b60)';
        direction = 'to right';
      }
    });
  });
</script>
</head>
<body>
  <div class="gradient-container"></div>
</body>
</html>