عکس معلق در صفحه

مطالب آموزشي

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : اين کد باعث معلق شدن عکس در صفحه می گردد. يک عکس بنام image.jpg در پوشه ای که صفحه وب اين کد قرار دارد بگذاريد و يا اينکه در تگ img در انتهای کد، نام عکس مورد نظر خود را بجای image.jpg بنويسيد. بعد از ذخيره کردن سند اچ تی ام ال و قرار دادن عکس در همان پوشه می توانيد با فشردن دکمه s سرعت عکس را زياد و دکمه d روی کيبورد، سرعت عکس را کاهش دهيد.

//**************************************
// Name: Bouncing image
// Description:Bounces a picture round the screen
// By: Alex Wray
//
//
// Inputs:None
//
// Returns:None
//
//Assumes:Just create an image called image.jpg in the same folder as the page.  It's just a nice little effect. Secret effects! Press D to slow it down, S to  speed it up and R to reverse it! Have fun, and please rate my code!
//
//Side Effects:None
//This code is copyrighted and has limited warranties.
//Please see http://www.Planet-Source-Code.com/xq/ASP/txtCodeId.3149/lngWId.2/qx/ vb/scripts/ShowCode.htm
//for details.
//**************************************

<html>
<body>
<script>


    function getbrowserwidth(){
    	if (navigator.userAgent.indexOf("MSIE") > 0){return document.body. clientWidth;} 
    	else{return window.outerWidth;	}}


        function getbrowserheight(){
        if (navigator.userAgent.indexOf("MSIE") > 0){return document.body. clientHeight;} 
        else{return window.outerHeight;}}
        var widh=getbrowserwidth()
        var heigt=getbrowserheight()
        var curmov = -3
        var curmovl = -3


            function document.onkeypress() {


                if (window.event.keyCode==100) {
                curmov=(curmov/2)
                curmovl=(curmovl/2)
            }


                if (window.event.keyCode==115) {
                curmov=(curmov*2)
                curmovl=(curmovl*2)
            }


                if (window.event.keyCode==114) {
                curmovl=(curmovl*-1)
                curmov=(curmov*-1)
            }
        }


            function changcm() {


                if (thing.style.posTop<=0) {
                curmov = curmov*-1
            }


                if (thing.style.posTop>=(heigt - 75)) {
                curmov = curmov*-1
            }


                if (thing.style.posLeft<=0) {
                curmovl = curmovl*-1
            }


                if (thing.style.posLeft>=(widh - 120)) {
                curmovl = curmovl*-1
            }
            setTimeout("changcm()", 5)
        }


            function al() {
            alert("you got me!")
        }


            function movit() {
            thing.style.posTop = thing.style.posTop + (curmov)
            thing.style.posLeft = thing.style.posLeft + (curmovl)
            setTimeout("movit()", 2)
        }
        </script>
        <body bgcolor="#FFFFCC">
        <div id="thing"
        	style="position:absolute;
        		top: 50;
        		left: 180;
        		z-index: 0">
        <img src="image.jpg" height="70" width="100" onClick="alert('you got me!' )"/>
        </div>
        <body onLoad="movit();changcm()">
        </body>
        </html>

پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت
آزمون اچ تی ام ال