I'm trying to do exactly as it is in this link. (The stripe on the banners with the read more link) https://toyota.jp/vitz
What I tried so far doesn't work as expected. It moves the whole stripe apart from the range.
$(document).on("click mousemove", ".spec-slider-wrap", function(e) { var x = e.clientX; var y = e.clientY; var newposX = x - 700; var newposY = y - 350; $(".stripe").css("transform", "translate3d(" + newposX + "px," + newposY + "px,0px)"); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <span class="word">More</span> <span class="arrow-wrap"> <span class="arrow-pulse-right"></span> </span> </div>
here the working code. https://jsbin.com/geyudivuru/edit?html,css,js,output
<div class="parent" style="">
<div class="stripe">
<span class="word">More</span>
<span class="arrow-wrap">
<span class="arrow-pulse-right"></span>
</span>
<div>
</div>
.stripe {
width: 100%;
background: red;
position: absolute;
height: 40px;
display: none;
}
.parent {
position: relative;
height: 400px;
background: #ddd;
}
$ = jQuery;
$(document).on("mousemove", function(e) {
var x = e.clientX;
var y = e.clientY;
var newposX = x - 700;
var newposY = y;
$('.stripe').css({top: newposY, display: 'block'})
});
$('.parent').mouseleave(function(){
$('.stripe').css({top: 0, display: 'none'})
})
add styling to divs and you'll get what you need.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.