案例素材可到这里领取, 提取码：gseu
1. 照片墙案例
实现照片墙特效，点击图片可以让照片居中显示并有缓动特效，移除则返回原样
- 这里使用了Underscore-min.js库里面的方法，文件可以去素材里面拿到，js也可以直接实现（要麻烦一些）
- 难点在于宽度求取以及对动画的处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<script src="js/Underscore-min.js"></script>
<script>
window.onload = function () {
// 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 screenW = document.documentElement.clientWidth - 250;
var screenH = document.documentElement.clientHeight - 360;
// 5. 遍历
for(var j=0; j<allLis.length; j++){
// 5.1 取出单个li标签
var li = allLis[j];
// 5.2 随机分布
li.style.left = _.random(0, screenW) + 'px';
li.style.top = _.random(0, screenH) + 'px';
// 5.3 随机角度
li.style.transform = 'rotate(' + _.random(0, 360) +'deg)';
// 5.4 监听点击事件
li.onclick = function () {
for(var i = 0; i<allLis.length; i++){
allLis[i].className = '';
}
this.className = 'current';
}
}
}
</script>
</body>
</html>
2. 类京东商品放大镜案例
鼠标移动到图片上可以实现图片放大，随着鼠标移动，放大图片的镜头也会跟着移动，可切换图片
- 难点在于对于放大比例(——等比缩放，按公式即可)以及边界值的把握
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
border:none
}
img{
vertical-align: top;
}
#box{
width: 350px;
height: 350px;
background-color: red;
margin: 100px 0 0 100px;
position: relative;
}
#small_box{
width: 100%;
height: 100%;
border: 1px solid #ccc;
position: relative;
}
#small_box img{
width: 350px;
height: 350px;
}
#mask{
width: 100px;
height: 100px;
background-color: rgba(255, 255, 0, .4);
position: absolute;
left: 0;
top:0;
cursor: move;
display: none;
}
#big_box{
width: 600px;
height: 600px;
border: 1px solid #ccc;
overflow: hidden;
position: absolute;
left: 360px;
top:0;
display: none;
}
#list{
margin: 20px 0 0 100px;
}
#list img{
margin: 3px;
}
</style>
</head>
<body>
<div id="box">
<div id="small_box">
<img src="images/pic001.jpg" alt="">
<span id="mask"></span>
</div>
<div id="big_box">
<img src="images/pic01.jpg" alt="" style="position: absolute; left:0; top:0;">
</div>
</div>
<div id="list">
<img src="images/pic0001.jpg" alt="">
<img src="images/pic0002.jpg" alt="">
<img src="images/pic0003.jpg" alt="">
</div>
<script>
window.onload = function () {
// 1. 获取需要的标签
var box = document.getElementById("box");
var small_box = box.children[0];
var big_box = box.children[1];
var mask = small_box.children[1];
var big_img = big_box.children[0];
var list_img = document.getElementById("list").children;
// 2. 监听鼠标进入小盒子
small_box.onmouseover = function () {
// 2.1 把隐藏的内容显示
mask.style.display = 'block';
big_box.style.display = 'block';
// 2.2 监听鼠标的移动
small_box.onmousemove = function (event) {
var event = event || window.event;
// 2.3 求出鼠标的坐标
var pointX = event.clientX - small_box.offsetParent.offsetLeft - mask.offsetWidth * 0.5;
var pointY = event.clientY - small_box.offsetParent.offsetTop - mask.offsetHeight * 0.5;
// 2.4 边界检测
if(pointX < 0){
pointX = 0;
}else if(pointX >= small_box.offsetWidth - mask.offsetWidth){
pointX = small_box.offsetWidth - mask.offsetWidth;
}
if(pointY < 0){
pointY = 0;
}else if(pointY >= small_box.offsetHeight - mask.offsetHeight){
pointY = small_box.offsetHeight - mask.offsetHeight;
}
// 2.5 让放大镜移动起来
mask.style.left = pointX + 'px';
mask.style.top = pointY + 'px';
// 2.6 让大图移动起来
/*
smallX / bigX = smallBox.width / 大图的宽度
bigX = smallX / ( smallBox.width / 大图的宽度 )
*/
big_img.style.left = - pointX / (small_box.offsetWidth / big_box.offsetWidth) + 'px';
big_img.style.top = - pointY / (small_box.offsetHeight / big_box.offsetHeight) + 'px';
};
};
// 3. 监听鼠标离开小盒子
small_box.onmouseout = function () {
// 2.1 把隐藏的内容显示
mask.style.display = 'none';
big_box.style.display = 'none';
};
// 4. 遍历列表图片
for(var i=0; i<list_img.length; i++){
(function (i) {
var img = list_img[i];
img.onmouseover = function () {
small_box.children[0].src = "images/pic00"+ (i + 1) +".jpg";
big_img.src = "images/pic0"+ (i + 1) +".jpg"
}
})(i);
}
}
</script>
</body>
</html>
参考：
网易云js课程
网友评论