خلق هيئه الشارع التفاعلية مع jQuery

كل ما عليك هو عمل سلسلة من الصور لتظهر من خلالها حركة الشارع:

</pre>
<div id="main" style="height: 2500px;">
<div>
<h1>Scroll Tutorial - #1</h1>
</div>
<div>        <video width="320" height="240" autobuffer="" poster="../shared/street/vid-0001.jpg"><source src="../shared/street.mp4" type="video/mp4" /><source src="../shared/street.webm" type="video/webm" /><object width="320" height="240" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://webdesign.fwasl.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=/shared/street.mp4&poster=/shared/street/vid-0001.jpg" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /><embed width="320" height="240" type="application/x-shockwave-flash" src="http://webdesign.fwasl.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=/shared/street.mp4&poster=/shared/street/vid-0001.jpg" allowfullscreen="true" allowscriptaccess="true" /></object>

</video></div>
<div style="top: 100px; left: 130px;">        #1</div>
<div style="top: 800px; right: 130px;">    #2</div>
<div style="top: 1000px; left: 130px;">        #3</div>
<div style="top: 1500px; left: 130px;">        #4</div>
<div style="top: 2100px; right: 130px;">        #5</div>
</div>
<pre>

يجب قياس حجم وتخزين أبعاد النافذة وارتفاع التمرير الأقصى ، وتغيير حجم الفيديو بحيث يملأ الإطار دائما

هنا كيف يتم تحقيق هذا :

نقوم بتخزين الوثيقة ونافذة في المتغيرات، لذلك لا يتوجب علينا إنشاء كائنات في كل مرة :

var $doc = $(document);
var $win = $(window);
var $videoContainer = $('.street-view');
var video = $('.street-view > video')[0];

تعريف المتغيرات عرض الإطار والارتفاع ، (انظر calculateDimensions ()).

var windowHeight, windowWidth;
var fullHeight, scrollHeight;

نحدد أبعاد الصور المخزنة في الثوابت (وإلا سيكون علينا الانتظار حتى يتم تحميل الصور أو الفيديو قبل أن نتمكن من تغيير حجم الحاويات في الواقع).

var streetImgWidth = 1024, streetImgHeight = 640;

نحن نريد الحفاظ على الوضع الحالي التمرير (بين 0 و 1) في المتغير.

var currentPosition = 0;

في كل مرة يتم تغيير حجم الإطار نحن بحاجة إلى إعادة حساب الأبعاد، تغيير حجم صورة وخلفية / الفيديو واستدعاء معالج التمرير.

function calculateDimensions() {
windowWidth = $win.width();
windowHeight = $win.height();
fullHeight = $('#main').height();
scrollHeight = fullHeight - windowHeight;
}
function handleResize() {
calculateDimensions();
resizeBackgroundImage();
handleScroll();
}
function resizeBackgroundImage(){
// get image container size
var scale = Math.max( windowHeight/streetImgHeight , windowWidth/streetImgWidth );
var width = scale * streetImgWidth , height = scale * streetImgHeight;
var left = (windowWidth-width)/2, top = (windowHeight-height)/2;
$videoContainer
.width(width).height(height)
.css('position','fixed')
.css('left',left+'px')
.css('top',top+'px');
}

الآن كل ما تبقى هو التأكد من أن كل مرة يتم تمرير الوثيقة، سوف ننتقل إلى موقف وفق داخل الفيديو :

function handleScroll() {
currentPosition = $win.scrollTop() / scrollHeight;
render( currentPosition );
}
function render( position ) {
if ( video.duration ) {
video.currentTime = position * video.duration;
}
}

قم بدعوة “handleResize ()” للتأكد من أن كل شيء في layouted في حجمها الصحيح.

$win.resize( handleResize );
$win.scroll( handleScroll );

handleResize();

وهذا هو التنفيذ اضغط هنـــــــــــــــــــــا