arcgis js完整悬停效果实现demo

1. 悬停效果实现原理

在实现悬停效果之前，我们需要先了解一下悬停效果的原理。悬停效果可以通过两种方式来实现，即CSS方式和JavaScript方式。其中，CSS方式仅能实现简单的悬停效果，而JavaScript方式能实现复杂的个性化悬停效果。

在arcgis js中，我们使用JavaScript方式来实现悬停效果。具体实现步骤如下：

（1）通过添加事件监听器（如鼠标移入移出事件）来监听目标元素的变化。

（2）在事件处理函数中改变目标元素的样式，以达到悬停效果。

1. 实现步骤

（1）HTML代码

我们首先需要编写HTML代码，来定义一个包含滑动图片的容器以及一组图片。示例代码如下：

<div id="slider-container">
    <div id="slider">
        <img src="image1.jpg" alt="Image">
        <img src="image2.jpg" alt="Image">
        <img src="image3.jpg" alt="Image">
        <img src="image4.jpg" alt="Image">
    </div>
</div>

（2）CSS代码

接下来，我们需要定义容器和图片的样式。示例代码如下：

#slider-container {
  width: 500px;
  height: 300px;
  position: relative;
}

#slider {
  width: 100%;
  height: 100%;
  position: absolute;
}

#slider img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;

  /* 过渡效果 */
  transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
}

在上面的代码中，我们定义了容器和图片的样式。特别地，我们为图片设置了opacity属性，并定义了过渡效果，以实现图片的渐隐渐现效果。

（3）JavaScript代码

最后，我们需要编写JavaScript代码来实现悬停效果。具体代码如下：

var slider = document.getElementById("slider");
var images = slider.getElementsByTagName("img");
var max = images.length;
var index = 0;

setInterval(function(){
    images[index].style.opacity = "0";
    images[index].style.zIndex = "-1";
    index = (index + 1) % max;
    images[index].style.opacity = "1";
    images[index].style.zIndex = "1";
}, 3000);

上述代码的实现步骤为：

（1）定义一个变量slider，获取id为slider的元素。

（2）通过slider元素，获取所有img元素。

（3）定义max为所有img元素的个数，index为当前显示的图片的索引。

（4）使用setInterval方法重复执行一段代码，该代码切换图片的显示，并设置opacity和zIndex属性实现悬停效果。

至此，我们实现了完整的悬停效果实现demo。

1. 示例说明

（1）切换图片角度不同的悬停效果

如果要实现切换图片角度不同的悬停效果，可以在JavaScript代码中添加scale和rotate属性，以实现图片缩放和旋转的效果。

具体代码如下：

var slider = document.getElementById("slider");
var images = slider.getElementsByTagName("img");
var max = images.length;
var index = 0;

setInterval(function(){
    images[index].style.opacity = "0";
    images[index].style.zIndex = "-1";
    index = (index + 1) % max;
    images[index].style.opacity = "1";
    images[index].style.zIndex = "1";
    images[index].style.transform = "scale(1.2) rotate(5deg)";
    images[(index+max-1)%max].style.transform = "scale(1) rotate(0deg)";
}, 3000);

在上述代码中，我们为当前要显示的图片添加了scale和rotate属性，以实现缩放和旋转的效果。同时，我们为之前显示的图片移除了缩放和旋转的效果，以达到图片角度不同的悬停效果。

（2）鼠标放在图片上时立即切换的效果

如果要实现鼠标放在图片上时立即切换的效果，可以在JavaScript代码中添加鼠标移入事件和鼠标移出事件的监听器。当鼠标移入图片时，立即切换到该图片，并停止轮播效果。当鼠标移出时，立即重新启动轮播效果。

具体代码如下：

var slider = document.getElementById("slider");
var images = slider.getElementsByTagName("img");
var max = images.length;
var index = 0;
var timer;

// 轮播函数
function run(){
    images[index].style.opacity = "0";
    images[index].style.zIndex = "-1";
    index = (index + 1) % max;
    images[index].style.opacity = "1";
    images[index].style.zIndex = "1";
}

// 启动轮播效果
function start(){
    timer = setInterval(function(){
        run();
    }, 3000);
}

// 停止轮播效果
function stop(){
    clearInterval(timer);
}

// 鼠标移入事件
slider.onmouseenter = function(){
    stop();
    run();
}

// 鼠标移出事件
slider.onmouseleave = function(){
    start();
}

start();

在上述代码中，我们定义了run、start和stop三个函数。run函数为轮播函数，start函数为启动轮播效果的函数，stop函数为停止轮播效果的函数。我们通过监听鼠标移入事件和鼠标移出事件，在鼠标移入时停止轮播效果，并立即切换到该图片，在鼠标移出时重新启动轮播效果。