jQuery 用 DIV 水平跟随光标

jQuery Follow the cursor horizontaly with a DIV

本文关键字：跟随 光标 水平 DIV jQuery      更新时间：2023-09-26

在容器上，我需要div水平跟随光标。每个div都有不同的内容，并且会根据位置而变化。

像这样的代码笔

但是上面的链接既有垂直也有水平，这不是我需要的。

我做了一个演示

 $("#da-thumbs > li").hover(function () {
     $("div").show();
 }, function () {
     $("div").hide();
 });
 $('#da-thumbs > li').mousemove(function (e) {
     $("div").css({
         left: e.pageX - 120
     });
 });
.da-thumbs {
    list-style: none;
    padding:20px;
    display:inline-block;
}
.da-thumbs li {
    width:200px;
    height:200px;
    background: #000;
    float: left;
    margin: 5px;
    position: relative;
     z-index: 0;
}
.da-thumbs li a {
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.da-thumbs li a div {
    display:none;
    position: relative;
    background: #777;
    background: rgba(75, 75, 75, 0.7);
    width:200px;
    height:200px;
    z-index: 3;
}
.da-thumbs li a div span {
    display: block;
    padding: 10px 0;
    margin: 40px 20px 20px 20px;
    text-transform: uppercase;
    font-weight: normal;
    color: #fff;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 -10px 0 rgba(255, 255, 255, 0.3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="da-thumbs" class="da-thumbs">
    <li> <a href="">
      <div><span>Menu by Simon Jensen</span></div>
    </a>
    </li>
    <li> <a href="">
      <div><span>Mr. Crabs by John Generalov</span></div>
    </a>
    </li>
</ul>

$("#da-thumbs li").hover(function () {
     $(this).find("div").show();
 }, function () {
     $(this).find("div").hide();
 });
 $('#da-thumbs li').mousemove(function (e) {
     var $this = $(this);
     $this.find("div").css({
         left: e.pageX - $this.position().left - 120
     });
 });

这是一个带有工作代码的 JSFiddle。

但是有了这个，您将完全缺乏您链接的演示所具有的"缓动"/动画。如果这是你想要的，你将不得不使用不同的方法。如果是这样，也许我也可以帮你。

为什么要使用 JavaScript？

$("#da-thumbs").on("mousemove", "li", function (evt) {
    var li = $(this),
        offX = li.offset().left,
        width = li.width(),
        x = evt.clientX;      
        li.toggleClass("right", x-offX>width/2);
});
.da-thumbs li:hover a div,  /* slides div in on hover */
.da-thumbs li.right:hover a div{  
    transition: 1s;   /* sets amount of time for the animation */
    margin-left: 0;   /* positioned with margin instead of left */
    margin-right: 0;
}
.da-thumbs li.right a div {
    margin-left: 600px;
}
.da-thumbs {
    list-style: none;
    padding:20px;
    display:inline-block;
}
.da-thumbs li {
    width:200px;
    height:200px;
    background: #000;
    float: left;
    margin: 5px;
    position: relative;
     z-index: 0;
  overflow: hidden;   /*Hide the overflow */
}
x.da-thumbs li a {
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.da-thumbs li a div {
    transition: 1s;    /*slides div out */
    position: relative;
    background: #777;
    background: rgba(75, 75, 75, 0.7);
    width:200px;
    height:200px;
    z-index: 3;
    margin-left:-300px; /* positioned with margin instead of left */
}
.da-thumbs li a div span {
    display: block;
    padding: 10px 0;
    margin: 40px 20px 20px 20px;
    text-transform: uppercase;
    font-weight: normal;
    color: #fff;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 -10px 0 rgba(255, 255, 255, 0.3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="da-thumbs" class="da-thumbs">
    <li> <a href="">
      <div><span>Menu by Simon Jensen</span></div>
    </a>
    </li>
    <li> <a href="">
      <div><span>Mr. Crabs by John Generalov</span></div>
    </a>
    </li>
</ul>

相关文章：