javascript经典特效分享 手风琴、轮播图、图片滑动

JavaScript经典特效分享

在前端开发中,JavaScript不仅可以用于数据交互、页面交互等,还可以用来实现各种各样的特效,比如手风琴、轮播图、图片滑动等。本文将一一介绍这三种常见的JavaScript特效的实现方法。

手风琴效果

手风琴效果就是指页面上有多个盒子,当用户单击某个盒子时,该盒子会变大,同时其他盒子变小。这种效果常用于呈现一些重要或突出的内容。

下面是手风琴效果的实现方法:

  1. HTML部分
<div class="accordion">
  <div class="accordion-item">盒子1</div>
  <div class="accordion-item">盒子2</div>
  <div class="accordion-item">盒子3</div>
</div>
  1. CSS部分
.accordion-item {
  width: 100%;
  height: 50px;
  background-color: #e0e0e0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.5s ease;
}

.accordion-item.active {
  width: 80%;
  height: 200px;
  border-radius: 10px;
  background-color: #5b9aff;
  color: #fff;
}
  1. JavaScript部分
const accordionItems = document.querySelectorAll('.accordion-item');

accordionItems.forEach(item => {
  item.addEventListener('click', event => {
    accordionItems.forEach(item => {
      item.classList.remove('active');
    })
    event.target.classList.add('active');
  });
});

轮播图

轮播图是网站常见的一种图片展示方式,它可以用来展示产品图片、文章配图等。

下面是轮播图的实现方法:

  1. HTML部分
<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="./img/1.jpg" alt="图片1">
    </div>
    <div class="carousel-item">
      <img src="./img/2.jpg" alt="图片2">
    </div>
    <div class="carousel-item">
      <img src="./img/3.jpg" alt="图片3">
    </div>
  </div>
  <div class="carousel-control">
    <span class="prev">&lt;</span>
    <span class="next">&gt;</span>
  </div>
</div>
  1. CSS部分
.carousel {
  width: 100%;
  overflow: hidden;
}

.carousel-inner {
  display: flex;
  transition: all 0.5s ease;
}

.carousel-item {
  width: 100%;
  flex: 0 0 100%;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 1;
  pointer-events: none;
}

.carousel-control span {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-control span:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
  1. JavaScript部分
const carouselInner = document.querySelector('.carousel-inner');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

const imgCount = carouselInner.querySelectorAll('.carousel-item').length;
let imgIndex = 0;

prevBtn.addEventListener('click', () => {
  imgIndex--;
  if (imgIndex < 0) {
    imgIndex = imgCount - 1;
  }
  slideImg(imgIndex);
});

nextBtn.addEventListener('click', () => {
  imgIndex++;
  if (imgIndex >= imgCount) {
    imgIndex = 0;
  }
  slideImg(imgIndex);
});

function slideImg(index) {
  carouselInner.style.transform = `translateX(-${index * 100}%)`;
}

图片滑动

图片滑动是指页面上有多张图片,当用户鼠标悬停在某张图片上时,该图片会向左或向右滑动一定的距离,以显示隐藏内容。

下面是图片滑动的实现方法:

  1. HTML部分
<div class="image-list">
  <div class="image-item">
    <img src="./img/1.jpg" alt="图片1">
    <div class="image-desc">图片1的描述</div>
  </div>
  <div class="image-item">
    <img src="./img/2.jpg" alt="图片2">
    <div class="image-desc">图片2的描述</div>
  </div>
  <div class="image-item">
    <img src="./img/3.jpg" alt="图片3">
    <div class="image-desc">图片3的描述</div>
  </div>
</div>
  1. CSS部分
.image-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.image-item {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.image-item:hover .image-desc {
  left: 0;
}

.image-item img {
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
}

.image-desc {
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  transition: all 0.5s ease;
}

以上是三种常见的JavaScript特效的实现方法,希望对大家有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript经典特效分享 手风琴、轮播图、图片滑动 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • html5如何及时更新缓存文件(js、css或图片)

    HTML5通过使用缓存清单(Cache Manifest)功能,可以实现对于JavaScript、CSS、图片等静态资源的缓存更新。下面是步骤: 创建缓存清单文件 通过在HTML文档头部添加manifest属性引用缓存清单文件。缓存清单文件是一个文本文件,以“.appcache”扩展名结尾,其中包含需要缓存的资源以及清单信息。请注意,缓存清单文件必须在Web…

    css 2023年6月9日
    00
  • 详解 Flask 请求对象使用方法

    Flask 的请求对象(request)是在处理请求期间随请求上下文创建的。它允许您访问当前请求的数据,例如表单数据,URL 参数,请求头等。 下面是 Flask 请求对象的完整攻略: 导入 Flask 请求模块和 Flask 应用程序实例 from flask import Flask, request app = Flask(__name__) 请求上下…

    Flask 2023年3月13日
    00
  • jQuery+CSS3实现四种应用广泛的导航条制作实例详解

    下面给出“jQuery+CSS3实现四种应用广泛的导航条制作实例详解”的完整攻略。 1.前言 导航条是Web页面中非常重要的组成部分,良好的导航条可以让用户更加方便快捷地进行网站浏览。以下攻略介绍了使用jQuery和CSS3制作四种常见的导航条的方法,包括菜单栏、列表导航、圆形导航和响应式导航。 2.实现方法 2.1菜单栏 菜单栏是Web页面中最常见的导航条…

    css 2023年6月10日
    00
  • div+css与xhtml+css分别是什么意思?

    div+CSS 和 XHTML+CSS 都是 Web 前端开发中常用的技术,用于实现网页的布局和样式。下面将详细讲解这两种技术的含义和使用方法。 1. div+CSS 是什么意思? div+CSS 是一种基于 div 元素和 CSS 样式的网页布局技术。div 元素是 HTML 中的一个块级元素,可以用于划分网页的不同区域,然后使用 CSS 样式来控制这些区…

    css 2023年5月18日
    00
  • 完美解决jQuery fancybox ie 无法显示关闭按钮的问题

    针对这个问题,我将提供以下完整攻略来解决: 问题背景 当使用jQuery fancybox插件来展示图片或其他内容时,有时在IE浏览器中会出现无法显示关闭按钮的问题,即使已经给插件设置了相应参数。 解决方案 方案一:修改fancybox默认样式 使用Fancybox时,插件会自动添加一些样式到页面中。其中一个为“fancybox-close”样式,但是由于I…

    css 2023年6月9日
    00
  • CSS代码 注释的3种方法

    CSS代码注释指的是在CSS代码中添加注释以便于理解和维护代码,在这篇文章中,我们将介绍CSS代码注释的3种方法。 方法1:单行注释 单行注释以//开头,其后是注释内容,直到行尾为止。单行注释可以用于单独的一行代码或一条CSS规则的末尾,来对CSS样式进行描述。 示例代码如下: p { font-size: 16px; /* 设置段落字体大小为16px */…

    css 2023年6月9日
    00
  • 简单的二级菜单导航实现css代码

    我来为你详细讲解如何实现简单的二级菜单导航的 CSS 代码。 一、HTML 结构 首先要确定好导航的 HTML 结构。在本次攻略中,我们将使用一个无序列表 <ul> 来构建导航栏。每个一级菜单都是一个 <li> 元素,并包含一个链接,同时如果有子菜单,则需要在该 <li> 元素中嵌套一个新的 <ul> 列表用于…

    css 2023年6月10日
    00
  • 基于Vue实现平滑过渡的拖拽排序功能

    下面是关于“基于Vue实现平滑过渡的拖拽排序功能”的完整攻略。 一、实现思路 本文介绍的是基于Vue实现拖拽排序功能,其主要思路包括以下几个步骤: 使用Vue.js框架搭建页面框架,引入相关依赖包; 定义一个数据源用于存储待排序的数据; 在页面中渲染数据源,并为每一个元素添加拖拽事件; 对于每一个元素,当其开始拖拽时,记录其位置数据,并设置可拖拽样式; 当元…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部