澳门威利斯人_威利斯人娱乐「手机版」

来自 威利斯人娱乐 2019-09-16 19:56 的文章
当前位置: 澳门威利斯人 > 威利斯人娱乐 > 正文

【威斯尼人娱乐场】jquery随机展示头像代码,随

先分析达成思路

先看图:
威斯尼人娱乐场 1
很轻易的二个效应
首先html

内需二个容器,作为头像突显的区域。
容器内部需求头像图片作为展现。
随意每一种头像的深浅,地点,层级。
头像地方随机范围要压缩等于该头像宽高,以限制自由范围不溢出容器。

复制代码 代码如下:

样式

<ul>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
</ul>

复制代码 代码如下:

css

*{ margin:0; padding:0;}
威斯尼人娱乐场,.Icon-Box{ width:960px; height:700px; margin:0 auto; position:relative;}
.Icon-Box li{ position:absolute; list-style:none;}
.Icon-Box li img{ width:100%;}

复制代码 代码如下:

HTML

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

本文由澳门威利斯人发布于威利斯人娱乐,转载请注明出处:【威斯尼人娱乐场】jquery随机展示头像代码,随

关键词: 澳门威利斯人