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

23/May/17 22:17

Kısayol

Şikayet

Özel Mesaj

Reskam

Kayıt Tarihi: 14/Mayıs/2012

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

Alıntı yap

23/May/17 22:25

Kısayol

Şikayet

Özel Mesaj

1234567B

Kayıt Tarihi: 04/Şubat/2010

css ve js ile yapacaksın dostum

arbeit macht frei

Alıntı yap

23/May/17 22:26

Kısayol

Şikayet

Özel Mesaj

Reskam

Kayıt Tarihi: 14/Mayıs/2012

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

Alıntı yap

23/May/17 22:41

Kısayol

Şikayet

Özel Mesaj

1234567B

Kayıt Tarihi: 04/Şubat/2010

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

Alıntı yap

24/May/17 10:01

Kısayol

Şikayet

Özel Mesaj

dhmm

Kayıt Tarihi: 15/Eylül/2011

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;
}

Ozgurluk aslinda her istedigini yapabilmek degildir, istemedigini yapmamaktir. // Verdigin degeri gormeyince, gordugun degeri ver !!! // Hayatin herkes icin bir bavulu vardir !!! // Dusmek gerekir bazen hayatta; kalkmayi ogrenebilmek icin

Alıntı yap

24/May/17 10:07

Kısayol

Şikayet

Özel Mesaj

dhmm

Kayıt Tarihi: 15/Eylül/2011

https://jsfiddle.net/h7er4c9o/

Ozgurluk aslinda her istedigini yapabilmek degildir, istemedigini yapmamaktir. // Verdigin degeri gormeyince, gordugun degeri ver !!! // Hayatin herkes icin bir bavulu vardir !!! // Dusmek gerekir bazen hayatta; kalkmayi ogrenebilmek icin

Alıntı yap