Çözüldü JavaScript ile büyüyüp küçülen daire örneği

Berkay_00 · 12 Ocak 2023

Lise öğrencisiyim. Proje ödevim için internetten kodu aldım ve sayfama ekledim. Butona basıldığında kırmızı daire büyüyecek, mouse butonun üstünden çekildiğinde ise daire aynı animasyon ile küçülerek kaybolacak. Denedim uğraştım ama yapamadım. Kodu aşağıya koyuyorum. Yardım eder misiniz?

HTML:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kırmızı daire örnek</title>
    <style type="text/css">
        .circle {
                    transition-property: width, height, margin-left, margin-top;
                    transition-duration: 2s;
                    position: fixed;
                    transform: translateX(-50%) translateY(-50%);
                    background-color: red;
                    border-radius: 50%;
        }
    </style>
 
    <script>
        function showCircle(cx, cy, radius) {
            let div = document.createElement('div');
            div.style.width = 0;
            div.style.height = 0;
            div.style.left = cx + 'px';
            div.style.top = cy + 'px';
            div.className = 'circle';
            document.body.append(div);

            setTimeout(() => {
                div.style.width = radius * 2 + 'px';
                div.style.height = radius * 2 + 'px';
            }   , 0);
        }
  </script>
</head>
<body>
    <input type="button" onMouseDown="showCircle(150, 150, 100)" value="RED CİRCLE" />  <!-- Yatay konum - dikey konum - daire büyüklüğü -->
</body>
</html>

kaan.w · 12 Ocak 2023

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Technopat</title>
  <style>
    .circle {
      background-color: red;
      height: 50px;
      width: 50px;
      position: fixed;
      left: 100px;
      top: 100px;
      border-radius: 50%;
      transition: all 0.3s ease-in-out;
      transform: scale(0);
      opacity: 0;
    }
    .circle.show {
      transform: scale(1.5);
      opacity: 1;
    }
    .circle.hidden {
      opacity: 0;
      transform: scale(0);
    }
  </style>
</head>
<body>
  <button id="btn">Show Circle</button>
  <div class="circle hidden" id="circle"></div>
  <script>
    const btn = document.getElementById("btn");
    const circle = document.getElementById("circle");
    btn.addEventListener("click", () => {
      circle.classList.remove("hidden");
      circle.classList.add("show");
    })
    btn.addEventListener("mouseleave", () => {
      circle.classList.remove("show");
      circle.classList.add("hidden");
    })
  </script>
</body>
</html>

CSS Hover ile daha kolay yapılabilirdi sanki fakat buyrun, tam istediğiniz gibi.

Gnosis · 12 Ocak 2023

CSS hover ile yapsan JS olmak zorunda mı?

Liutenant · 12 Ocak 2023

Jquery kabul ediyorsa tek satır koda bakar dostum.

24 jQuery Hover Effects

Collection of free jQuery hover effect code examples and plugins for images, tables, text and other from Codepen and Github. Update of December 2020 collection. 4 new items.

freefrontend.com

Gnosis · 12 Ocak 2023

HTML
<Button ID="mybutton">press me</button>
<Div ID="mycircle"></div>
CSS.
#Mycircle {
Width: 100px;
Height: 100px;
Border-radius: 50%;
Background-color: Red;
}
JS.
Var button = document. Getelementbyıd("mybutton");
Var circle = document. Getelementbyıd("mycircle");
Var size = 100;

Button. Addeventlistener("Click", function() {
İf (size == 100) {
Size = 200;
} Else {
Size = 100;
}
Circle. Style. Width = size + "px";
Circle. Style. Height = size + "px";
});
Bunu dener misin işini görür mü mantığı uygunsa boyutları istediğin gibi düzenleyebilirsin.

kaan.w · 12 Ocak 2023

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Technopat</title>
  <style>
    .circle {
      background-color: red;
      height: 50px;
      width: 50px;
      position: fixed;
      left: 100px;
      top: 100px;
      border-radius: 50%;
      transition: all 0.3s ease-in-out;
      transform: scale(0);
      opacity: 0;
    }
    .circle.show {
      transform: scale(1.5);
      opacity: 1;
    }
    .circle.hidden {
      opacity: 0;
      transform: scale(0);
    }
  </style>
</head>
<body>
  <button id="btn">Show Circle</button>
  <div class="circle hidden" id="circle"></div>
  <script>
    const btn = document.getElementById("btn");
    const circle = document.getElementById("circle");
    btn.addEventListener("click", () => {
      circle.classList.remove("hidden");
      circle.classList.add("show");
    })
    btn.addEventListener("mouseleave", () => {
      circle.classList.remove("show");
      circle.classList.add("hidden");
    })
  </script>
</body>
</html>

CSS Hover ile daha kolay yapılabilirdi sanki fakat buyrun, tam istediğiniz gibi.

Berkay_00 · 12 Ocak 2023

Gnosis dedi:
CSS hover ile yapsan JS olmak zorunda mı?

Bilmiyorum olabilir. JS zorunluluğu yok. Her şekilde olur.

Gnosis dedi:
HTML.
<Button ID="mybutton">press me</button>
<Div ID="mycircle"></div>
CSS.
#Mycircle {
Width: 100px;
Height: 100px;
Border-radius: 50%;
Background-color: Red;
}
JS.
Var button = document. Getelementbyıd("mybutton");
Var circle = document. Getelementbyıd("mycircle");
Var size = 100;

Button. Addeventlistener("Click", function() {
İf (size == 100) {
Size = 200;
} Else {
Size = 100;
}
Circle. Style. Width = size + "px";
Circle. Style. Height = size + "px";
});
Bunu dener misin işini görür mü mantığı uygunsa boyutları istediğin gibi düzenleyebilirsin.

Hocam denedim ama tam çalışmadı. Birkaç düzenleme yaptım. Sonra da açık olarak sabit geldi kapanmadı.

kaan.w dedi:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Technopat</title>
  <style>
    .circle {
      background-color: red;
      height: 50px;
      width: 50px;
      position: fixed;
      left: 100px;
      top: 100px;
      border-radius: 50%;
      transition: all 0.3s ease-in-out;
      transform: scale(0);
      opacity: 0;
    }
    .circle.show {
      transform: scale(1.5);
      opacity: 1;
    }
    .circle.hidden {
      opacity: 0;
      transform: scale(0);
    }
  </style>
</head>
<body>
  <button id="btn">Show Circle</button>
  <div class="circle hidden" id="circle"></div>
  <script>
    const btn = document.getElementById("btn");
    const circle = document.getElementById("circle");
    btn.addEventListener("click", () => {
      circle.classList.remove("hidden");
      circle.classList.add("show");
    })
    btn.addEventListener("mouseleave", () => {
      circle.classList.remove("show");
      circle.classList.add("hidden");
    })
  </script>
</body>
</html>

CSS Hover ile daha kolay yapılabilirdi sanki fakat buyrun, tam istediğiniz gibi.

Sağ olun hocam. Aradığım tam buydu. Bir süredir uğraşıyordum. Allah razı olsun.

Çözüldü JavaScript ile büyüyüp küçülen daire örneği

Ayrıntılı düzenleme

Berkay_00

Hectopat

kaan.w

Gnosis

Centipat

Liutenant

Gigapat

24 jQuery Hover Effects

Gnosis

Centipat

kaan.w

Megapat

Berkay_00

Hectopat

Benzer konular

Bu konuyu görüntüleyen kullanıcılar