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

Example code for converting html table data to Json format

The javascript function for converting <table&g...

Web standards learning to understand the separation of structure and presentation

When discussing Web standards, one thing that alwa...

A brief understanding of the three uses of standard SQL update statements

1. Environment: MySQL-5.0.41-win32 Windows XP Pro...

Example of how to enable Slow query in MySQL

Preface Slow query log is a very important functi...

Vue3 + TypeScript Development Summary

Table of contents Vue3 + TypeScript Learning 1. E...

How to use mysqldump to backup MySQL data

1. Introduction to mysqldump mysqldump is a logic...

Vue integrates Tencent Map to implement API (with DEMO)

Table of contents Writing Background Project Desc...

A practical record of an accident caused by MySQL startup

Table of contents background How to determine whe...

Review of the best web design works in 2012 [Part 1]

At the beginning of the new year, I would like to...

Detailed explanation of JavaScript prototype chain

Table of contents 1. Constructors and instances 2...

Several important MySQL variables

There are many MySQL variables, some of which are...

Installation and use of mysql mycat middleware

1. What is mycat A completely open source large d...

Angular Cookie read and write operation code

Angular Cookie read and write operations, the cod...

Introduction to deploying selenium crawler program under Linux system

Table of contents Preface 1. What is selenium? 2....

MySQL learning database backup detailed explanation

Table of contents 1.DB,DBMS,SQL 2. Characteristic...