实现水平移动和缩放UI效果-可能的jQuery插件(?）

Achieving Horizontal Movement and Zoom UI Effect - possible jQuery plugin(?)

本文关键字：jQuery 插件 移动 水平 缩放 效果 UI 实现      更新时间：2023-09-26

我的灵感来自http://www.diesel.com/bags-female.有人能解释一下我是如何达到这种效果的吗？

我从这个代码开始：

  $(document).ready(function(){
    $('#background-thing').mousemove(function(e){
      var mousePos = (e.pageX/$(window).width())*100;
      $('#background-thing').css('backgroundPosition', mousePos+'% 0');
      //alert(mousePos);
    }); 
  });

但它只是平移背景图像。我希望在背景图像上有多个链接，这些链接是锚，点击这些图像将在特定坐标上产生缩放效果。

我应该看看jQuery插件吗？如果是，你有什么建议？

我过去曾使用skrollr进行快速实现，它对我很有帮助。

以下是一些链接：

https://github.com/Prinzhorn/skrollr

http://prinzhorn.github.io/skrollr/

希望有帮助，祝你好运！

我认为您所做的工作不需要任何Jquery插件。

您提供的供参考的页面使用css 3d转换和默认的Jquery。以下是W3schools上的参考资料：http://www.w3schools.com/css/css3_3dtransforms.asp

特别是：

//clearly broken code used just for example
$(document).ready(function(){
    $('#yourpagecontainer').on("click","a",function(){
        $(this).css("transform", "scale3d("+x+","+y+","+z+")");
    }
}

您提供的代码并没有明确说明到目前为止您到底有什么，但看看这个例子可能会让您受益：http://sarasoueidan.com/blog/windows8-animations/

它不完全相同，但它在你想做的范围内。

我不认为你的例子像这个网站那样严格符合"视差"的定义。我很确定你可以用实现类似于你的例子的东西

  1. 点击更改CSS3背景大小和位置（如本问题和此处所述）
  2. 单击时在整个窗口上应用一个部分透明的.png，在中心有一个完全透明的"窗口"，以实现相同的模糊/聚焦外观。你可以在部分透明的区域应用不同的滤镜，以获得更具艺术感的效果。Inkscape做得很好，而且是免费的；）

然而，这不是一个跨浏览器的解决方案。每个人都说"Internet Explorer"（8及以下）。对于9及以上版本，请确保您有<!DOCTYPE html />，否则您的CSS3将变为CSSFAIL。

有趣的项目，享受：）

相关文章：