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 Series 12 Backup and Recovery

Table of contents Tutorial Series 1. Backup strat...

Basic usage examples of Vue named slots

Preface Named slots are bound to elements using t...

Implementation of comparison, sorting and other operations on varchar type dates in MySQL

When using MySQL, dates are generally stored in f...

MySQL 8.0.15 version installation tutorial connect to Navicat.list

The pitfalls 1. Many tutorials on the Internet wr...

About the pitfalls of implementing specified encoding in MySQL

Written in front Environment: MySQL 5.7+, MySQL d...

Why do select @@session.tx_read_only appear in DB in large quantities?

Find the problem When retrieving the top SQL stat...

CSS position fixed left and right double positioning implementation code

CSS Position The position attribute specifies the...

HTML Web Page List Tags Learning Tutorial

HTML web page list tag learning tutorial. In HTML ...

Should I use Bootstrap or jQuery Mobile for mobile web wap

Solving the problem Bootstrap is a CSS framework ...

Docker configures the storage location of local images and containers

Use the find command to find files larger than a ...

How to center the entire page content so that the height can adapt to the content and automatically expand

How to center the entire page content and how to m...

Detailed explanation of ssh password-free login configuration method (pictures and commands)

First, let me explain that what we want to do is ...

Detailed explanation of using backgroundImage to solve the image carousel switching

Implementing carousel with a single DOM node You ...

Three commonly used MySQL data types

Defining the type of data fields in MySQL is very...

Solve the problem of yum installation error Protected multilib versions

Today, when installing nginx on the cloud server,...