具有1个图像的视差
[英]parallax with 1 image
问题描述
我只想使用1个图像的视差效果。 可以吗？
实际上，它不是真正的视差，我在屏幕中央有一个大图像，所以当我向左移动鼠标时，我希望图像稍微向右移动，将鼠标向右移动，图像稍微移动到向左移动鼠标向上移动图像向下移动鼠标向下移动图像向上移动
我想我以前见过这种效果，但我有点忘了我看到的地方。 真的很感激帮助。 谢谢
5 个解决方案
解决方案1
3 2011-02-08 06:54:57
这是如何做到的，你可以调整和改进它。 没有在所有浏览器上测试，在Firefox上运行良好。 干杯!
<html>
<head>
<script>
document.onmousemove = shiftImageXY;
var tempX = 0;
var tempY = 0;
var oldTempX = 0;
var oldTempY = 0;
var IE = !!(window.attachEvent&&!window.opera);
function shiftImageXY(e) {
if (IE) {
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
} else {
tempX = e.pageX;
tempY = e.pageY;
}
img = document.getElementById('myImage');
speedFactorDamping = 0.1; // change this for faster movement
xdir = (tempX - oldTempX) ;
ydir = (tempY - oldTempY) ;
parallexX = -xdir*speedFactorDamping;
parallexY = -ydir*speedFactorDamping;
currX = parseInt(img.offsetLeft);
currY = parseInt(img.offsetTop);
img.style.left = (currX + parallexX) + 'px';
img.style.top = (currY + parallexY) + 'px';
oldTempX = tempX;
oldTempY = tempY;
return true;
}
</script>
</head>
<body>
<div style='height:300px;clear:both;text-align:center;'></div>
<div style='height:800px;width:800px;text-align:center;'>
<img id='myImage' src='http://img516.imageshack.us/img516/7355/icon.png' style='position:absolute' />
</div>
</body>
解决方案2
2 2011-06-29 17:11:56
这是github用于视差效果的确切插件：
https://github.com/cameronmcefee/plax
从文档：
$('#plax-octocat').plaxify({"xRange":40,"yRange":40});
$('#plax-earth').plaxify({"xRange":20,"yRange":20,"invert":true});
$('#plax-bg').plaxify({"xRange":10,"yRange":10,"invert":true});
$.plax.enable();
只需为后面的项目设置invert:true变量，并为焦点项目前面的内容设置更高的值，然后进行设置。
解决方案3
0 2011-02-08 06:11:31
我希望你的意思是这样的效果 - 弹跳球体
如果是，您只能使用一个图像。 你绘制它，如果你的形象是这样的
----------
|image |
|--------|
then you draw it in two parts
-------
age |im
------|
^
|
this being the start of the second draw.
这会给你视差效果。
编码它应该很容易，只需使用宽度模数改变图像绘制矩形的参考点。
解决方案4
0 2011-02-21 13:28:53
有一些jQuery插件可以完成你提到的一些事情。
图像视差可以使用单个图像或图像集合来创建类似深度的视差
http://plugins.jquery.com/project/imageparallax
但我认为背景视差可能是你真正想要的 - 所以背景以不同的速度移动到滚动，就像在Android主屏幕上一样......
解决方案5
0 2011-03-23 16:51:05
一个小链接总是比长时间讨论更好;）
视差图像非常模糊
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.