我一直在使用Raptorize Jquery插件,我想知道是否有人知道如何偏移图像,所以它是从页面开始移动的。(我不知道如何使用Javascript)
希望你能帮上忙
(function($) {
$.fn.raptorize = function(options) {
//Yo' defaults
var defaults = {
enterOn: 'click', //timer, konami-code, click
delayTime: 5000 //time before raptor attacks on timer mode
};
//Extend those options
var options = $.extend(defaults, options);
return this.each(function() {
var _this = $(this);
var audioSupported = false;
//Stupid Browser Checking which should be in jQuery Support
if ($.browser.mozilla && $.browser.version.substr(0, 5) >= "1.9.2" || $.browser.webkit) {
audioSupported = true;
}
//Raptor Vars
var raptorImageMarkup = '<img id="elRaptor" style="display: none" src="raptor.png" />'
var raptorAudioMarkup = '<audio id="elRaptorShriek" preload="auto"><source src="raptor-sound.mp3" /><source src="raptor-sound.ogg" /></audio>';
var locked = false;
//Append Raptor and Style
$('body').append(raptorImageMarkup);
if(audioSupported) { $('body').append(raptorAudioMarkup); }
var raptor = $('#elRaptor').css({
"position":"fixed",
"bottom": "0px",
"right" : "0",
"display" : "block"
})
// Animating Code
function init() {
locked = true;
//Sound Hilarity
if(audioSupported) {
function playSound() {
document.getElementById('elRaptorShriek').play();
}
playSound();
}
// Movement Hilarity
raptor.animate({
"bottom" : "0"
}, function() {
$(this).animate({
"bottom" : "0px"
}, 100, function() {
var offset = (($(this).position().left)+600);
$(this).delay(300).animate({
"right" : offset
}, 2300, function() {
raptor = $('#elRaptor').css({
"bottom": "-700px",
"right" : "300"
})
locked = false;
})
});
});
}
//Determine Entrance
if(options.enterOn == 'timer') {
setTimeout(init, options.delayTime);
} else if(options.enterOn == 'click') {
_this.bind('click', function(e) {
e.preventDefault();
if(!locked) {
init();
}
})
} else if(options.enterOn == 'konami-code'){
var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";
$(window).bind("keydown.raptorz", function(e){
kkeys.push( e.keyCode );
if ( kkeys.toString().indexOf( konami ) >= 0 ) {
init();
$(window).unbind('keydown.raptorz');
}
}, true);
}
});//each call
}//orbit plugin call
})(jQuery);发布于 2012-10-05 23:08:23
您可以使用"right“属性来偏移图像,只需将其设置为负宽度(这假设图像具有宽度,但它应该是附加到正文的宽度)。
例如:
var raptor = $('#elRaptor').css({
"position":"fixed",
"bottom": "0px",
"right" : -$("#elRaptor").width(),
"display" : "block"
});我已经创建了一个小的样本here,等待三秒钟,“猛禽”开始从屏幕的右下角走到左下角。
检测音频支持的一个更好的方法是使用现代,请参考http://modernizr.com/docs/。
发布于 2021-12-22 20:31:11
看起来你的代码和原来的插件版本有点不同。不同之处在于raptor从页面开始,而不是隐藏在视图之外。
将css bottom属性从0px更新为-700px:
var raptor = $('#elRaptor').css({
"position": "fixed",
"bottom": "-700px", // Update bottom from 0px to -700px
"right": "0",
"display" : "block"
});附注:自从最初的raptorize插件发布以来(2010年)已经很长时间了,它停止了对更新的jQuery版本的工作。有一个更新的实现(https://github.com/randomvlad/raptorize-jquery),它支持jQuery版本1.7+、2.x和3.x以及一些额外的改进。
免责声明:我是更新的Raptorize2.0插件的“作者”,它本身就是基于ZURB (https://zurb.com/playground/jquery-raptorize)的原始插件。
https://stackoverflow.com/questions/12748853
复制相似问题