0
点赞
收藏
分享

微信扫一扫

Javascript特效:照片墙

卿卿如梦 2022-03-12 阅读 117
htmli++css


知识点


  1. CSS 中 box-shadow可以添加阴影效果
  2. !important​ CSS最高优先级

运行效果

Javascript特效:照片墙_css

点击后

Javascript特效:照片墙_html_02

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
border: none;
list-style: none;
}
html,body,ul {
width: 100%;
height: 100%
}
#ps{
position: relative
}
#ps li{
width: 250px;
height: 360px;
box-shadow: 0 0 10px #000;
position: absolute;
transition: all 1s
}
#ps li.current{
left: 50% !important;
top: 50% !important;
transform: rotate(0deg) translate(-50%,-50%) scale(1.5, 1.5) !important;
z-index: 99;
}
</style>
</head>
<body>
<ul id="ps"></ul>
</body>
<script src="UnderScore.js"></script>
<script>
window.onload = function (ev) {
// 1.获取需要的标签
var ps = document.getElementById('ps');

// 2. 动态创建li标签
for (var i = 0; i < 10; i++) {
// 2.1 创建li标签
var li = document.createElement('li');
ps.appendChild(li);

// 2.2 创建img标签
var img = document.createElement('img');
img.src = 'images/pic' + ( i + 1 ) + '.jpg';
li.appendChild(img)
}

// 3. 获取所有li
var allLis = ps.children;

// 4. 求出屏幕宽度和高度
var screenHeight = document.documentElement.clientHeight - 250;
var screenWidth = document.documentElement.clientWidth - 360;

// 5. 遍历
for (var j = 0; j < allLis.length; j++) {
// 5.1 取出单个li标签
var liCurrent = allLis[j];

// 5.2 随机分布
liCurrent.style.left = _.random(0, screenWidth) + 'px';
liCurrent.style.top = _.random(0, screenHeight) + 'px';

// 5.3 随机角度
liCurrent.style.transform = 'rotate(' + _.random(0, 360) + 'deg)';

// 5.4 监听点击事件
liCurrent.onclick = function () {
for (var i = 0; i < allLis.length; i++) {
allLis[i].className = '';
}
this.className = 'current';
}
}
}
</script>
</html>



举报

相关推荐

0 条评论