第一个问题，如果我可以/应该更简洁/清楚地问这个问题，请告诉我...
我正在研究一个实验性脚本，该脚本会随着时间的推移振动具有给定类别的对象并增加强度。我正在使用 jRumble 作为基础。我的脚本需要获取要振动的对象的初始 CSS 位置，然后添加修改变量。我一开始是这样设置的:
$this.animate({
'left': parseFloat($this.css( "left" )) + rx + 'px',
这在 Chrome 中运行良好，但 Safari 和 iOS 返回不同的值。这解释了问题:jquery $('selector').css('top') returns different values for IE, firefox and Chrome ，所以我改用 .offset:
offset = $(".offreg").offset();
...
'left': offset.left + rx + 'px',
但这是有问题的，因为脚本会迭代——.offset 每次都返回当前位置而不是初始位置。我尝试将 var 放在迭代部分之外，但这(显然)不起作用，因为它不再与 rumble 脚本的“this”相关联。然后将 var 设置为类为 .offreg 的第一个元素的值。
页面本身在这里:http://sallymaier.github.io/off-register/ 我将恢复到在 Chrome 中运行的最后一个版本。我的 github 是公开的，所以你可以看到我在那里制造的困惑。
下面是在 Chrome 中运行的完整脚本:
var offRegister = function() {
if (!($ = window.jQuery)) { // see if jQuery is already called, if not, calling script
script = document.createElement( 'script' );
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
script.onload=runRumbler;
document.body.appendChild(script);
}
else {
runRumbler();
}
function runRumbler() {
$(document).ready(function(){
var count = 0;
$(function addone(){
count = count+1;
(function($) {
$.fn.jrumble = function(options){ // jRumble by Jack Rugile. http://jackrugile.com/jrumble/
/*========================================================*/
/* Options
/*========================================================*/
var defaults = {
x: count/5,
y: count/5,
rotation: 0,
speed: 200,
opacity: false,
opacityMin: .5
},
opt = $.extend(defaults, options);
return this.each(function(){
/*========================================================*/
/* Variables
/*========================================================*/
var $this = $(this),
x = opt.x*2,
y = opt.y*2,
rot = opt.rotation*2,
speed = (opt.speed === 0) ? 1 : opt.speed,
opac = opt.opacity,
opacm = opt.opacityMin,
inline,
interval;
/*========================================================*/
/* Rumble Function
/*========================================================*/
var rumbler = function(){
var rx = Math.floor(Math.random() * (x+1)) -x/2,
ry = Math.floor(Math.random() * (y+1)) -y/2,
rrot = Math.floor(Math.random() * (rot+1)) -rot/2,
ropac = opac ? Math.random() + opacm : 1;
/*========================================================*/
/* Ensure Movement From Original Position
/*========================================================*/
rx = (rx === 0 && x !== 0) ? ((Math.random() < .5) ? 1 : -1) : rx;
ry = (ry === 0 && y !== 0) ? ((Math.random() < .5) ? 1 : -1) : ry;
/*========================================================*/
/* Check Inline
/*========================================================*/
if($this.css('display') === 'inline'){
inline = true;
$this.css('display', 'inline-block');
}
/*========================================================*/
/* Rumble Element
/*========================================================*/
$this.animate({
'left': parseFloat($this.css( "left" )) + rx + 'px', // move from declared position
'top': parseFloat($this.css( "top" )) + ry+'px',
'-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity='+ropac*100+')',
'filter':'alpha(opacity='+ropac*100+')',
'-moz-opacity':ropac,
'-khtml-opacity':ropac,
'opacity':ropac,
'-webkit-transform':'rotate('+rrot+'deg)',
'-moz-transform':'rotate('+rrot+'deg)',
'-ms-transform':'rotate('+rrot+'deg)',
'-o-transform':'rotate('+rrot+'deg)',
'transform':'rotate('+rrot+'deg)'
});
}; /* close rumble function */
/*========================================================*/
/* Rumble CSS Reset
/*========================================================*/
var reset = {
'left':0,
'top':0,
'-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)',
'filter':'alpha(opacity=100)',
'-moz-opacity':1,
'-khtml-opacity':1,
'opacity':1,
'-webkit-transform':'rotate(0deg)',
'-moz-transform':'rotate(0deg)',
'-ms-transform':'rotate(0deg)',
'-o-transform':'rotate(0deg)',
'transform':'rotate(0deg)'
};
/*========================================================*/
/* Rumble Start/Stop Trigger
/*========================================================*/
$this.bind({
'startRumble': function(e){
e.stopPropagation();
clearInterval(interval);
interval = setInterval(rumbler, speed)
},
'stopRumble': function(e){
e.stopPropagation();
clearInterval(interval);
if(inline){
$this.css('display', 'inline');
}
$this.css(reset);
}
});
});// End return this.each
};// End $.fn.jrumble
})(jQuery);
/*===============================================================*/
/* Specify selector to vibrate below.
/* For bookmarklet, 'div' will vibrate all elements,
/* in plugin this can be specifically targeted to a class or id.
/*===============================================================*/
$('.offreg').jrumble();
$('.offreg').trigger('startRumble');
setTimeout(addone, 1000); // how many seconds to wait before adding to count, increasing vibration
}); // end addone()
});
};
};
offRegister();
最佳答案
最近几分钟我一直在研究这个源代码，在我看来问题源于对隆隆声元素本身使用 position: absolute。在 jRumble 文档中 http://jackrugile.com/jrumble/#documentation它说“对于位置固定/绝对的隆隆声元素，它们应该被包裹在一个固定/绝对的元素中”。
因此，如果您将容器元素设置为 position: absolute，然后将所有内部 div 相对于容器定位，您将不再需要更改 jRumble 源代码并重新定义插件迭代以更改默认位置或计算每个元素的偏移量 - 您所要做的就是在 jRumble 调用本身中增加 x 和 y 值。
下面的代码是未经测试的，但我想你想要更接近这个的东西(同样，这一切都取决于 .offreg 元素是 position: relative):
$(document).ready(function(){
var count = 0;
function addone(){
count++;
$('.offreg').jrumble({
x: count,
y: count,
rotation: 1
});
$('.offreg').trigger('startRumble');
setTimeout(addone, 1000);
}
});
关于javascript - 获取 CSS 中指定的对象位置以在 jQuery 中修改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27790870/