Javascript 在溢出:none元素中自动滚动内容(jQuery)
我在溢出:none元素中混合了内容(图像、文本)。现在,我想根据鼠标指针的位置在x/y轴上自动滚动该内容。溢出:自动将不是一个选项,因为我不想显示/使用该元素中的滚动条 我发现了一个脚本,它做了一些类似的事情,但只与背景图像。有没有一种方法可以产生类似的效果,但是可以移动div的全部内容?提前感谢您的回答Javascript 在溢出:none元素中自动滚动内容(jQuery),javascript,jquery,scrollbar,scroll,overflow,Javascript,Jquery,Scrollbar,Scroll,Overflow,我在溢出:none元素中混合了内容(图像、文本)。现在,我想根据鼠标指针的位置在x/y轴上自动滚动该内容。溢出:自动将不是一个选项,因为我不想显示/使用该元素中的滚动条 我发现了一个脚本,它做了一些类似的事情,但只与背景图像。有没有一种方法可以产生类似的效果,但是可以移动div的全部内容?提前感谢您的回答 <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test jQuery Move Background with Mouse Move</title>
<link rev="made" href="mailto:covertlinks [ at ] gmail [ dot ] com" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="generator" content="NoteTab Pro 5.5" />
<meta name="author" content="Perry Wolf" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="jquery.1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var vH=$('#viewer').height();
var vW=$('#viewer').width();
var vT=$('#viewer').offset().top;
var vL=$('#viewer').offset().left;
$('#viewer').mousemove(function(e){
var ypos=e.pageY-vT;
var xpos=e.pageX-vL;
var y=Math.round(ypos/vW*100);
var x=Math.round(xpos/vH*100);
$('#test').val(x+' , '+y);
$('#viewer').css({backgroundPosition: x+'% '+y+'%'});
});
});
</script>
</head>
<body style="color:#FFFFFF;background:#102030;text-align:center;">
<h1 style="text-align:center;">Test Move Background on Mousemove:</h1>
<div id="viewer" style="border:solid 1px #FFFFFF;margin:50px auto 0px auto;width:400px;height:400px;background:url(ironhide1024x768.jpg) 0% 0% no-repeat;cursor:url(target_cursor.gif), crosshair;text-align:center;line-height:300px;">
</div>
<input type="text" id="test" size="30" style="display:block;margin:10px auto;width:150px;" />
</body>
</html>
使用鼠标移动测试jQuery移动背景
$(文档).ready(函数(){
var vH=$(“#查看器”).height();
var vW=$('#查看器').width();
var vT=$('#viewer').offset().top;
var vL=$('#viewer').offset().left;
$(“#查看器”).mousemove(函数(e){
var ypos=e.pageY-vT;
var xpos=e.pageX-vL;
变量y=数学整数(ypos/vW*100);
var x=数学圆(xpos/vH*100);
$('#test').val(x+,'+y);
$(#viewer').css({backgroundPosition:x+'%'+y+'%'});
});
});
在Mousemove上测试移动背景:
这是一个有趣的游戏!更改它,以便移动滚动顶部
和滚动左侧
,而不是背景位置。因为您有一个百分比,所以可以像这样计算scrollTop
和scrollLeft
的百分比
你太棒了!:)非常感谢你!约西亚的回答显然是正确的,但要小心溢出:无。溢出没有“无”值,请尝试“隐藏”。
$(document).ready(function(){
var viewer = $('#viewer'),
vH = viewer.height(),
vW = viewer.width(),
vT = viewer.offset().top,
vL = viewer.offset().left,
sTop = viewer.find(':first').height() + 18 - vH,
sLeft = viewer.find(':first').width() + 18 - vW;
// the sTop and sLeft could be calculated differently. In this case
// I am assuming that the viewer has a single child that is larger than itself.
// realistically this should check total possible scrollTop and scrollLeft
$('#viewer').mousemove(function(e){
var $this = $(this),
y = (e.pageY-vT)/vH,
x = (e.pageX-vL)/vW;
$this.scrollTop(Math.round(sTop * y))
.scrollLeft(Math.round(sLeft * x));
});
});