为啥我电脑开了网页后用鼠标滚轮就死机？而直接点拖动条拖动却不会死机？

Posted 2023-05-17

开了网页后用鼠标滚轮就死机？而直接点拖动条拖动却不会死机？而且有时候网页没完全开过来，按F5刷新后滚动滚轮就准死机，哪位大侠帮我解决一下啊？很辣手啊。。

1 内存问题，把内存拔出再重新插上，不行就抱修电脑的地方修，应该是换内心存条。 硬件引起的原因主要有 1、散热不良：显示器、电源和CPU工作时间太长会导致死机，给风扇除尘，上油。 查查CPU温度（进入bios看或者用CPU-Z），正常工作应该在35~60度左右. 2、灰尘杀手：机器内灰尘过多也会引起死机故障。定期清洁机箱 3、内存条故障：主要是内存条松动，内存芯片本身质量所致，应根据具体情况排除内存条接触故障，如果是内存条质量存在问题，则需更换内存才能解决问题。 4、硬盘故障：如果硬盘的剩余空间太少碎片太多，这样机器在运行时就很容易发生死机。要养成定期整理硬盘、清除硬盘中垃圾文件的良好习惯。硬盘老化或由于使用不当造成坏道、坏扇区，要用工具软件来进行排障处理，如损坏严重则只能更换硬盘了。 其他原因1、软硬件不兼容：三维软件和一些特殊软件，可能在有的微机上就不能正常启动甚至安装，查找并删除不兼容的软硬件。 2、驱动程序安装有误：当某些硬件比如显卡的驱动如果安装错误，在启动系统进入到桌面时会突然蓝屏或黑屏而死机，检查、删除有问题的驱动程序。 3、应用软件的缺陷：如果运行了这种有Bug的软件就可能会使系统死机或不能正常启动，遇到这种情况应该找到软件的最新版本或者干脆卸载不用。 4、病毒感染：病毒木马等可以使计算机工作效率急剧下降，造成频繁死机。这时，我们需用杀毒软件如KV3000、金山毒霸、瑞星等来进行全面查毒杀毒。在查杀病毒之前，要确保你的杀毒软件的病毒库是最新的。你可以点击“升级”按键进行升级，这样才能保证能查出最新的病毒。 参考技术A 希望可以帮到你： 注意以下问题可以解决避免大部分电脑死机或“假死”的现象： 1、在同一个硬盘上安装太多的操作系统会引起系统死机。最好重装前用PQ先格式化干净再装. 2、CPU、显示卡等配件不要超频过高，要注意温度，否则，在启动或运行时会莫名其妙地重启或死机。一般不要随便超频。 3、在更换电脑配件时，一定要插好，因为配件接触不良会引起系统死机。 4、BIOS设置要恰当，有时因突然断电等原因引起bios混乱，可通过放电或恢复出厂设置。 5、夏天晚上一般是用电高峰，电压不稳容易引起死机，最好配备稳压电源。 6、对来历不明的软盘和光盘，不要轻易使用，对E－mail中所附的软件，要用瑞星等杀毒软件检查后再使用，以免传染病毒后，使系统死机。 7、在应用软件未正常结束时，别关闭电源，否则会造成系统文件损坏或丢失，引起自动启动或者运行中死机。对于Windows98/2000/NT等系统来说，这点非常重要。 8、在安装应用软件当中，若出现提示对话框“是否覆盖文件”，最好选择不要覆盖。因为通常当前系统文件是最好的，不能根据时间的先后来决定覆盖文件(除非你对文件的时间很在意)。 9、在运行大型应用软件时(如OFFICE 2000)，不要在运行状态下退出以前运行的程序，否则会引起整个系统的崩溃。 10、在内存较小的情况下，最好不要运行占用内存较大的应用程序，否则在运行时容易出现死机。建议在运行这些程序时应及时保存当前正在使用的文件。 11、对于系统文件或重要文件，最好使用隐含属性，这样才不致于因误操作而删除或者覆盖这些文件。 12、最好少用软件的测试版，因为测试版在某方面不够稳定，在使用后会使系统无法启动。可使用一些低版本但比较稳定的。 13、尽量不要下载使用来历不明的软件，因为这些软件里隐藏着大量病毒，一旦执行，会自动修改你的系统，使系统在运行中出现死机。若有使用，请于事先杀毒以防万一。 14、在机箱中，可能蕴藏了大量的灰尘，灰尘若接触了配件的电路，会使系统不稳定或死机。经常给机箱、电源、风扇等配件清尘。 15、在执行磁盘碎片整理的时后，不要运行大型应用软件，否则引起死机。 16、用杀毒软件检查硬盘期间，不要运行其它的应用程序，以防止系统死机。 17、在上网的时候，不要一次打开太多的浏览窗口，导致资源不足，引起死机。可考虑使用一些占资源较少的浏览器。 18、在关闭计算机的时候，不要直接使用机箱中的电源按钮，因为直接使用电源按钮会引起文件的丢失，使下次不能正常启动，从而造成系统死机。

放大鼠标滚轮点（使用缩放和平移）

【中文标题】放大鼠标滚轮点（使用缩放和平移）

【英文标题】：Zoom in on a mousewheel point (using scale and translate)

【发布时间】：2018-03-20 16:53:32

【问题描述】：

这个问题和这个问题类似：Zoom in on a point (using scale and translate) 甚至这个：Image zoom centered on mouse position 但我不想在画布上做，而是在普通图像（或者更确切地说是图像的容器 div）上做。 所以缩放应该像谷歌地图。 我实际上是在破解/增强 iDangerous Swiper 缩放 (http://idangero.us/swiper/)，这是我的出发点，这就是我目前所得到的： https://jsfiddle.net/xta2ccdt/3/

仅使用鼠标滚轮进行缩放。第一次放大时会完美放大，但我不知道如何计算第一次放大后的每次缩放。

这是我的代码： JS：

$(document).ready(function()
    $("#slideContainer").on("mousewheel DOMMouseScroll", function (e) 
    e.preventDefault();
    var delta = e.delta || e.originalEvent.wheelDelta;
    var zoomOut;
    if (delta === undefined) 
      //we are on firefox
      delta = e.originalEvent.detail;
      zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
      zoomOut = !zoomOut;
     else 
      zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
    
    var touchX = e.type === 'touchend' ? e.changedTouches[0].pageX : e.pageX;
    var touchY = e.type === 'touchend' ? e.changedTouches[0].pageY : e.pageY;
    var scale = 1, translateX, translateY;
    if(zoomOut)
        //we are zooming out
      //not interested in this yet
    else
        //we are zooming in
      scale = scale + 0.5;
      var dimensionMultiplier = scale - 0.5;//when image is scaled up offsetWidth/offsetHeight doesn't take this into account so we must multiply by scale to get the correct width/height
      var slideWidth = $("#slide")[0].offsetWidth * dimensionMultiplier;
      var slideHeight = $("#slide")[0].offsetHeight * dimensionMultiplier;

      var offsetX = $("#slide").offset().left;//distance from the left of the viewport to the slide
      var offsetY = $("#slide").offset().top;//distance from the top of the viewport to the slide
      var diffX = offsetX + slideWidth / 2 - touchX;//this is distance from the mouse to the center of the image
      var diffY = offsetY + slideHeight / 2 - touchY;//this is distance from the mouse to the center of the image

      //how much to translate by x and y so that poin on image is alway under the mouse
      //we must multiply by 0.5 because the difference between previous and current scale is always 0.5
      translateX = ((diffX) * (0.5));
      translateY = ((diffY) * (0.5));    
    
    $("#slide").css("transform", 'translate3d(' + translateX + 'px, ' + translateY + 'px,0) scale(' + scale + ')').css('transition-duration', '300ms');
  );


);

HTML：

<div id="slideContainer">
  <div id="slide">
    <img src="http://content.worldcarfans.co/2008/6/medium/9080606.002.1M.jpg"></img>
  </div>
</div>

CSS：

#slideContainer
  width:500px;
  height:500px;
  overflow:hidden;

#slide
  width:100%;
  height:100%;

img
  width:auto;
  height:auto;
  max-width:100%;

我还发现如果我从当前的值中减去以前的 translateX 和 translateY 值，我可以尽可能多地放大同一点并且它会完美缩放，但是如果我放大一个点然后改变鼠标定位并再次放大，它将不再按预期放大。示例：https://jsfiddle.net/xta2ccdt/4/

如果我更改鼠标位置，并计算新旧鼠标位置之间的 X 和 Y 差异并将其添加到差异计算中，它将第二次正确缩放。但是第三次​​看起来仍然会从总计算中减去该差异，这将导致平移再次将图像移开，之后如果我们将鼠标保持在同一位置，它将再次正确缩放。 所以我想我每次计算新的“差异”时只添加新旧鼠标位置之间的差异，这种工作，不再像我停止添加鼠标位置差异时那样跳跃，但它仍然没有放大相同的位置，每次新的缩放都会将图像移动（偏移）少量。我认为这是因为每次都有一个新的缩放值，但偏移量不是线性的，每次都更小接近零，我不知道如何偏移偏移量。 这是新示例：https://jsfiddle.net/xta2ccdt/5/ 示例中的新图像：旧图像不再可用：https://jsfiddle.net/xta2ccdt/14/

【问题讨论】：

不相关但 没有结束标记。它应该自动关闭 via.placeholder.com/350x150" /> 我还必须使用诸如占位符 b/c 之类的东西，另一个图像被阻止了。由于某种原因，我无法缩小。

我发现这个插件似乎可以满足您的要求：jqueryscript.net/demo/…

顺便说一句。我最终放弃了这个并改用 panzoom：github.com/timmywil/jquery.panzoom

【参考方案1】：

您已经接近它了，但是最好分别存储 x、y 和缩放并根据这些值计算变换。它使事情变得更容易 + 节省资源（无需一遍又一遍地查找 dom 属性），

我已将代码放入一个不错的模块中：

function ScrollZoom(container,max_scale,factor)
    var target = container.children().first()
    var size = w:target.width(),h:target.height()
    var pos = x:0,y:0
    var zoom_target = x:0,y:0
    var zoom_point = x:0,y:0
    var scale = 1
    target.css('transform-origin','0 0')
    target.on("mousewheel DOMMouseScroll",scrolled)

    function scrolled(e)
        var offset = container.offset()
        zoom_point.x = e.pageX - offset.left
        zoom_point.y = e.pageY - offset.top

        e.preventDefault();
        var delta = e.delta || e.originalEvent.wheelDelta;
        if (delta === undefined) 
          //we are on firefox
          delta = e.originalEvent.detail;
        
        delta = Math.max(-1,Math.min(1,delta)) // cap the delta to [-1,1] for cross browser consistency

        // determine the point on where the slide is zoomed in
        zoom_target.x = (zoom_point.x - pos.x)/scale
        zoom_target.y = (zoom_point.y - pos.y)/scale

        // apply zoom
        scale += delta*factor * scale
        scale = Math.max(1,Math.min(max_scale,scale))

        // calculate x and y based on zoom
        pos.x = -zoom_target.x * scale + zoom_point.x
        pos.y = -zoom_target.y * scale + zoom_point.y


        // Make sure the slide stays in its container area when zooming out
        if(pos.x>0)
            pos.x = 0
        if(pos.x+size.w*scale<size.w)
            pos.x = -size.w*(scale-1)
        if(pos.y>0)
            pos.y = 0
         if(pos.y+size.h*scale<size.h)
            pos.y = -size.h*(scale-1)

        update()
    

    function update()
        target.css('transform','translate('+(pos.x)+'px,'+(pos.y)+'px) scale('+scale+','+scale+')')
    

通过调用来使用它

new ScrollZoom($('#container'),4,0.5)

参数为：

container：要缩放的元素的包装器。该脚本将 寻找容器的第一个孩子并应用变换 给它。 max_scale：最大比例（4 = 400% 缩放） 因素：缩放速度（1 = 每鼠标滚轮刻度 +100% 缩放）

JSFiddle here

【讨论】：

这似乎有效。为什么将变换原点设置为 0,0。我想将其保留为 50%.50%，因为它是默认值

该逻辑基于位于 x:0, y:0 的变换原点。但你当然可以修改它。

我无法修改它以用于中心的变换原点，应该修改什么？

@Jsilvermist 您需要将宽度的一半添加到 x 和 y 坐标。喜欢pos.x += size.w*scale/2

@Jsilvermist 肯定的，布雷。 jsfiddle.net/f9kctwby 。公平地说，它实际上是size.w*(scale-1)/2，我的错。

【参考方案2】：

我认为这会让你更接近你想要实现的目标。

关键变化

我在回调之外拉出了刻度；我不认为你想在每个车轮事件上重置你的规模。 不要手动计算翻译，而是尝试将transform-origin 设置为鼠标居中（除非您希望将其保持居中，这是默认设置）

var scale = 1;

$(document).ready(function()
    $("#slideContainer").on("mousewheel DOMMouseScroll", function (e) 
    e.preventDefault();
    var delta = e.delta || e.originalEvent.wheelDelta;
    var zoomOut;
    if (delta === undefined) 
      //we are on firefox
      delta = e.originalEvent.detail;
      zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
      zoomOut = !zoomOut;
     else 
      zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
    
    var touchX = e.type === 'touchend' ? e.changedTouches[0].pageX : e.pageX;
    var touchY = e.type === 'touchend' ? e.changedTouches[0].pageY : e.pageY;
    var translateX, translateY;
    if(zoomOut)
      // we are zooming out
      scale = scale - 0.01;
      
      var offsetWidth = $("#slide")[0].offsetWidth;
      var offsetHeight = $("#slide")[0].offsetHeight;

      $("#slide")
        .css("transform-origin", touchX + 'px ' + touchY + 'px')
        .css("transform", 'scale(' + scale + ')');
      
    else
      // we are zooming in
      scale = scale + 0.01;
      
      var offsetWidth = $("#slide")[0].offsetWidth;
      var offsetHeight = $("#slide")[0].offsetHeight;

      $("#slide")
        .css("transform-origin", touchX + 'px ' + touchY + 'px')
        .css("transform", 'scale(' + scale + ')');
    
    
  );


);

#slideContainer
  width:200px;
  height:200px;
  overflow:hidden;

#slide
  width:100%;
  height:100%;

img
  width:auto;
  height:auto;
  max-width:100%;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideContainer">
  <div id="slide">
    <img src="https://via.placeholder.com/200x200"></img>
  </div>
</div>

【讨论】：

我遇到的问题仍然存在。如果你放大例如在左上角某处，然后放大右下角，图像会跳跃。

【参考方案3】：

使用translate3d 和perspective 来处理3d 转换，而不是使用scale 怎么样？此外，将缩放与平移分离使其更简单。

$(document).ready(function() 

  var translateX = 0,
    translateY = 0,
    translateZ = 0,
    stepZ = 10,
    initial_obj_X = 0,
    initial_obj_Y = 0,
    initial_mouse_X = 0,
    initial_mouse_Y = 0;

  function apply_coords() 
    $("#slide").css("transform", 'perspective(100px) translate3d(' + translateX + 'px, ' + translateY + 'px, ' + translateZ + 'px)');
  


  $("#slideContainer").on("mousewheel DOMMouseScroll", function(e) 

    e.preventDefault();
    var delta = e.delta || e.originalEvent.wheelDelta;
    var zoomOut;
    if (delta === undefined) 
      delta = e.originalEvent.detail;
      zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
      zoomOut = !zoomOut;
     else 
      zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
    
    if (zoomOut) 
      translateZ = translateZ - stepZ;
     else 
      translateZ = translateZ + stepZ;
    
    apply_coords();

  );


  var is_dragging = false;
  $("#slideContainer")
    .mousedown(function(e) 
      is_dragging = true;
    )
    .mousemove(function(e) 
      if (is_dragging) 
        e.preventDefault();
        var currentX = e.type === 'touchend' ? e.changedTouches[0].pageX : e.pageX;
        var currentY = e.type === 'touchend' ? e.changedTouches[0].pageY : e.pageY;
        translateX = initial_obj_X + (currentX - initial_mouse_X);
        translateY = initial_obj_Y + (currentY - initial_mouse_Y);
        apply_coords();
       else 
        initial_mouse_X = e.type === 'touchend' ? e.changedTouches[0].pageX : e.pageX;
        initial_mouse_Y = e.type === 'touchend' ? e.changedTouches[0].pageY : e.pageY;
        initial_obj_X = translateX;
        initial_obj_Y = translateY;
      
    )
    .mouseup(function() 
      is_dragging = false;
    );


);

#slideContainer 
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: relative;


#slide 
  width: 100%;
  height: 100%;
  background: red;


img 
  width: auto;
  height: auto;
  max-width: 100%;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideContainer">
  <div id="slide">
  </div>
</div>

【讨论】：

我被比例卡住了，因为我试图增强 iDangerous 滑动缩放并且他们使用比例

【参考方案4】：

感谢大家的回答，对我帮助很大。 我已经修改它以允许平移。

$(document).ready(function ()
    var scroll_zoom = new ScrollZoom($('#container'),5,0.5)
)

//The parameters are:
//
//container: The wrapper of the element to be zoomed. The script will look for the first child of the container and apply the transforms to it.
//max_scale: The maximum scale (4 = 400% zoom)
//factor: The zoom-speed (1 = +100% zoom per mouse wheel tick)

function ScrollZoom(container,max_scale,factor)
    var target = container.children().first()
    var size = w:target.width(),h:target.height()
    var pos = x:0,y:0
    var scale = 1
    var zoom_target = x:0,y:0
    var zoom_point = x:0,y:0
    var curr_tranform = target.css('transition')
    var last_mouse_position =  x:0, y:0 
    var drag_started = 0

    target.css('transform-origin','0 0')
    target.on("mousewheel DOMMouseScroll",scrolled)
    target.on('mousemove', moved)
    target.on('mousedown', function() 
        drag_started = 1;
        target.css('cursor':'move', 'transition': 'transform 0s');
        /* Save mouse position */
        last_mouse_position =  x: event.pageX, y: event.pageY;
    );

    target.on('mouseup mouseout', function() 
        drag_started = 0;
        target.css('cursor':'default', 'transition': curr_tranform);
    );

    function scrolled(e)
        var offset = container.offset()
        zoom_point.x = e.pageX - offset.left
        zoom_point.y = e.pageY - offset.top

        e.preventDefault();
        var delta = e.delta || e.originalEvent.wheelDelta;
        if (delta === undefined) 
          //we are on firefox
          delta = e.originalEvent.detail;
        
        delta = Math.max(-1,Math.min(1,delta)) // cap the delta to [-1,1] for cross browser consistency

        // determine the point on where the slide is zoomed in
        zoom_target.x = (zoom_point.x - pos.x)/scale
        zoom_target.y = (zoom_point.y - pos.y)/scale

        // apply zoom
        scale += delta * factor * scale
        scale = Math.max(1,Math.min(max_scale,scale))

        // calculate x and y based on zoom
        pos.x = -zoom_target.x * scale + zoom_point.x
        pos.y = -zoom_target.y * scale + zoom_point.y

        update()
    

    function moved(event)
        if(drag_started == 1) 
            var current_mouse_position =  x: event.pageX, y: event.pageY;
            var change_x = current_mouse_position.x - last_mouse_position.x;
            var change_y = current_mouse_position.y - last_mouse_position.y;

            /* Save mouse position */
            last_mouse_position = current_mouse_position;
            //Add the position change
            pos.x += change_x;
            pos.y += change_y;

        update()
        
    

    function update()
        // Make sure the slide stays in its container area when zooming out
        if(pos.x>0)
            pos.x = 0
        if(pos.x+size.w*scale<size.w)
            pos.x = -size.w*(scale-1)
        if(pos.y>0)
            pos.y = 0
        if(pos.y+size.h*scale<size.h)
            pos.y = -size.h*(scale-1)

        target.css('transform','translate('+(pos.x)+'px,'+(pos.y)+'px) scale('+scale+','+scale+')')
    

#container
  width:500px;
  height:500px;
  overflow:hidden;

#slide
  width:100%;
  height:100%;
  transition: transform .3s;

img
  width:auto;
  height:auto;
  max-width:100%;
  pointer-events: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="slide">
    <img src="https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg">
  </div>
</div>

如果您愿意，可以在这里测试： https://jsfiddle.net/Pimigo/sy9c8z5q/8/

【参考方案5】：

我用来放大鼠标位置的代码如下。它不使用transform/translate3d，而是重新调整图像在div中的位置，并调整其height和width。

var zoom = 1;
var img, div;
window.onload = function() 
  window.addEventListener('DOMMouseScroll', wheel, false)
  img = document.getElementById("img");
  div = document.getElementById("div");


function wheel(event) 
  event.preventDefault();
  var delta = 0;
  if (!event) /* For IE. */
    event = window.event;
  if (event.wheelDelta)  /* IE/Opera. */
    delta = event.wheelDelta / 120;
   else if (event.detail)  /** Mozilla case. */
    /** In Mozilla, sign of delta is different than in IE.
     * Also, delta is multiple of 3.
     */
    delta = -event.detail / 3;
  
  /** If delta is nonzero, handle it.
   * Positive Delta = wheel scrolled up,
   * Negative Delte = wheel scrolled down.
   */
  if (delta) 
    // will pass 1 to zoom in and -1 to zoom out	    
    delta = delta / Math.abs(delta)
    zoomImage(delta == 1, event);
  


function zoomImage(zoomIn, e) 
  var oldZoom = zoom;
  var direction = 1 * (zoomIn ? 1 : -1);
  zoom += direction * .2;
  // range = 50% => 600%
  zoom = round(Math.min(6, Math.max(.5, zoom)), 1);
  
  if (zoom == 1) 
    // For a zoom = 1, we reset
    resetZoom(div, img);
    return;
  

  // make the position of the mouse the center, 
  // or as close as can with keeping maximum image viewable
  // e == div[this.slide]
  // gets the top and left of the div
  var divOffset = getOffset(div);
  var imgStyles = getComputedStyle(img);
  var divStyles = getComputedStyle(div);
  var imgOffset = 
    x: parseInt(imgStyles.left),
    y: parseInt(imgStyles.top)
  ;

  // where clicked relative in div
  var yTravel = e.pageY - divOffset.y;
  var xTravel = e.pageX - divOffset.x;

  // where clicked
  var xOldImg = -imgOffset.x + xTravel;
  var yOldImg = -imgOffset.y + yTravel;

  // the clicked position relative to the image 0,0
  // clicked position will remain at the cursor position while image zoom changes

  // calc the same position at the new zoom level
  var ratio = zoom / oldZoom;
  var xNewImg = xOldImg * ratio;
  var yNewImg = yOldImg * ratio;

  // calc new top / left
  var xStart = -(xNewImg - xTravel);
  var yStart = -(yNewImg - yTravel);

  img.style.height = parseInt(divStyles.height) * (zoom) + "px";
  img.style.width = parseInt(divStyles.width) * (zoom) + "px";

  img.style.top = yStart + "px";
  img.style.left = xStart + "px";
  img.style.cursor = "grab";


function resetZoom(div, img) 
  img.style.top = "0px";
  img.style.left = "0px";
  img.style.height = div.style.height;
  img.style.width = div.style.width;
  img.style.cursor = "default";
  zoom = 1;


function getOffset(element) 
  var rect = element.getBoundingClientRect();
  var posX = rect.left + window.pageXOffset; // alias for window.scrollX; 
  var posY = rect.top + window.pageYOffset; // alias for window.scrollY;	

  return 
    x: posX,
    y: posY,
    left: posX,
    top: posY,
    width: rect.width,
    height: rect.height
  ;


function round(number, precision) 
  precision = precision ? +precision : 0;

  var sNumber = number + '',
    periodIndex = sNumber.indexOf('.'),
    factor = Math.pow(10, precision);

  if (periodIndex === -1 || precision < 0) 
    return Math.round(number * factor) / factor;
  

  number = +number;

  // sNumber[periodIndex + precision + 1] is the last digit
  if (sNumber[periodIndex + precision + 1] >= 5) 
    // Correcting float error
    // factor * 10 to use one decimal place beyond the precision
    number += (number < 0 ? -1 : 1) / (factor * 10);
  

  return +number.toFixed(precision);

#div 
  width: 350px;
  height: 262px;
  border: 1px solid black;
  overflow: hidden;


#img 
  width: 350px;
  height: 262px;
  position: relative;

<div id='div'>
  <img id='img' src="https://www.design.mseifert.com/git-slideshow/img-demo/images01.jpg">
</div>

【讨论】：

我坚持使用翻译，因为我试图增强 iDangerous 滑动缩放，他们使用翻译。