masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > javascript 随机展示头像实现代码_javascript技巧

javascript 随机展示头像实现代码_javascript技巧

WBOY
Lepaskan： 2016-05-16 17:58:50
asal
1212 orang telah melayarinya

先看图：
javascript 随机展示头像实现代码_javascript技巧
很简单的一个效果
首先html

复制代码 代码如下:


























css
复制代码 代码如下:

ul,li{margin:0;padding:0;}
ul{position:relative;width:100%;height:333px;}
li{border:4px solid gray;border-radius:3px;list-style:none;}
img{width:100%;height:100%;}

很小一点js
复制代码 代码如下:

(function(){
var ul=document.getElementsByTagName('ul')[0];
var li=ul.getElementsByTagName('li');
for(var i=0,l=li.length;ivar s=li[i].style;
s.position = 'absolute';
s.zIndex = Math.floor(Math.random()*90) + 10;//层级 基本随机数
s.width = s.height = s.zIndex + 'px';//宽高
s.left = Math.floor(Math.random()*(ul.offsetWidth-s.zIndex)) + 'px';
s.top = Math.floor(Math.random()*(ul.offsetHeight-s.zIndex)) + 'px';
s.opacity = s.zIndex / 100;//透明度
s.filter = 'alpha(opacity=' + s.zIndex + ')';
s.alpha = s.zIndex;
}
})()

最后的效果是 ：越大得头 层级越高 透明度越低 ， 如果外层ul足够大得话，层级更加分明。
Label berkaitan：
头像
sumber：php.cn
Artikel sebelumnya：jquery中dom操作和事件的实例学习 下拉框应用_jquery Artikel seterusnya：JS代码放在head和body中的区别分析_javascript技巧
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
Artikel terbaru oleh pengarang
Isu terkini
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
9
1588
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Gaya CSS tidak digunakan pada tapak Saya sedang membuat tapak web menggunakan Bootstrap5 tetapi sifat index.css tidak digunaka...
daripada 2024-04-06 17:12:23
0
1
336
untuk gelung secara rawak pergi dari 1 hingga 0 Pada asasnya, setiap kali halaman dimuat semula, gelung for berpotensi berubah daripada 1 ...
daripada 2024-04-06 16:48:14
0
1
393
React Three Fiber: Mengapa acara skrol saya ketinggalan? Dalam ReactThreeFiber, saya mempunyai komponen React yang menghasilkan sprite yang saya ma...
daripada 2024-04-06 13:39:24
0
1
410
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan