يجب أن يكون لدى أولئك الذين استخدموا ARCGIS ذكرى عميقة لتأثير مصراع الأسطوانة في ARCMAP. إنهم يريدون نقله إلى نظام الويب الخاص بهم. مع نفس الفكرة ، قمت أيضًا ببعض الأبحاث حول تأثير مصراع الأسطوانة المبهج. إنه خارج والإبلاغ عن النتائج للجميع.
رؤية هذا التأثير ، هل قمت بنقل الفرخ؟ Hehe ، لا تقلق ، استمع إلي ببطء.
أولا ، الحاوية. يتم استخدام اثنين من divs لعرض الصور من فترتين مختلفتين. بعد ذلك ، قم بتعيين نمط الحاوين ، الرمز:
#before {position: absolute ؛ أعلى: 0px ؛ اليسار: 0px ؛ صورة الخلفية: url (../images/24.jpg) ؛ العرض: 940 بكسل ؛ الارتفاع: 529px ؛ تكرار الخلفية: عدم التكرار ؛ } #before {position: absolute ؛ أعلى: 0px ؛ اليسار: 0px ؛ اليمين الحدودي: 3 بكسل Solid #F00 ؛ صورة الخلفية: url (../images/23.jpg) ؛ العرض: 433px ؛ الارتفاع: 529px ؛ تكرار الخلفية: عدم التكرار ؛ Max-Width: 940px ؛ }وبهذه الطريقة ، سيتم عرض الصورة على الويب.
بعد ذلك ، تحقيق تأثير مصراع الأسطوانة. لتنفيذ مصراع الأسطوانة ، أهم شيء هو تعيين عرض ما قبل. كيف تضعه؟ هو للحصول على موقف الماوس. الرمز كما يلي:
دالة Rollimage (evt) {var x = evt.pagex ؛ console.log (x) ؛ $ ("#قبل"). css ("العرض" ، x+"px") ؛ } /script>وبهذه الطريقة ، يتم تحقيق تأثير مصراع الأسطوانة. رمز المصدر كما يلي:
style.css
. الارتفاع: 529px ؛ } #بعد الموضع: Absolute ؛ أعلى: 0px ؛ اليسار: 0px ؛ صورة الخلفية: url (../images/24.jpg) ؛ العرض: 940 بكسل ؛ الارتفاع: 529px ؛ تكرار الخلفية: عدم التكرار ؛ } #before {position: absolute ؛ أعلى: 0px ؛ اليسار: 0px ؛ اليمين الحدودي: 3 بكسل Solid #F00 ؛ صورة الخلفية: url (../images/23.jpg) ؛ العرض: 433px ؛ الارتفاع: 529px ؛ تكرار الخلفية: عدم التكرار ؛ Max-Width: 940px ؛ }test.html
<html lang = "zh-cn" xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> مقارنة قبل وبعد محتوى "محتوى" و "charset". http-equiv = "content-language" content = "zh-cn"> <link href = "css/roll.css" type = "text/css" rel = "stylesheet"> <script src = "../ jquery -1.8.js" type = javascript " الدالة Rollimage (evt) {<strong> var x = evt.pagex ؛ $ ("#قبل").