ページが横にスライドするこのウェブサイトを作成しています。ページの1つ(メディア)には、高さ60ピクセル、幅80ピクセルの10〜15枚の画像が含まれています。問題は、ページを自宅から「移動」させて連絡するときに、Chromeのメディアページが原因でスライドがわずかに遅れることです。ただし、このわずかな遅延はFirefoxやIEにはないことに気づきました。実際、スムーズに進んでいます。ですから、私はすでにすべての写真をより小さなサイズ(60kb程度)で作成しているので、サイズ変更以外の修正があるかどうか疑問に思っています。
事前にご提案ありがとうございます
形式は基本的に次のようになります。
<div class="pannel"><br/> <br/>
<a href="images/a (74).jpg" class="mediaPhotos"><img src="images/a (74).jpg"/></a>
<a href="images/a (75).jpg" class="mediaPhotos"><img src="images/a (75).jpg"/></a>
<a href="images/a (76).jpg" class="mediaPhotos"><img src="images/a (76).jpg"/></a>
<a href="images/a (77).jpg" class="mediaPhotos"><img src="images/a (77).jpg"/></a>
<a href="images/a (78).jpg" class="mediaPhotos"><img src="images/a (78).jpg"/></a>
<a href="images/a (79).jpg" class="mediaPhotos"><img src="images/a (79).jpg"/></a>
<a href="images/a (80).jpg" class="mediaPhotos"><img src="images/a (80).jpg"/></a>
<a href="images/a (81).jpg" class="mediaPhotos"><img src="images/a (81).jpg"/></a>
<a href="images/a (82).jpg" class="mediaPhotos"><img src="images/a (82).jpg"/></a>
<a href="images/a (83).jpg" class="mediaPhotos"><img src="images/a (83).jpg"/></a>
<a href="images/a (84).jpg" class="mediaPhotos"><img src="images/a (84).jpg"/></a>
</div>
.panel {
float : left;
height : 800px;
padding-right : 1000px;
width : 850px;
}
.mediaPhotos img {
border : 3px solid #bfb886;
border-radius : 5px;
height : 60px;
width : 80px;
}
$(document).ready(function() {
$("#menuFloat a").bind("click",function(event){ event.preventDefault();
var target = $(this).attr("href");
$("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200);
}); });
基本的panel
には、各ページの大きさであり、各ページの左側に浮かんでいます。
リンク: http: //permika-montreal.tk/new.php