私はスライダープラグインに取り組んでいます。Firefox では想定どおりに動作しますが、Chrome、IE、および Safari では、左に移動する代わりにアニメーションが上がり、幅を減らす代わりに高さを減らします。 http://htc1swallpapers.zxq.net/jquery.squares.html
HTMLとCSS
<div id="container"></div>
#container{
position:relative;
width: 854px;
height: 418px;
margin: 100px;
border: 3px solid #333;
overflow: hidden;
}
.bar{
position: absolute;
top: 0;
opacity: 0;
}
$(document).ready(function() {
$('#container').myplugin({sw: 60, sh: 60, animation: 'vertical'});
// setTimeout(function(){$('#container').myplugin({sw: 60, sh: 60, animation: 'horizontal'});}, 15000);
});
jQuery プラグイン
// JavaScript Document
(function($){
$.fn.extend({
myplugin: function(settings){
var defaults = {
speed: 200,
easing: 'fadeout',
animation: 'vertical',
sw: 20, //slice width
sh: 20, //slice height
images: 1
}
var settings = $.extend(defaults, settings);
return $(this).each(function(){
var opt = settings,
cont = $(this),
width = cont.innerWidth(),
height = cont.innerHeight(),
arr = [],
hc = Math.ceil(width/opt.sw), //horizontal slices count
vc = Math.ceil(height/opt.sh); //vertical slices count
if(opt.animation === 'vertical'){
var loaded = false;
cont.empty();
for(v = 0; v < vc; v++){
for(h = 0; h < hc; h++){
if(v == 1) cont.append('<div class="bar" id="bar' + h + '"></div>');
var slices = {
src: '<img class="square" id="slice' + h.toString() + v.toString() + '" src="shred/squares/img1' + v.toString() + h.toString() + '.jpg"/>',
x: h * opt.sw, //offset left
y: v * opt.sh, //offset top
id: h.toString() + v.toString()
}
arr.push(slices);
}
}
$.each(arr, function(index, value){
for(d = 0; d < hc; d++){
if(arr[index].x == d * opt.sw){
cont.find('#bar' + d).append(arr[index].src);
cont.find('#slice' + arr[index].id).css({'top': arr[index].y, 'left': 0});
}
loaded = (d == hc -1) ? true : false;
}
});
if(loaded){
$('.bar').css({'width': opt.sw, 'height': vc * opt.sh, 'overflow': 'hidden', 'top': 0, 'left': width + opt.sh});
function slidein(h, del){setTimeout(function(){
cont.find('#bar' + h).stop().animate({
'left': h * opt.sw,
'opacity': 1}, opt.speed*10)}, del + 2000);
}
function slideout(h, del){setTimeout(function(){
cont.find('div#bar' + h).stop().animate({
'width': 0,
'opacity': 0}, opt.speed*6)}, 10000 - h * 100);
}
for(h = 0; h < hc; h++){
var del = h * opt.speed;
slidein(h, del);
slideout(h, del);
}
}
}
});
}
})
})(jQuery);