在页面加载时触发光标移动事件

Question

我正在开发一个投资组合网站，它是一个完整的浏览器大小的容器，当从左向右移动光标时会交换图像。

header 和字幕包含在 jquery 脚本中，以便根据显示的图像更改颜色。

这似乎工作得很好，但唯一的缺点是 header 和标题在您刚加载网站时光标在浏览器上移动之前是不可见的。

有没有办法让文本在网站加载时显示？比如在加载时触发鼠标悬停事件，以便文本已经存在？或者可能是一些不那么复杂的修复... 无论如何，非常感谢您的帮助！

$.fn.swinger = function () {
    return this.each(function () {
        var $container = $(this);
        $container.css({
            "position": "relative"
        });
        var $images = $container.find("img");
        $images.css({
            
        });
        var $middleImage = $($images[Math.floor($images.length / 2)]);
        $middleImage.css({
            "z-index": "2",
            "position": "relative"
        });
        var columnsCount = $images.length;
        $images.each((i, img) => {
            var left = `${100 / columnsCount * i}%`;
            var width = `${100 / columnsCount}%`;
            var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
            $(img).after($column);
            $column.hover(() => {
                $images.css({
                    "z-index": "1",
                    "position": "absolute"
                });
                $(img).css({
                    "z-index": "2",
                    "position": "relative"
                });
                // just added one line
                $(".caption").text($(img).attr("alt"));
                
                $(".caption")
                .text($(img).attr("alt"))
                .css('color', $(img).data('color'));

                $('header').css('color', $(img).data('color'))
        
            });
        })
    });
}

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {

}

.left-holder {
    text-align: left;
    float: left;
    margin-right: 55px;
    width: 250px; }

div.swinger-container {
    text-align: center; /* ensures the image is always in the h-middle */
    overflow: hidden; 
    width: 100vw;
height: calc(100vh);

}

div.swinger-container img {
    object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
  }

  header {
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 10px 10px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-top: -2px;
    text-align: center;
    z-index: 100;
    -webkit-transition: all .2s;
    transition: all .2s; }
    header.header-about {
      color: white !important;
      background-color: white; }
    header h1, header h2, header .about {
      font-size: 1em;
      font-weight: 400;
      display: block;
      line-height: 1.2em;
      margin-bottom: 0;
      padding-bottom: 0; }
    header h1 {
      text-align: left; }
    header a {
      text-decoration: none;
      color: white;
      line-height: 1; }
    header .about {
      text-align: left;
      padding-bottom: 2px; }

      

        .caption {
            
    
            z-index: 100;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 20px;
            max-width: 500px;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            width: 50vw;
            
    
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Style.css">
    <title>website title</title>
    <script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
     <header>
        <div class="left-holder">
            <h1>my name</h1> 
            <h2>what I do</h2>
        </div>
        <div class="caption">

        </div>
       
    </header>

    <div class="slides">
        <div class="swinger-container">
        
            <img src="https://images.unsplash.com/photo-1447703693928-9cd89c8d3ac5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1951&q=80" data-color="white" alt="Caption 1"/>
            <img src="https://images.unsplash.com/photo-1502239608882-93b729c6af43?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 2"/>
            <img src="https://images.unsplash.com/photo-1516557070061-c3d1653fa646?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" data-color="white" alt="Caption 3"/>
            <img src="https://images.unsplash.com/photo-1468657988500-aca2be09f4c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 4"/>
            <img src="https://images.unsplash.com/photo-1488554378835-f7acf46e6c98?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80" data-color="white" alt="Caption 5"/>
            <img src="https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1567&q=80" class=“swinger_img_black” alt="Caption 6"/>
            <img src="https://images.unsplash.com/photo-1517816743773-6e0fd518b4a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" data-color="black" alt="Caption 7"/>
            <img src="https://images.unsplash.com/photo-1548685913-fe6678babe8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1923&q=80" data-color="black" alt="Caption 8"/>
            
        </div> 
    </div>

    <script type="text/javascript">
        $(document).ready(init);
        function init() 
        {
            $(".swinger-container").swinger();
        }
</script>

   <script src="swinger.js"></script>
    
  
</body>
</html>

Answer 1

这适合你吗？我刚刚将第一张图片用作默认图片。然后鼠标事件将完成剩下的工作。

在初始化中添加：

let defaultImage = $("#default-image");
$(".caption").text(defaultImage.attr("alt")).css('color', $(defaultImage).data('color'));
$('header').css('color', $(defaultImage).data('color'));

$.fn.swinger = function() {
  return this.each(function() {
    var $container = $(this);
    $container.css({
      "position": "relative"
    });
    var $images = $container.find("img");
    $images.css({

    });
    var $middleImage = $($images[Math.floor($images.length / 2)]);
    $middleImage.css({
      "z-index": "2",
      "position": "relative"
    });
    var columnsCount = $images.length;
    $images.each((i, img) => {
      var left = `${100 / columnsCount * i}%`;
      var width = `${100 / columnsCount}%`;
      var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
      $(img).after($column);
      $column.hover(() => {
        $images.css({
          "z-index": "1",
          "position": "absolute"
        });
        $(img).css({
          "z-index": "2",
          "position": "relative"
        });
        // just added one line
        $(".caption").text($(img).attr("alt"));

        $(".caption")
          .text($(img).attr("alt"))
          .css('color', $(img).data('color'));

        $('header').css('color', $(img).data('color'))

      });
    })
  });
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {}

.left-holder {
  text-align: left;
  float: left;
  margin-right: 55px;
  width: 250px;
}

div.swinger-container {
  text-align: center;
  /* ensures the image is always in the h-middle */
  overflow: hidden;
  width: 100vw;
  height: calc(100vh);
}

div.swinger-container img {
  object-fit: cover;
  -o-object-position: center center;
  object-position: center center;
  width: 100%;
  height: 100% !important;
}

header {
  width: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 10px 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: -2px;
  text-align: center;
  z-index: 100;
  -webkit-transition: all .2s;
  transition: all .2s;
}

header.header-about {
  color: white !important;
  background-color: white;
}

header h1,
header h2,
header .about {
  font-size: 1em;
  font-weight: 400;
  display: block;
  line-height: 1.2em;
  margin-bottom: 0;
  padding-bottom: 0;
}

header h1 {
  text-align: left;
}

header a {
  text-decoration: none;
  color: white;
  line-height: 1;
}

header .about {
  text-align: left;
  padding-bottom: 2px;
}

.caption {
  z-index: 100;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 20px;
  max-width: 500px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="Style.css">
  <title>website title</title>
  <script src="./jquery-3.6.0.min.js"></script>
</head>

<body>
  <header>
    <div class="left-holder">
      <h1>my name</h1>
      <h2>what I do</h2>
    </div>
    <div class="caption">

    </div>

  </header>

  <div class="slides">
    <div class="swinger-container">

      <img id="default-image" src="https://images.unsplash.com/photo-1447703693928-9cd89c8d3ac5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1951&q=80" data-color="white" alt="Caption 1" />
      <img src="https://images.unsplash.com/photo-1502239608882-93b729c6af43?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 2" />
      <img src="https://images.unsplash.com/photo-1516557070061-c3d1653fa646?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" data-color="white" alt="Caption 3" />
      <img src="https://images.unsplash.com/photo-1468657988500-aca2be09f4c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 4" />
      <img src="https://images.unsplash.com/photo-1488554378835-f7acf46e6c98?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80" data-color="white" alt="Caption 5" />
      <img src="https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1567&q=80" class=“swinger_img_black” alt="Caption 6" />
      <img src="https://images.unsplash.com/photo-1517816743773-6e0fd518b4a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" data-color="black" alt="Caption 7" />
      <img src="https://images.unsplash.com/photo-1548685913-fe6678babe8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1923&q=80" data-color="black" alt="Caption 8" />

    </div>
  </div>

  <script type="text/javascript">
    $(document).ready(init);

    function init() {
      $(".swinger-container").swinger();
      
      // Just prepare the first setup here
      // Note that I have added the ID default-image to the first image 
      let defaultImage = $("#default-image");
      $(".caption").text(defaultImage.attr("alt")).css('color', $(defaultImage).data('color'));
      $('header').css('color', $(defaultImage).data('color'));
    }
  </script>

  <script src="swinger.js"></script>


</body>

</html>

在页面加载时触发光标移动事件

trigger cursor move event upon page load

html

javascript

css

jquery

cursor