JavaScript Effect: Một sáng tạo khi sử dụng ký tự * để tạo hình một bông hoa.

Đoạn mã JavaScript dưới đây rất thú vị tuy không phù hợp khi áp dụng thực tế, nhưng nó lại là một ý tưởng sáng khá hay trong việc sử dụng JavaScript để thiết kế và nó có thể giúp bạn suy nghĩ ra một cái gì đó mới mẻ nhờ vào sự sáng tạo này.


Hỗ trợ trình duyệt: Firefox, IE, Chrome, Safari, Opera

JavaScript Effect Source:
--------------------------
<html>
<body>

    <script LANGUAGE="JavaScript1.2">
        <!--


        //set Interval between each firework display,
        var intervals = 2000
        var sparksOn = true;
        var speed = 25;
        var power = 1;

        //Dont change these values-------
        var documentWidth = documentHeight = randomx = randomy = leftcorner = topcorner = 0
        var ns = (document.layers);
        var ie = (document.all);
        var sparksAflyin = false;
        var allDivs = new Array(10);
        var totalSparks = 0;
        //-------------------------------

        function initAll() {
            if (!ns && !ie) {
                sparksOn = false;
                return;
            }
            setInterval("firework()", intervals)

            if (ns)
                document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
            for (dNum = 0; dNum < 7; ++dNum) {
                if (ie)
                    allDivs[dNum] = eval('document.all.sDiv' + dNum + '.style');
                else
                    allDivs[dNum] = eval('document.layers["sDiv' + dNum + '"]');
            }
        }

        function firework() {
            //below code detects the browser dimenions
            if (ie) {
                documentWidth = document.body.clientWidth
                documentHeight = document.body.clientHeight
                leftcorner = document.body.scrollLeft
                topcorner = document.body.scrollTop
            } else if (ns) {
                documentWidth = window.innerWidth
                documentHeight = window.innerHeight
                leftcorner = pageXOffset
                topcorner = pageYOffset

            }
            //below code randomly generates a set of coordinates that fall within the dimension
            randomx = leftcorner + Math.floor(Math.random() * documentWidth)
            randomy = topcorner + Math.floor(Math.random() * documentHeight)


            if (sparksOn) {
                if (!sparksAflyin) {
                    sparksAflyin = true;
                    totalSparks = 0;
                    for (var spark = 0; spark <= 6; spark++) {
                        dx = Math.round(Math.random() * 50);
                        dy = Math.round(Math.random() * 50);
                        moveTo(spark, randomx, randomy, dx, dy);
                    }
                }
            }
        }

        function moveTo(i, tempx, tempy, dx, dy) {
            if (ie) {
                if (tempy + 80 > (document.body.offsetHeight + document.body.scrollTop))
                    tempy = document.body.offsetHeight + document.body.scrollTop - 80;
                if (tempx + 80 > (document.body.offsetWidth + document.body.scrollLeft))
                    tempx = document.body.offsetWidth + document.body.scrollLeft - 80;
            }
            if (tempx > -50 && tempy > -50) {
                tempx += dx;
                tempy += dy;
                allDivs[i].left = tempx;
                allDivs[i].top = tempy;
                dx -= power;
                dy -= power;
                setTimeout("moveTo(" + i + "," + tempx + "," + tempy + "," + dx + "," + dy + ")", speed)
            } else
                ++totalSparks
            if (totalSparks == 7) {
                sparksAflyin = false;
                totalSparks = 0;
            }
        }
        window.onload = initAll
            //End-->
    </script>
    <style>
        #sDiv0 {
            position: absolute;
            height: 1;
            width: 1;
            font-family: arial black;
            font-size: 25px;
            color: Aqua;
        }
     
        #sDiv1 {
            position: absolute;
            height: 1;
            width: 1;
            font-family: arial black;
            font-size: 22px;
            color: red;
        }
     
        #sDiv2 {
            position: absolute;
            height: 1;
            width: 1;
            font-family: arial black;
            font-size: 20px;
            color: blue;
        }
     
        #sDiv3 {
            position: absolute;
            height: 1;
            width: 1;
            font-family: arial black;
            font-size: 15px;
            color: orange;
        }
     
        #sDiv4 {
            position: absolute;
            height: 1;
            width: 1;
            font-family: arial black;
            font-size: 25px;
            color: yellow;
        }
     
        #sDiv5 {
            position: absolute;
            height: 1;
            width: 1;
            font-family: arial black;
            font-size: 25px;
            color: lightgreen;
        }
     
        #sDiv6 {
            position: absolute;
            height: 1;
            width: 1;
            font-family: arial black;
            font-size: 20px;
            color: silver;
        }
    </style>
    <p></p>
    <div id="sDiv0">
        *</div>
    <div id="sDiv1">
        *</div>
    <div id="sDiv2">
        *</div>
    <div id="sDiv3">
        *</div>
    <div id="sDiv4">
        *</div>
    <div id="sDiv5">
        *</div>
    <div id="sDiv6">
        *</div>
    <br />

</body>
</html>
-------------------------






Posted by at
Labels: , , , , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)