[Summary] 3 interesting little functions that JavaScript can implement

JavaScript is a scripting language widely used in web front-end development and has rich resources in implementing small functions. This article will introduce several interesting small function implementations to help readers further understand the application of JavaScript.

1. Mouse follower

The mouse follower is a small function that allows elements to move as the mouse moves. This dynamic effect gives people an interactive feeling and is suitable for website decoration.

Implementation method:

1. First define an element in the HTML file that needs to follow the mouse movement, such as an icon or text.

<div class="follow"></div>

2. Set the basic style in CSS and set the position of the element to fixed positioning.

.follow {
   ...
   position: fixed;
}

3. Add mouse listening events in JavaScript, change the position of the element, and make it move with the mouse position.

document.addEventListener('mousemove', (event) => {
  const followItem = document.querySelector('.follow');
  followItem.style.left = event.clientX + 'px';
  followItem.style.top = event.clientY + 'px';
})

2. Picture carousel

Picture carousel is an excellent interactive effect that often appears on websites. Its function is to switch between different picture display contents. Switch between different images, resulting in a continuous and smooth animation effect.

Implementation method:

1. First define several pictures in the HTML file according to the design requirements. You can use the img tag or set the background image in CSS.

<div class="slider">
    <img src="./img/1.jpg" />
    <img src="./img/2.jpg" />
    <img src="./img/3.jpg" />
</div>

2. Set the container style of the image carousel in CSS to build the carousel frame.

.slider {
   width: 100%;
   height: 500px;
   overflow: hidden;
  position: relative;
}

3. Add a timer in JavaScript to control the rotation of images.

setInterval(() => {
   // 定时器要做的事情
}, 2000); // 每2秒执行一次

4. Inside the timer, use the transform property of CSS to achieve the switching animation effect of the image.

let index = 0; // 初始值为0
const slider = document.querySelector('.slider');
const imgs = slider.children; // 获取容器内所有img元素
setInterval(() => {
   index++;
   if(index === imgs.length) {
      index = 0;
   }
   const showImg = imgs[index];
   showImg.classList.add('show');
   ... // 隐藏其他图片
}, 2000);

3. Expand and collapse

In a web page, we often need to set some initial hiding, and users can click on the expanded function modules. The implementation of this functional module can be completed using JavaScript and CSS.

Implementation method:

1. First write the modules that need to be expanded and collapsed in the HTML file.

<div class="box">
   <div class="title">更多</div>
   <div class="content" style="display: none">
      ...
   </div>
</div>

The style attribute of the content element sets display to none, which means that the element is hidden in the initial state.

2. Set the basic style in CSS and add an event listener for the click event

.box .title {
   cursor: pointer;
}

3. In the JavaScript file, use the addEventListener method to listen to the click event and determine the status of the content element , use the display attribute of CSS to switch the expand and collapse function.

const box = document.querySelector('.box');
box.addEventListener('click', () => {
   const content = box.querySelector('.content');
   if(content.style.display === 'none') {
      content.style.display = 'block';
   } else {
      content.style.display = 'none';
   }
});

The above are the implementation methods of three small functions. As long as we are good at using the basic syntax of JavaScript and related library files, we can achieve rich interactive effects in web pages. Readers can try to apply these methods in their projects to improve their front-end development skills.

The above is the detailed content of [Summary] 3 interesting little functions that JavaScript can implement. For more information, please follow other related articles on the PHP Chinese website!