Rumah > hujung hadapan web > tutorial js > Menggunakan JavaScript untuk mencapai kemahiran effect_javascript bulatan warna berputar

Menggunakan JavaScript untuk mencapai kemahiran effect_javascript bulatan warna berputar

WBOY
Lepaskan: 2016-05-16 15:53:38
asal
1515 orang telah melayarinya

Bulatan warna berputar yang ditulis dalam JavaScript

Perenderan

<!DOCTYPE html>
<html>
<head>
<script src="/jquery-1.11.3.min.js"></script>
<script>
for(var i=0;i<100000;i++)
{
if(i%4==0)
setTimeout("$('#div1').css({'border-left':'40px solid red','border-bottom':'40px solid green','border-right':'40px solid yellow','border-top':'40px solid blue'})",2000*i);
if(i%4==1)
setTimeout("$('#div1').css({'border-left':'40px solid blue','border-bottom':'40px solid red','border-right':'40px solid green','border-top':'40px solid yellow'})",2000*i);
if(i%4==2)
setTimeout("$('#div1').css({'border-left':'40px solid yellow','border-bottom':'40px solid blue','border-right':'40px solid red','border-top':'40px solid green'})",2000*i);
if(i%4==3)
setTimeout("$('#div1').css({'border-left':'40px solid green','border-bottom':'40px solid yellow','border-right':'40px solid blue','border-top':'40px solid red'})",2000*i);
}
 
</script>
<style>
 
#div2{
width: 100px;
  height: 100px;
   border-left: 40px solid red;
  border-right: 40px solid yellow;
  border-bottom: 40px solid green;
  border-top:40px solid blue;
  background-color:#FFFFFF;
  border-radius:900px/900px;
  display:none;
  top:0px;
  left:0px;
  position:relative;
  z-index:1;
}
#div1{
  width: 100px;
  height: 100px;
   border-left: 40px solid red;
  border-right: 40px solid yellow;
  border-bottom: 40px solid green;
  border-top:40px solid blue;
  background-color:#FFFFFF;
  border-radius:90px/90px;
}
</style>
</head>
 
<body>
<p style="color:#FF0000">&ETH;&yacute;×&ordf;&micro;&Auml;&Egrave;&brvbar;</p>
<div id="div1"></div>
</body>
</html>
Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan