在overflow：none元素中自動滾動內容（jQuery）

我在overflow：none元素中混合了內容（圖片，文本）。現在，我想根據鼠標指針的位置自動滾動x/y軸上的內容。溢出：自動不會是一個選項，因爲我不想顯示/使用該元素中的滾動條。在overflow：none元素中自動滾動內容（jQuery）

我發現了一個腳本，它做了類似的事情，但只有背景圖片。有沒有辦法產生類似的效果，但移動div的整個內容？提前感謝您的回答！

<?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>

來源

2010-12-16 Spiridon

這是一個有趣的！更改它，以便您移動scrollTop和scrollLeft而不是背景位置。既然你有一個百分比，你可以像這樣計算scrollTop和scrollLeft。 Check out the fiddle。

$(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)); 
    }); 
});

來源

2010-12-16 17:12:20

你搖滾！：）非常感謝！ – Spiridon 2010-12-16 20:56:08

Josiah的回答顯然是正確的，但要注意'overflow：none'。沒有值「無」溢出，請嘗試「隱藏」。 http://www.w3.org/TR/CSS21/visufx.html#overflow – 2011-03-18 17:57:43

在overflow：none元素中自動滾動內容（jQuery）

回答

相關問題