图片漂浮与点击放大
今天在继续完善老师布置的班级网站作业，由于之前正好赶上万圣节，就准备做一个万圣节主题的，虽然现在万圣节已经过了几天了，不过还是把它完善一下吧。大概的效果图如下，鬼当然应该是可以飘来飘去的...
首先归纳一下图片漂浮的实现，其实很简单，就是重新定位它的位置，然后让它稍微缓慢一点移动过去而已，注意要设置绝对定位才能生效
这里用了随机数来确定它将前往的下个位置。
代码实现：
<html>
<head>
<meta charset="UTF-8" />
<title>图片随机浮动</title>
<style type="text/css">
img{
top:20px;
left: 20px;
position:absolute;
transition: left 3s, top 3s;
}
</style>
<script language="javascript" type="text/javascript">
function imgfloat(){
var w=document.body.clientWidth-100;//限制区域
var h=document.body.clientHeight-100;
var floatimg=document.getElementById("floatimg");
// var x=200,y=200;
//alert("恭喜IG！！！恭喜LPL！！！");
var x=Math.floor(Math.random()*h);
var y=Math.floor(Math.random()*w);
//document.write(x);
floatimg.style.top=x+"px";
floatimg.style.left=y+"px";;
//setTimeout("imgfloat()",3); 设置循环执行
}
</script>
</head>
<body>
<img id="floatimg" onclick="imgfloat()" src="http://www.jingyile.cn/wp-content/uploads/2018/10/10240.png" height="150" width="100">
</body>
</html>这里我设置了鼠标点击去触发该事件的发生，也可以通过设置时间让它自己循环执行。
由于有班级相册这一栏目，预览图在点击时应该被放大，同样很简单，直接把图片长和宽乘以一个常数n放大n倍。
当第二次点击时恢复原来大小，用一个flag来标记当前状态即可。
<html>
<head>
<meta charset="UTF-8" />
<title>图片点击放大</title>
<style type="text/css">
</style>
<script language="javascript" type="text/javascript">
var flag=true;//一开始标记为正常状态
function bigimg(){
var img = document.getElementById('imgb');//图片元素
var imgH = img.height;
var imgW = img.width;
if(flag){
img.height = imgH*2;
img.width = imgW*2;
flag = false;//把状态设为放大状态
}
else{
img.height = imgH/2;
img.width = imgW/2;
flag = true;//把状态设为正常状态
}
}
</script>
</head>
<body>
<img id="imgb" onclick="bigimg()" src="http://www.jingyile.cn/wp-content/uploads/2018/10/10240.png" height="150" width="100">
</body>
</html>那么如果有多张照片的话就需要修改代码，有很多种方法，我这里把当前触发事件的元素作为参数传递给了bigimg（id）函数，
这样就可以判断当前点击的是哪张照片了。
但是这样的话放大一张图片势必会影响其他图片的布局，就会很不美观
可以通过绝对定位来设置一个用于展览图片的区域，每个图片均在此处放大，结束之后还原其之前的位置。
<html>
<head>
<meta charset="UTF-8" />
<title>多张图片点击放大</title>
<style type="text/css">
</style>
<script language="javascript" type="text/javascript">
var flag=true;//一开始标记为正常状态
function bigimg(id){
var imgH = id.height;
var imgW = id.width;
if(flag){
// id.style.left="20px";
// id.style.top="20px";
// id.style.position="absolute";
id.height = imgH*2;
id.width = imgW*2;
flag = false;//把状态设为放大状态
}
else{
// id.style.position="static";
id.height = imgH/2;
id.width = imgW/2;
flag = true;//把状态设为正常状态
}
}
</script>
</head>
<body>
<img onclick="bigimg(this)" src="http://www.jingyile.cn/wp-content/uploads/2018/10/10240.png" height="150" width="100">
<img onclick="bigimg(this)" src="http://www.jingyile.cn/wp-content/uploads/2018/05/5200.png" height="200" width="150">
<img onclick="bigimg(this)" src="http://www.jingyile.cn/wp-content/uploads/2018/09/9.172.png" height="200" width="200">
</body>
</html>
