folder Tahribat.com Forumları
linefolder Html - CSS - XML - JavaScript - Ajax
linefolder Css , JS İle Div Kaydırmak [LİSE PERFORMANS]



Css , JS İle Div Kaydırmak [LİSE PERFORMANS]

  1. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Reskam
    Reskam's avatar
    Kayıt Tarihi: 14/Mayıs/2012
    Erkek

    Merhaba , kolay gelsin herkese 

    Meslek lisesi okuyorum Bilişim / Web Tasarım ve Programlama
    2.dönem Performans ödevimiz var ve Hocamız tasarım konusunda hassas biri 
    Hareketli animasyonlu tabiri caizse uçan kaçan siteler seviyor 



    tasarım olarak böyle bir şey yaptım istediğim


    "A" ya basıldığı zaman o kutu kayıp sayfanın en üst sol tarafa kayacak ve "İ" basıldığında oda en sağ alta kayacak küp gibi açılacak  ortaya içerik koymayı hedefliyorum lakin sorun şu ki nasıl kaydıracağım ? 
    css ile mi js ile mi ne yapacağım nasıl yapacağım yardımcı olurmusunuz ? 

    Reskam tarafından 23/May/17 22:19 tarihinde düzenlenmiştir

    Memento Mori
  2. KısayolKısayol reportŞikayet pmÖzel Mesaj
    1234567B
    1234567B's avatar
    Kayıt Tarihi: 04/Şubat/2010
    Erkek

     

    css ve js ile yapacaksın dostum


    arbeit macht frei
  3. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Reskam
    Reskam's avatar
    Kayıt Tarihi: 14/Mayıs/2012
    Erkek
    1234567B bunu yazdı

     

    css ve js ile yapacaksın dostum

    Peki hocam kodlari nasil yapicam yani kodlar olsa ben gomerim ama yok yani kodlari netten baktim ben bulamadim :/


    Memento Mori
  4. KısayolKısayol reportŞikayet pmÖzel Mesaj
    1234567B
    1234567B's avatar
    Kayıt Tarihi: 04/Şubat/2010
    Erkek
    Reskam bunu yazdı
    1234567B bunu yazdı

     

    css ve js ile yapacaksın dostum

    Peki hocam kodlari nasil yapicam yani kodlar olsa ben gomerim ama yok yani kodlari netten baktim ben bulamadim :/

    kardeşim bu yüzden bunun adı performans ödevi biraz araştır ilerde meslek olarak yapacağın şeye bukadar ilgisiz olma.

    bir kare için örnek yaptım bak sana ordan devam et

    https://goo.gl/ZNOmXX

    kodlar:

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    	<script type="text/javascript">
    		$(document).ready(function(){
    			$(".square").click(function(){
    				$(this).animate({
    					left:0,
    					top:0
    				  }, 1500 );
    			});
    		});
    	</script>
    	
    	<style type="text/css">
    	.container{width:600px;height:600px;margin:50px auto;background:red;position:relative;}
    	.square{width:100px;height:100px;text-align:center;line-height:100px;font-size:50px;border:1px solid #ddd;background:#eee;position:absolute;top:200px;left:200px;}
    	.square:hover{cursor:pointer;}
    	</style>
    </head>
    <body>
    	<div class="container">
    	<div class="square">A</div>
    	</div>
    </body>
    </html>

     

     

    1234567B tarafından 23/May/17 22:41 tarihinde düzenlenmiştir

    arbeit macht frei
  5. KısayolKısayol reportŞikayet pmÖzel Mesaj
    dhmm
    dhmm's avatar
    Kayıt Tarihi: 15/Eylül/2011
    Erkek

    Buyur hocam hazirladim biseyler

    index.html

    <!DOCTYPE html>
    <html>
        <head>
            <title>Ornek</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href="style.css" rel="stylesheet" type="text/css"/>    
            
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <script src="js.js" type="text/javascript"></script>
        </head>
        <body>
            <div id="box">            
                <div id="in-box">
                    <div class="row">
                        <div class="column">                       
                            <div class="btn to-right to-bottom btnLeftTop">1</div>
                        </div>
                        <div class="column">                       
                            <div class="btn to-left to-bottom btnRightTop">2</div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="column">                       
                            <div class="btn to-right to-top btnLeftBottom">3</div>
                        </div>
                        <div class="column">                       
                            <div class="btn to-left to-top btnRightBottom">4</div>
                        </div>
                    </div>
                </div>
            </div>
        </body>
    </html>
    

     

    js.js

    $(document).ready(function(){
        $(".btnLeftTop").click(function(){                            
    	$(this).animate({
                marginLeft:0,
    	    marginTop:0
    	 }, 1000 );
        });
    });
    $(document).ready(function(){
        $(".btnRightTop").click(function(){                            
    	$(this).animate({
                marginLeft:125,
    	    marginTop:0
    	 }, 1000 );
        });
    });
    $(document).ready(function(){
        $(".btnLeftBottom").click(function(){                            
    	$(this).animate({
                marginLeft:0,
    	    marginTop:125
    	 }, 1000 );
        });
    });
    $(document).ready(function(){
        $(".btnRightBottom").click(function(){                            
    	$(this).animate({
                marginLeft:125,
    	    marginTop:125
    	 }, 1000 );
        });
    });
    

     

    CSS

    #box
    {
        margin-left:auto;
        margin-right:auto;
        width:450px;
        height:450px;
        padding:25px;
        background:#ccc;
    }
    #in-box
    {
    
        width:450px;
        height:450px;
        background:#333;
    }
    .row
    {
        width:450px;
        height:225px;
        background:red;    
    }
    .column
    {
        width:225px;
        height:225px;
        background:green;
        float:left;    
    }
    .btn
    {
        margin-left:auto;
        margin-right:auto;
        float:left;
        margin:5px;
        width:100px;
        height:100px;
        background:maroon;
        color:#fff;    
        cursor:pointer;
    }
    
    .to-right
    {
        margin-left:125px;
    }
    .to-left
    {
        margin-right:125px;
    }
    .to-top
    {
        margin-bottom: 125px;
    }
    .to-bottom
    {
        margin-top:125px;
    }
    
    
    
    

     

     

  6. KısayolKısayol reportŞikayet pmÖzel Mesaj
    dhmm
    dhmm's avatar
    Kayıt Tarihi: 15/Eylül/2011
    Erkek

    https://jsfiddle.net/h7er4c9o/

Toplam Hit: 1132 Toplam Mesaj: 6
css js kayan css kayan divli js bilinmiyor