我正在尝试在移动设备上重新创建如下所示的相同效果。
我尝试使用 .vmousemove
但是,div
只有在我触摸和意识到时才会移动。我想要实现的是 div
跟随手指在屏幕上的移动。
这可以用 jQuery 实现吗?
我也可以将鼠标放在 div
的中间吗?
$('#cont').mousemove(function(e) {
var offs = $(this).offset(),
p = {
x: offs.left,
y: offs.top
},
mPos = {
x: e.pageX,
y: e.pageY
},
x = mPos.x - p.x - 100,
y = mPos.y - p.y - 100;
$('.gray', this).css({
left: x,
top: y,
backgroundPosition: -x + 'px ' + -y + 'px'
});
});
#cont {
width: 100%;
height: 100%;
overflow-x: hidden;
}
.gray {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: url('img/grid.png');
opacity: 0.9;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5defb2+0,edd92d+46,d156ea+57,7eea9b+100 */
background: rgb(93, 239, 178);
/* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(93, 239, 178, 1) 0%, rgba(237, 217, 45, 1) 46%, rgba(209, 86, 234, 1) 57%, rgba(126, 234, 155, 1) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(93, 239, 178, 1) 0%, rgba(237, 217, 45, 1) 46%, rgba(209, 86, 234, 1) 57%, rgba(126, 234, 155, 1) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(93, 239, 178, 1) 0%, rgba(237, 217, 45, 1) 46%, rgba(209, 86, 234, 1) 57%, rgba(126, 234, 155, 1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5defb2', endColorstr='#7eea9b', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="cont">
<div class="gray"></div>
</div>
最佳答案
var timer;
$('#cont').mousemove(function(e) {
timer = window.setTimeout(function() {
var offs = $(this).offset(),
p = {
x: offs.left,
y: offs.top
},
mPos = {
x: e.pageX,
y: e.pageY
},
x = mPos.x - p.x - 100,
y = mPos.y - p.y - 100;
$('.gray', this).css({
left: x,
top: y,
backgroundPosition: -x + 'px ' + -y + 'px'
});
},10000)
return false;
})
不知道能不能用
关于javascript - jQuery - 用于移动设备的 mousemove,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35736158/