Προγραμματισμός

Γνώση Υπολογιστών >> Προγραμματισμός >  >> JavaScript Προγραμματισμός

Πώς να Ελέγχου κύλισης με Javascript

Από JavaScript είναι ένα client-side γλώσσα που τρέχει σχετικά με το κοινό πρόγραμμα περιήγησης , μπορεί να χρησιμοποιηθεί για την εμφάνιση διαδραστικών ιστοσελίδων . JavaScript μπορεί να χρησιμοποιηθεί για τον έλεγχο των χαρακτηριστικών παράθυρο κύλισης μιας σελίδας web . Στην πραγματικότητα , είναι δυνατό να δημιουργήσει ένα pop-up παράθυρο που δεν έχει γραμμές κύλισης σε όλα με τη χρήση JavaScript . Για Javascript για να προσφέρουν όμως αυτό το επίπεδο διαδραστικότητας , θα πρέπει να συνδέεται τόσο αρχεία CSS και JavaScript . Οδηγίες
Η

1 Ανοίξτε την εφαρμογή επεξεργασίας HTML σας και να κηρύξει 2 divs στο έγγραφο με τίτλο " κύλισης " και " Scroll . " Divs είναι ετικέτες που ορίζουν λογικές διαιρέσεις σε ιστοσελίδες εντός περιεχόμενο της ιστοσελίδας και μπορούν να προστεθούν με τον ίδιο τρόπο όπως προστίθενται οι πίνακες και τα κελιά του πίνακα . Τα στοιχεία του πρώτου κύλισης στη σελίδα HTML θα πρέπει να μοιάζει κάπως έτσι :

Έλεγχος κύλισης με JavaScript < /κεραμίδι > < /head> <body> <div ... id="scrollholder" class="scrollholder"> <div id="scroll" class="scroll"> ... τοποθετήσετε το περιεχόμενο κύλιση σας εδώ ... < /div > < /div > <script type="text/javascript"> < - ! ScrollLoad ( " scrollholder " , " κύλιση " , αλήθεια ) ;//- > < /script > ... < /body> <br> <p> Τοποθετήστε το περιεχόμενο ιστοσελίδων στις 2 divs 2 <br> <p> κρίνει την αρχεία CSS και JavaScript σε . η κεφαλίδα της σελίδας HTML ως εξής : <br> <p> <head> ... < link rel = Τύπος " στυλ " = " text /css " href = " scroll.css " mce_href = " scroll.css " media = " οθόνη , προβολής " /> Προσθέστε την επιχείρηση σας language="JavaScript" src="scroll.js" mce_src="scroll.js"> < /script > ... < /head> <br> <p> Τοποθετήστε τα στοιχεία της δεύτερης και άλλα κύλισης στη σελίδα HTML ως εξής : <br> <p> ... <div id="scrollholder2" class="scrollholder"> ? <div id="scroll2" class="scroll"> ... τοποθετήσετε το περιεχόμενο κύλιση σας εδώ ... < /div > < /div > <script type="text/javascript"> < - ! ScrollLoad ( " scrollholder2 " , " scroll2 " , false ) ;//- > < /script > ... <br> εικόνων 3 <p> Δημιουργήστε το αρχείο " Scroll.js " και αντιγράψτε τον ακόλουθο κώδικα στο αρχείο : <br> <p> /* αριθμός κύλιση αντικειμένων * /document.No = 0 ? <br> <p> var isOpera = ( window.navigator.userAgent.indexOf ( "Opera" ) > -1) ? <br> <p> λειτουργία ScrollLoad ( Περιοχή , Περιεχόμενο , SettingTracSize ) { var κωδικός = " var scroller " + document.No + " = νέα dw_scrollObj ( Area , Περιεχόμενο, Περιεχόμενο , περιοχή , document.No ) ? " ? εάν ( SettingTracSize ) κωδικός + = " scroller " + έγγραφο . Όχι + " setBarSize ( ) ? . "? eval (κωδικός ) ? makeMouseWheeleScrolling ( Περιοχή ) ? document.No + + ? } <br> <p> /* <Mouse τροχό mouseWheelTimer scrolling> * /var = 0 ? <br> <p> makeMouseWheeleScrolling λειτουργία ( objName ) { var obj = document.getElementById ( objName ) ? <br> <p> αν ( obj.addEventListener ) { obj.addEventListener ( " DOMMouseScroll " , τροχός , ψευδής) ? } obj.onmousewheel = τροχό ? } <br> <p> Moveup λειτουργία ( μητρική) { dw_scrollObj.initScroll ( parent.id , " επάνω" ) ? clearInterval ( mouseWheelTimer ) ? mouseWheelTimer = setTimeout ( " mouseStop ( " + parent.id + " ) ? " , 200 ) ? } <br> <p> MoveDown λειτουργία ( μητρική) { dw_scrollObj.initScroll ( parent.id , " κάτω " ) ? clearInterval ( mouseWheelTimer ) ? mouseWheelTimer = setTimeout ( " mouseStop ( " + parent.id + " " ) ? " , 200 ) ? } <br> <p> λειτουργία mouseStop ( parentId ) { dw_scrollObj.stopScroll ( parentId ) ? mouseWheelTimer = 0 ? } <br> <p> /* λειτουργίες ποντίκι με τροχό κύλισης στο ποντίκι EFECT τροχού επί του αντικειμένου με js μου κύλισης * /λαβή λειτουργίας ( δέλτα , γονέας ) { var s = δ + " : " ? αν ( δ < 0 ) { εάν ( isOpera ) Moveup ( μητρική) ? elsemoveDown (μητρική ) ? } else { if ( isOpera ) MoveDown ( μητρική) ? elsemoveUp ( μητρική) ? } } <br> <p> τροχό λειτουργία ( γεγονός) { var δέλτα = 0 ? ( ! περίπτωση ) εάν event = window.event ? εάν ( event. wheelDelta ) { δέλτα = event.wheelDelta/120 ? εάν ( window.opera ) delta -delta = ? } else if ( event.detail ) { δέλτα = - event.detail /3 ? } αν ( δ ) λαβή ( δέλτα , αυτό ) .?} /* < τροχού /ποντίκι κύλισης > * /<br> Η 4 <p> Βεβαιωθείτε ότι όλα τα αρχεία σας είναι αποθηκευμένα στον ίδιο φάκελο και να εκτελέσετε τη σελίδα HTML για να ελέγξετε <br> Η < br > <br> Η <div class="grad2"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3314932315682382" crossorigin="anonymous"></script> <!-- 221021-2 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3314932315682382" data-ad-slot="8094203668" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <div class="grad3"></div> </div> <div class="fanyedads"> <ul> <li>Τελευταίο άρθρο: <a class='LinkPrevArticle' href='http://www.221021.com/Programming/javascript-programming/91225.html' >Πώς να διαγνώσουν προβλήματα με Javascript </a> <li>Επόμενο άρθρο: <a class='LinkNextArticle' href='http://www.221021.com/Programming/javascript-programming/91227.html' >Πώς να ελέγξετε μια ιστοσελίδα για ένα Bug JavaScript </a> </ul> </div> </div> <div class="woqinimaderwr24"> <div class="dibud23"> <div class="biaotidas51"> <div class="biaotidas511"><h3>Συναφής σύστασή</h3></div> <div class="butudasda"></div> </div> </div> <div class="dibud24"> <div class="dibud241"> <ul class="dsa31das"> <li><a href="http://www.221021.com/Programming/javascript-programming/90749.html" target="_blank">Έγινε , αλλά με λάθη στον IE JS Object Αναμενόμενη </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/90830.html" target="_blank">Πώς να Προσθήκη Analytics για LightBox </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/91145.html" target="_blank">Τρόπος απενεργοποίησης της επιλογής HTML Text </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/91031.html" target="_blank">Πώς να ανιχνεύσει ένα πρόγραμμα περιήγησης Safari σε JavaScript </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/91124.html" target="_blank">Πώς να χρησιμοποιήσετε το Microsoft Script Debugger </a></li> </ul> </div> <div class="dibud242"> <div class="biaotidasoidasf3h4"> <h4>Τελευταία άρθρα</h4> <div class="nibushihenzaiyi"></div> </div> <ul class="thydghaodennrend"> <li><a href="http://www.221021.com/Programming/javascript-programming/90851.html" target="_blank">Πώς να ενημερώσετε Συνεδρία μεταβλητές </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/278200.html" target="_blank">Ποιες λειτουργίες αρχείων μπορεί να εκτελέσει η JavaScript σε έναν υπολογιστή-πελάτη; </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/90957.html" target="_blank">OnMouseOver Στυλ </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/91003.html" target="_blank">Πώς να καλέσετε PHP λειτουργίες με jQuery </a></li> </ul> </div> </div> </div> <div class="dibudaohnagdsaw"> <div class="das342sd"><p>Πνευματικά δικαιώματα © <a href="http://www.221021.com/" target="_blank" >Γνώση Υπολογιστών</a> Όλα τα δικαιώματα κατοχυρωμένα </p></div> </div> </div> </body> </html>