htnm5 menggunakan javascript untuk mengapungkan tetikus di atas ikon

Dalam reka bentuk web, ikon selalunya merupakan bahagian penting halaman. Walau bagaimanapun, cara untuk menjadikan ikon ini lebih jelas dan meningkatkan interaktiviti dan daya tarikan halaman telah menjadi isu yang sangat penting. Penggunaan JavaScript untuk mencapai kesan tetikus yang melepasi ikon boleh memenuhi permintaan ini dengan tepat dan membawa pengalaman visual baharu kepada reka bentuk web.

1. Prinsip Pelaksanaan

Apabila menggunakan JavaScript untuk mencapai kesan tetikus melalui ikon terapung, kita perlu mengubah suai gaya CSS untuk mencapainya. Secara khusus, kita perlu menetapkan sifat kedudukan ikon kepada "mutlak" supaya ia boleh bergerak bebas dalam bekas imej. Seterusnya, kita juga perlu menetapkan lebar dan tinggi bekas ikon dan ikon itu sendiri supaya mereka mempunyai kedudukan dan paparan yang jelas pada halaman. Kemudian, apabila tetikus bergerak ke dalam bekas ikon, kami boleh mengubah suai bekas ikon dan gaya CSS ikon untuk mencapai kesan terapung ikon, dengan itu meningkatkan kesan dinamik dan daya tarikan visual halaman.

2. Langkah-langkah pelaksanaan

Seterusnya, mari kita perkenalkan secara terperinci cara mencapai kesan ikon terapung apabila tetikus melepasinya melalui JavaScript.

1. Pertama, kita perlu mencipta div bekas imej dalam fail HTML dan ikon img yang perlu diapungkan.

<div id="icon-container">
  <img id="icon" src="icon.png">
</div>

2. Seterusnya, kita perlu menetapkan gaya CSS untuk div kontena dan img ikon.

#icon-container {
  position: relative;
  width: 100px;
  height: 100px;
}

#icon {
  position: absolute;
  width: 50px;
  height: 50px;
}

3. Kemudian, kita perlu menulis kod JavaScript untuk mencapai kesan terapung ikon dengan mendapatkan bekas ikon dan elemen ikon. Kod khusus adalah seperti berikut:

// 获取图标容器和图标元素
var iconContainer = document.getElementById("icon-container");
var icon = document.getElementById("icon");

// 监听鼠标移入图标容器的事件
iconContainer.addEventListener("mouseover", function() {
  // 计算图标的随机位置
  var left = Math.floor(Math.random() * (iconContainer.offsetWidth - icon.offsetWidth));
  var top = Math.floor(Math.random() * (iconContainer.offsetHeight - icon.offsetHeight));

  // 修改图标容器和图标的CSS样式，实现图标浮动的效果
  icon.style.left = left + "px";
  icon.style.top = top + "px";
});

// 监听鼠标移出图标容器的事件
iconContainer.addEventListener("mouseout", function() {
  // 将图标重置到容器的中央位置
  icon.style.left = (iconContainer.offsetWidth - icon.offsetWidth) / 2 + "px";
  icon.style.top = (iconContainer.offsetHeight - icon.offsetHeight) / 2 + "px";
});

Dalam kod di atas, kami mula-mula mendapatkan div bekas ikon dan elemen img ikon melalui kaedah getElementById. Kemudian, peristiwa pergerakan tetikus masuk dan keluar didengari pada bekas ikon Apabila tetikus bergerak masuk, kami mengalihkan ikon ke kedudukan berbeza dalam bekas dengan mengira kedudukan rawak. Apabila tetikus dialihkan keluar, kami menetapkan semula ikon ke tengah bekas.

3. Demonstrasi kesan

Akhir sekali, mari kita lihat kesan paparan sebenar menggunakan JavaScript untuk mencapai kesan mengapungkan tetikus di atas ikon. Berikut ialah tunjuk cara mudah:

482bb528009e3b24863bd85b2dc87ca0
Lihat Ikon Animasi Pen dengan Vanilla JS oleh ryuchee (@ryuchee) pada CodePen .
065276f04003e4622c4fe6b64f465b88

(Nota: Sila semak kesan dalam penyemak imbas yang menyokong iframe)

Seperti yang anda lihat, semasa tetikus bergerak masuk dan keluar dari ikon bekas, ikon akan rawak Alihkan ia ke kedudukan berbeza dalam bekas untuk mencapai kesan ikon terapung. Pada masa yang sama, kerana kesan terapung tetikus ke atas ikon yang dilaksanakan oleh JavaScript boleh melaraskan gaya CSS dan kesan animasi secara fleksibel mengikut keperluan reka bentuk tertentu, julat aplikasinya dalam reka bentuk web adalah sangat luas.

Ringkasnya, menggunakan JavaScript untuk mencapai kesan tetikus terapung di atas ikon boleh menambah ciri dinamik yang jelas pada reka bentuk web dan meningkatkan interaktiviti dan daya tarikan halaman.

Atas ialah kandungan terperinci htnm5 menggunakan javascript untuk mengapungkan tetikus di atas ikon. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!