Home > Developer > Web Develop
Simple page effects (continuous collection and updates), page effect collection and updates
Introduction: you can write your own code or view it on the Internet. Even others write it, you can modify it, add comments, and maintain a unified coding style for ease of reading. The goal is to do this without using a database. simply do it, you can elaborate on the logic and principles clearly. Therefore, it may not be the most thorough consideration, including cross-browser issues, if you plan to use it in the project, it is best to test it clearly and you may need to modify it further.
Note: We plan to provide online examples, but there is no static space in a short period of time. Therefore, we need to wait for a while.Online examples are provided.
1. Simple drag-and-drop effectWhen the DOM 1 method is used to register events, there is no need for addEventListener, because according to the mouse event, there is usually only one mousemove/mouseup event in the document at the same time. Click to view the example.
<Meta charset = "UTF-8"/> <title> drag and drop DD </title> <script> SimpleDrag = function (el) {this. el = el; this. _ x = this. _ y = 0; el. onmousedown = delegate (this, this. start); this. move = delegate (this, this. move); function delegate (object, fn) {// bind the current this and correct the browser compatibility problem e | window. event return function (e) {return fn. call (object, (e | window. event) ;}}; SimpleDrag. prototype = {start: function (e) {this. _ x = e. clientX-this. el. offsetLeft; this. _ y = e. clientY-this. el. offsetTop; document. onmousemove = this. move; document. onmouseup = this. stop ;}, // drag move: function (e) {this. el. style. left = e. clientX-this. _ x + "px"; this. el. style. top = e. clientY-this. _ y + "px" ;}, // stop dragging stop: function () {document. onmousemove = document. onmouseup = null ;}}; </script> <style>. dragable {background-color: # C4E3FD; width: 50px; height: 50px; position: absolute; left: 20px; cursor: move ;}. dragEl_1 {top: 10px; border: 5px solid blue ;}. dragEl_2 {top: 80px; border: 5px solid red ;} </style> <div class = "dragable dragEl_1"> 1 </div> <div class = "dragable dragEl_2"> 2 </div> <script> new SimpleDrag (document. querySelector (". dragEl_1 "); new SimpleDrag (document. querySelector (". dragEl_2 "); </script>2. Scroll up and down content
The principle is to extract the final element and put it in front. Click to view the example.
<Html> 3. Scroll left and right contentThe principle is the same as that of the former, but it is simpler to replace elements with strings. Click to view online examples.
<Meta charset = "UTF-8"/> <title> horizontal subtitle scrolling </title> <div class = "content1"> This is a scrolling text 11111111 </div> <div class = "content2"> This is a piece of scrolling text 22222222 </div> <script>/*** @ param {Element} el list Element * @ param {Number} interval animation time interval * @ param {Boolean} Can canstop the animation when you move the cursor in? */function ScrollContent_Hoz (el, interval, canstop) {interval = interval | 500; canstop = canstop | false; var arr = el. innerHTML. split (""); function scroll () {arr. push (arr. shift (); el. innerHTML = arr. join ("");} var t = window. setInterval (scroll, interval); if (canstop) {el. onmouseover = function () {if (t) window. clearInterval (t);} el. onmouseout = function () {t = window. setInterval (scroll, interval) ;}} new ScrollContent_Hoz (document. querySelector ('. content1 '); new ScrollContent_Hoz (document. querySelector ('. content2 '), null, true); </script>3. Multi-level linkage drop-down menuThere are no major difficulties in association, but the onchange event can be used. It is worth mentioning that this demonstrates the calendar generation algorithm involved in the calendar control-of course, this is not the case. Click to view online examples.
<Meta charset = "UTF-8"> <title> association Select drop-down </title> <select id = "year"> <option value = "0"> -- Select -- </ option> </select> year <select id = "month"> <option value = "0"> -- select -- </option> </select> month <select id = "month"> "day"> <option value = "0"> -- select -- </option> </select> <script> function initSelect (selectEl, i, end) {selectEl. length = 1; for (; I <= end; I ++) {try {selectEl. add (new Option (I, I), null);} catch (e) {selectEl. add (new Opti On (I, I) ;}}var year = document. getElementById ("year"); var month = document. getElementById ("month"); var day = document. getElementById ("day"); initSelect (year, 1970,201 2); year. onchange = function () {if (this. value! = 0) {initSelect (month, 1, 12);} else {month. length = 1; day. length = 1 ;}} month. onchange = function () {if (this. value! = 0) {var m30 = {2: 1}; if (this. value = 2) {// special if (isLeapYear (year. value) initSelect (day, 1, 29); else initSelect (day, 1, 28);} else if (this. value in m30) // 30 days of the month/* because 2, 4, 6, 9, and March are all 30 days, if you put them in an array, it is troublesome to traverse to determine whether the values are equal, so here we treat these items as objects and use in to determine */initSelect (day, 1, 30 ); else initSelect (day, 1, 31);} else day. length = 1;} // condition for determining a leap year: it can be divisible by 4 and cannot be divisible by 100 or be divisible by 100 and can be divisible by 400 Divisible function isLeapYear (y) {return (y % 4 = 0 & y % 100! = 0) | (y % 100 = 0 & y % 400 = 0) ;}</script>Http://www.zgwlsc.net/lstore/static/src/widget/carousel/main.js
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
