Native JavaScript to achieve slide effects

Native JavaScript to achieve slide effects

When we create a page, especially a homepage, we usually design a navigation bar that can link to other main pages of the entire website, or a paragraph of website introduction text will include the jump to this page. Usually, we will use the title attribute to add some explanatory text to these jump links, but we can enhance the user experience by making a slide demo. When the user moves the mouse to a link, the corresponding image preview will appear below. This not only beautifies the page, but also greatly increases the interactivity of the entire website. Let's make a beautiful slideshow script together.

Preparation: Before making the script, you need to make a picture that should show all the preview effects, as shown below:

index.html

Make an ordered list and add some page links

<body>
 <h1>Simple animation production</h1>
 <p>Link jump target display</p>
 <ol id="list">
 <li>
 <a href="list1.html" >First</a>
 </li>
 <li>
 <a href="list2.html" >Second</a>
 </li>
 <li>
 <a href="list3.html" >Third</a>
 </li>
 </ol>
 <!--Dynamically added image display area>-->
<script src="script.js"></script>
</body>

style.css

Add some styles to this navigation bar

ol{
 padding-left: 20px;
}
ol li{
 display: inline;
 margin-right: 10px;
}
#view{
 width: 600px;
 height: 200px;
 position: absolute;
}
#slideShow{
 width: 200px;
 height: 200px;
 overflow: hidden;
 position: relative;
}

script.js

Implementation ideas:

Before creating a script, let's organize our thoughts and determine what we want to do?
1. Create some nodes to display preview images
2. Add onmouseover event to the a tag
3. The animation effect is completed through the setTimeout() function and the movement of the left and top offsets of the image element (the left and top attributes must be converted to integers when obtaining the set attributes)

/*Shared load*/
function addLoadEvent(fun){
 var oldLoad = window.onload;
 if(typeof oldLoad != "function"){
  window.onload = fun;
 }else{
  window.onload = function(){
   oldLoad();
   fun();
  }
 }
}

/*insertAfter*/
function insertAfter(newNode,oldNode){
 var parent = oldNode.parentNode;
 if(parent.lastChild == oldNode){
  parent.appendChild(newNode);
 }else{
  parent.insertBefore(newNode,oldNode.nextSibling);
 }
}

function show(){
 /* Backward compatibility */
 if(!document.getElementById) return false;
 if(!document.getElementsByTagName) return false;
 if(!document.createElement) return false;

 /*Get the list of lists*/
 var list = document.getElementById("list");

 /*Create an image display area*/
 /*Outer div*/
 var div = document.createElement("div");
 div.setAttribute("id","slideShow");
 /*img*/
 var img = document.createElement("img");
 img.setAttribute("id","view");
 img.setAttribute("src","image.jpg");
 img.setAttribute("alt","Image preview");
 /*Add the insertAfter() function to ensure that the div is immediately after the list*/
 insertAfter(div,list);
 div.appendChild(img);

 /*bind event*/
 var a = list.getElementsByTagName("a");
 a[0].onmouseover = function(){
  moveElement("view",0,0,10);
 };
 a[1].onmouseover = function(){
  moveElement("view",-200,0,10);
 };
 a[2].onmouseover = function(){
  moveElement("view",-400,0,10);
 };
}


/*The meaning of the movement* parameters: the id of the element where the image is located; the offset to the left that the image should be moved; the upper offset; the time*/
function moveElement(elementID,left,top,interval){
 /* Backward compatibility */
 if(!document.getElementById) return false;
 if(!document.getElementById(elementID)) return false;

 /*Get the image*/
 var img = document.getElementById(elementID);

 /*Determine whether the current element is already in an animation function*Prevent animation accumulation*/
 if(img.moveNow){
  /* Clear the animation stack */
  clearTimeout(img.moveNow);
 }

 /*Determine whether the element has left and top set*/
 if(!img.style.left){
  img.style.left = "0px";
 }
 if(!img.style.top){
  img.style.top = "0px";
 }


 /*Get the current position of the image* The value obtained at this time is in string format, use parseInt() to force it to be converted into a string*/
 var oldLeft = parseInt(img.style.left);
 var oldTop = parseInt(img.style.top);

 /*Compare the current position with the target position*/
 if(oldLeft == left && oldTop == top){
  return true;
 }

 /*To ensure user experience, the movement should be faster when the moving distance is large*When the moving distance is small, it can be slower*Judge the moving distance based on the distance difference, and move 1/10 of the distance difference each time
 */
 /*The dist variable is used to store the distance between the current offset and the target offset*/
 var dist = 0;
 if(oldLeft < left){
  /*ceil() rounds up to prevent decimals and numbers less than 1*/
  dist = Math.ceil((left-oldLeft)/10);
  oldLeft = oldLeft+dist;
 }
 if (oldLeft > left) {
  dist = Math.ceil((oldLeft-left)/10);
  oldLeft = oldLeft - dist;
 }
 if(oldTop < top){
  dist = Math.ceil((top-oldTop)/10);
  oldTop = oldTop+dist;
 }
 if(oldTop > top){
  dist = Math.ceil((oldTop-top)/10);
  oldTop = oldTop - dist;
 }

 /*move*/
 img.style.left = oldLeft+"px";
 img.style.top = oldTop+"px";

 /*Call function*/
 var result = "moveElement('"+elementID+"',"+left+","+top+","+interval+")";
 /*Set the function that executes the animation as an attribute of this element*/
 img.moveNow = setTimeout(result,interval);
}

addLoadEvent(show);

Final execution effect

At this time, when we move the mouse to different list items, the pictures under the list will move to the corresponding preview image position.

At this point, a simple slideshow demo has been completed.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Implementation of js slides
  • JavaScript to achieve the slide effect source code of picture switching
  • Beautiful js tab image rotation effect code (customizable slideshow and image buffer switching)
  • JS+FLASH slideshow picture script, the code is organized to make it more convenient to call!
  • Using JavaScript to create maintainable slideshow code
  • js to achieve slide show picture sample code
  • Slideshow switching effect implemented by JS
  • JS realizes the effect of playing multiple pictures in turn
  • How to implement Taobao slideshow effect using JS
  • js with some automatic picture carousel slideshow special effects code sharing

<<:  The simplest solution to the problem that Sublime Text cannot input Chinese in Ubuntu

>>:  How to modify the default storage engine in MySQL

Recommend

Mysql master-slave synchronization configuration scheme under Centos7 system

Preface Recently, when working on a high-availabi...

Detailed explanation of installing jdk1.8 and configuring environment variables in a Linux-like environment

The configuration is very simple, but I have to c...

WeChat applet implements SMS login in action

Table of contents 1. Interface effect preview 2.u...

Introduction to reactive function toRef function ref function in Vue3

Table of contents Reactive Function usage: toRef ...

CSS3 border effects

What is CSS# CSS (abbreviation of Cascading Style...

Solution to the problem of Failed when configuring IDEA to connect to MYSQL database

This article mainly introduces the solution to th...

Mysql slow query optimization method and optimization principle

1. For comparison of date size, the date format p...

Introduction to container data volumes in Docker

Table of contents Docker container data volume Us...

How to add a disk in Vmware: Expand the disk

This article describes how to add or expand a dis...

MySQL Best Practices: Basic Types of Partition Tables

Overview of MySQL Partitioned Tables As MySQL bec...

Introduction to Nginx log management

Nginx log description Through access logs, you ca...

MySql grouping and randomly getting one piece of data from each group

Idea: Just sort randomly first and then group. 1....

Detailed explanation of how to create multiple instances of MySQL 5.6 in centos7 environment

This article describes how to create multiple ins...

Design and implementation of supermarket commodity management system based on Mysql+JavaSwing

Table of contents 1. Function Introduction 2. Key...

Graphic tutorial on installing the latest version of MySQL server on Windows 7 64 bit

Recently, I have been studying the MySQL database...