كيف تصنع صورة متحركة مصورة

.button{background:url('off-state.png');}.button:hover{background:url('over-state.png');}.button:active{background:url('down-state.png');}

.button{display:block;width:200px;height:83px;background:url('button-states.jpg');}.button:hover{background-position:-200px;}.button:active{background-position:-400px;}

Next, we need to import jQuery in the head of the page: Then we use jQuery to set the display type (block) the width (500px to match the width of one 'frame' of our image) the height (203px) and the background of our link: ); Finally, we need to set the background so that the correct portion of our image is displayed; each 'frame' is 500px wide, so to show the first frame the x position of the background image should be 0px, to show the second it will be -500px, the third will be -1000px and so forth. Using a mousemove handler function, we can calculate the relative position of the cursor over the element as a percentage; we subtract the element's offset position from the event's pageX (this treats the left edge of the element as 0), then divide by the width of the element. Having done so we calculate the position of the background image by multiplying the percentage position by the total size of the composite image. We need the final result to be multiples of the element width (500px) so we divide the result by that value, round down using Math.floor(), then multiply back up to cancel out the division; if we don't do this the image will simply scroll 1px at a time. We subtract the resulting value from 0 so that all possible values are negative. Then we apply the background-position with CSS: The full script looks like this: );}); Western Norway at sunrise

$(document).ready(function() {$('#preview').css('display', 'block').css('width', 500).css('height', 203).css('background', 'url("our-image.jpg") no-repeat');} Next, we need to import jQuery in the head of the page: Then we use jQuery to set the display type (block) the width (500px to match the width of one 'frame' of our image) the height (203px) and the background of our link: ); Finally, we need to set the background so that the correct portion of our image is displayed; each 'frame' is 500px wide, so to show the first frame the x position of the background image should be 0px, to show the second it will be -500px, the third will be -1000px and so forth. Using a mousemove handler function, we can calculate the relative position of the cursor over the element as a percentage; we subtract the element's offset position from the event's pageX (this treats the left edge of the element as 0), then divide by the width of the element. Having done so we calculate the position of the background image by multiplying the percentage position by the total size of the composite image. We need the final result to be multiples of the element width (500px) so we divide the result by that value, round down using Math.floor(), then multiply back up to cancel out the division; if we don't do this the image will simply scroll 1px at a time. We subtract the resulting value from 0 so that all possible values are negative. Then we apply the background-position with CSS: The full script looks like this: );});  Western Norway at sunrise

Next, we need to import jQuery in the head of the page: Then we use jQuery to set the display type (block) the width (500px to match the width of one 'frame' of our image) the height (203px) and the background of our link: ); Finally, we need to set the background so that the correct portion of our image is displayed; each 'frame' is 500px wide, so to show the first frame the x position of the background image should be 0px, to show the second it will be -500px, the third will be -1000px and so forth. Using a mousemove handler function, we can calculate the relative position of the cursor over the element as a percentage; we subtract the element's offset position from the event's pageX (this treats the left edge of the element as 0), then divide by the width of the element. Having done so we calculate the position of the background image by multiplying the percentage position by the total size of the composite image. We need the final result to be multiples of the element width (500px) so we divide the result by that value, round down using Math.floor(), then multiply back up to cancel out the division; if we don't do this the image will simply scroll 1px at a time. We subtract the resulting value from 0 so that all possible values are negative. Then we apply the background-position with CSS: The full script looks like this: );}); Western Norway at sunrise

.mousemove(function(e) {var elementWidth = 500;var mousePercent = (e.pageX - this.offsetLeft) / elementWidth;var bgPosition = 0 - Math.floor((mousePercent * 5000) / elementWidth) * elementWidth;$(this).css('background-position', '-' + bgPosition + 'px 0px');});

Next, we need to import jQuery in the head of the page: Then we use jQuery to set the display type (block) the width (500px to match the width of one 'frame' of our image) the height (203px) and the background of our link: ); Finally, we need to set the background so that the correct portion of our image is displayed; each 'frame' is 500px wide, so to show the first frame the x position of the background image should be 0px, to show the second it will be -500px, the third will be -1000px and so forth. Using a mousemove handler function, we can calculate the relative position of the cursor over the element as a percentage; we subtract the element's offset position from the event's pageX (this treats the left edge of the element as 0), then divide by the width of the element. Having done so we calculate the position of the background image by multiplying the percentage position by the total size of the composite image. We need the final result to be multiples of the element width (500px) so we divide the result by that value, round down using Math.floor(), then multiply back up to cancel out the division; if we don't do this the image will simply scroll 1px at a time. We subtract the resulting value from 0 so that all possible values are negative. Then we apply the background-position with CSS: The full script looks like this: );}); Western Norway at sunrise

demo  Next, we need to import jQuery in the head of the page: Then we use jQuery to set the display type (block) the width (500px to match the width of one 'frame' of our image) the height (203px) and the background of our link: ); Finally, we need to set the background so that the correct portion of our image is displayed; each 'frame' is 500px wide, so to show the first frame the x position of the background image should be 0px, to show the second it will be -500px, the third will be -1000px and so forth. Using a mousemove handler function, we can calculate the relative position of the cursor over the element as a percentage; we subtract the element's offset position from the event's pageX (this treats the left edge of the element as 0), then divide by the width of the element. Having done so we calculate the position of the background image by multiplying the percentage position by the total size of the composite image. We need the final result to be multiples of the element width (500px) so we divide the result by that value, round down using Math.floor(), then multiply back up to cancel out the division; if we don't do this the image will simply scroll 1px at a time. We subtract the resulting value from 0 so that all possible values are negative. Then we apply the background-position with CSS: The full script looks like this: );});  Western Norway at sunrise

استنتاج

هناك بعض الأمور التي يجب وضعها في الاعتبار: أولاً ، سيكون من الممكن إنشاء صورة مصغرة مع مئات "الإطارات" ، ولكن في حين أن ذلك سيؤدي إلى رسم متحرك سلس للغاية ، سيستغرق تحميله وقتًا طويلاً أيضًا ؛ ثانيًا ، لا يعمل اكتشاف موضع الماوس ببساطة على جهاز يعمل باللمس ، لذلك فإن هذه التقنية لن تضر في الواقع بالقدرة على الاستخدام على جهاز جوال لا تكتسبه.

الغرض من الصورة المصغرة هو تقديم مزيد من المعلومات إلى المستخدم حول ما يكمن في الطرف الآخر من الرابط ، وعندما يكون المورد الذي ترتبط به هو فيديو ، لا تكون صورة واحدة في الغالب معلومات كافية. يعد توسيع تقنية CSS sprite طريقة بسيطة وفعالة لمعاينة أكثر من إطار واحد.

كيف تقوم بمعاينة الفيديو في الصور المصغرة؟ هل تستخدم أكثر من صورة واحدة؟ اسمحوا لنا أن نعرف في التعليقات.

المغلق سهولة الاستخدام مسج المغلق العفاريت معاينات للفيديو الصور المصغرة الفيديو

كيفية جعل صورة متحركة مصغرة

كيف تعمل CSS sprites

استنتاج