Home > Developer > Web Develop

A javascript congratulation code with good compatibility and automatic changes (different congratulation words are automatically displayed according to different festivals)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

When I was doing a website, especially for official websites, I usually had to give some congratulatory comments to my employees during some festivals. It would be a lot of trouble if I had to PS a holiday and change it, as a programmer, we should not do so many repetitive things. So I spent a year on Several holiday festivals, then, use javascript to show the effects of some floating images. The key is to dynamically bind the src path to the html label, then, the acquired month is concatenated by a string to dynamically display the congratulation.

Of course, when you do not need a congratulation, you only need to hide the corresponding congratulation. (because this cainiao is not dedicated to the UI, so it really took a few hours), but we finally achieved the expected results. Well, let's share it with kids who have similar needs.


<!--advertisement code in html body--><body><!-- for advertisement  note: take the right pic path below and in ad.js path total four place--><div id="oImg" style="position: absolute; z-index: 100; top: 0; left: 0; width: 180px; height: 70px;"><a href="http://gh.swpu.edu.cn" target="_blank">    </a></div> <script type="text/javascript" src="festival/ad.js"></script><!--end  for advertisement --></body>


// Out link javascript code in ad. js window. onload = function () {var img = document. getElementById ('imgid'); var src = img. getAttribute ('src'); // care the right file path: festival/var month = (new Date (). getMonth () + 1 ). toString (); // alert (month ); if (month = '1' | month = '3' | month = '5' | month = '9' | month = '10') {img. setAttribute ('src', 'Festival/'{month}'.jpg '); img. style. display = "blo Ck ";} else {var div = document. getElementById ('osmg '); img. style. display = "none"; div. style. display = "none"; // hide without deleting}; var floatImg = document. getElementById ("oImg"); var delay = 10; // controls the interval of each execution. The longer the execution, the slower the movement. var speed = 1; // control the moving distance of each execution. The larger the value, the faster the movement. var flagX = 0; var flagY = 0; function toPixel (str1) {// This function is used to remove the px after the value and convert it to a number. Var oldLen = str1.length; var newLen = oldLen-2; str2 = str1.slice (0, newLen); str3 = parseInt (str2); return str3;} function flowImg () {var bWidth = document. body. clientWidth; var bHeight = document. body. clientHeight; var bLeft = document. body. scrollLeft; var bTop = document. body. scrollTop; var iWidth = floatImg. offsetWidth; var iHeight = floatImg. offsetHeight; var iLeft = toPixel (floatImg. style. left); var iTop = toPixel (floatImg. style. top); // The following section controls horizontal movement if (iLeft <(bWidth-iWidth) & flagX = 0) {floatImg. style. left = (iLeft + speed) + "px";} else if (iLeft >=( bWidth-iWidth) & flagX = 0) {flagX = 1 ;} else if (iLeft> 0 & flagX = 1) {floatImg. style. left = (iLeft-speed) + "px";} else if (0> = iLeft & flagX = 1) {flagX = 0 ;} // The following section controls vertical movement if (iTop <(bHeight-iHeight) & flagY = 0) {floatImg. style. top = (iTop + speed) + "px";} else if (iTop >=( bHeight-iHeight) & flagY = 0) {flagY = 1 ;} else if (iTop> 0 & flagY = 1) {floatImg. style. top = (iTop-speed) + "px";} else if (0 >=itop & flagY = 1) {flagY = 0 ;}} var imgInterval = setInterval ("flowImg ()", delay); floatImg. onmouseover = function () {clearInterval (imgInterval);} floatImg. onmouseout = function () {imgInterval = setInterval ("flowImg ()", delay );}

Note: Both my images and ad. js files are in the same festival folder as html files.

Below are some of the material congratulation images I used. If you need to download them and change the name (the last image cannot be displayed, I changed the suffix of the original javascript file and uploaded it. I want to download it myself ):

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
scp with different port check website compatibility in different browsers how to rename multiple files at once with different names how to renew domain name with different registrar different date formats in javascript copy resumed with different info countries with different time zones

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More