Javascript mouse moves up the slider to follow the effects of code sharing

  • 2020-03-29 23:57:36
  • OfStack

Here's a screenshot.

< img border = 0 SRC = "/ /" >

The mouse moves to the corresponding classification, the red triangle below will automatically follow, slowly follow.
It doesn't matter how many there are.
Javascript code:

function changeCoord(id, left) {
 $$(id).style.left = left;
function $$(id) {
 return document.getElementById(id);
function $$$(id) {
 return document.getElementsByClassName(id)[0];
function indexOf(arry, obj) {
 for (var i = 0; i < arry.length; i++) {
  if (obj == arry[i]) {
   return i;
window.onload = function() {
 //Register events for all sliders on the page
 //Products-box-center parent container object

  var obj = document.getElementsByClassName('products-box-center');
  for(var i=0;i<obj.length;i++){
   var base=obj[i].getElementsByClassName('products-box-center-title')[0]; //Gets each heading
   var elems=base.getElementsByClassName('products-items-title');
    for(var j=0;j<elems.length;j++){
     var elem=elems[j];
      //Gets the parent of the parent container of the current object
      var baseElem=this.parentElement.parentElement;
      var baseIndex=indexOf(obj,baseElem)+1;

      //Gets the coordinates of the current object
      var left = this.offsetLeft;

      //Gets the corresponding slider object
      var slider=$$('products-triangle-'+baseIndex);

      //Change the coordinates of the slider = left + "px";
      //Changes the color of the current object and other objects = "red";
      //Gets all the elements under the current parent container
      var notes=this.parentElement.getElementsByClassName('products-items-title');
      for(var k=0;k<notes.length;k++){



HTML code:

 <div class="products-box-center">
    <div class="products-box-center-title">
     <div class="products-items-title products-focus-text"><h3> The latest goods </h3></div>
     <div class="products-items-title"><h3> The notebook </h3></div>
     <div class="products-items-title"><h3> Digital audio </h3></div>
     <div class="products-items-title"><h3> accessories </h3></div>
     <div class="products-items-title"><h3> Office print </h3></div>
     <div class="products-bottom-triangle" id="products-triangle-${index.count}"><b class="triangle"></b></div>

    <div class="products-box-panel">

      <div class="products-item">

        <c:forEach begin="1" end="10">
          <a href="#"><img src="img/pc.jpg"/></a>
          <div class="p-name">
           <a href="#">LG IPS237L-BN 23 inches IPS display </a>

          <div class="p-price">
           <span> RMB 1299.00</span>




The above HTML is part, you can use the el expression under the loop, a few more...
It took me a morning to get...

Related articles: