كنت أرغب في عمل عجلة الماوس التمرير بين الشاشات الأولى والثانية لتسوية تأثير التبديل. واجهت العديد من المشاكل. في وقت لاحق ، بمساعدة KK ، حللت هذه المشكلة أخيرًا. كنت سعيدًا جدًا ، لذا سجلته:
رمز بلدي الأولي يشبه هذا:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"/> <style> div {width: 700px ؛ الارتفاع: 1000px ؛} </viv> <viv> </viv> <viv> </viv> <viv> </viv> </body> <script src = "../ jquery/jquery.min.js"> </script> <script src = "test.js"> </script> </html> $ (document) .Ready (function () {var height = $ (window) .Height () ؛ // احصل على حجم المنطقة المرئية حاليًا في نافذة المتصفح // تبديل الشاشة بأكملها بعد تمرير الماوس var scrollfunc = function (e) {var scrolltop = document.body.scroltop || document.documentelement.scrollement ؛ window.event ؛ if (((e.wheeldelta <0 || إذا كان (e.wheeldelta> 0 || if (document.addeventListener) {document.addeventListener ('dommousescroll' ، scrollfunc ، false) ؛} window.onmousewheel = document.onmousewheel = scrollfunc ؛لقد اختبرت مثل هذه الرموز في IE و Firefox ، ولكن سيتم دائمًا تشغيل حدث OnMouseWheel عدة مرات تحت Google. هذا شيء مزعج للغاية. لماذا يتم تشغيله عدة مرات؟ بعد تصحيح الأخطاء ، وجدت أنه في كل مرة نقوم فيها بالتمرير للماوس ، تم التمرير دائمًا كثيرًا في وقت واحد ، بدلاً من التمرير ببطء بواسطة شبكة صغيرة وشبكة صغيرة واحدة. يؤدي ذلك إلى تشغيل حدث OnMousewheel عدة مرات عند التمرير ، ويتم استدعاء وظيفة Scrollfunc. عندما لا يتم تنفيذ الوظيفة المتحركة في الوظيفة ، سيتم تسميتها بشكل مستمر ، بحيث لا يمكن أن يتدحرج شريط التمرير ولا يمكن للصفحة أن ينشأ. لذلك ، قمت بتغيير رمز JS أعلاه إلى ما يلي:
$ (document) .Ready (function () {var height = $ (window) .Height () ؛ var scrollfunc = function (e) {document.onmousewheel = undefined ؛ var scrolltop = document.body.scrolltop || document.documentElement.scrolltop ؛ e = e || scrolltop> = 0 && scrolltop <height) {$ (document.body) .animate ({scrolltop: height} ، "fast" ، "linear" ، function () {document.onmousewheel = scrollfunc ؛} $ (document.documentElement) .animate ({scrolltop: height} ، "fast" ، = scrollfunc ؛}) ؛} آخر إذا ((e.wheeldelta> 0 || scrollfunc ؛}) ؛ $ (document.documentElement) .animate ({scrolltop: 0} ، "fast" ، "linear" ، function () {document.onmousewheel = scrollfunc ؛}) ؛}} ؛ if (document.addeventListener) {document.addeventListener ('dommousescroll' ، scrollfunc ، false) ؛} document.onmousewheel = scrollfunc ؛}) ؛حسنًا ، يعمل الرمز الآن بشكل طبيعي ، لكن بما أنني مبتدئ والرمز غير مكتوبة بشكل رائع ، فقد أخبرتني KK مرة أخرى. في مطالبه ، قمت بتعديل الرمز الزائد:
$ (document) .Ready (function () {var height = $ (window) .Height () ؛ var width = $ (window) .width () ؛ var body ؛ if (navigator.useragent.indexof ("firefox")> 0 || navigator.useragent.indexof ("msie")> 0) {body. isFinish = true ؛ var scrollfunc = function (e) {if (isfinish) {var scrolltop = e.detail <0) && scrolltop> = height && scrolltop <= height+20) {scroll (0) ؛}} ؛ var scroll = function (height) {isfinish = false ؛ $ (body) .animate ({scrolltop: height} ، true ؛}) ؛} ؛ if (navigator.useragent.indexof ("firefox")> 0) {if (document.addeventListener) {document.addeventListener ('dommescroll' ، scrollfunc ، false) ؛}}أخيرًا حصلت على رمز المقدمة. يجب أن أقول إنني تعلمت الكثير من خلال حل هذه المشكلة. في المستقبل ، يجب أن نعمل بجدية أكبر نحو هدف "الكتابة أقل ، بذل المزيد من الجهد"! ! !
إذا كان هناك أي خطأ في الكتابة ، فيرجى إعطائي نصيحة من جميع الماجستير ، وسوف أتعلم بتواضع.