效果图
AB8281FEB5BB72E95EBC6C1F195E3C8F.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>苹果导航</title>
<script type="text/javascript">
window.onmousemove = function (ev) {
var oEvent = ev || evenet;
var aImg = document.getElementsByTagName("img")
var atxt = document.getElementsByTagName("input")
var oDiv=document.getElementById("div1")
var i = 0
for (i=0;i<aImg.length; i++) {
var x = aImg[i].offsetLeft+aImg[i].offsetWidth/2;
var y = aImg[i].offsetTop+oDiv.offsetTop+aImg[i].offsetHeight/2;
var a = x-oEvent.clientX;
var b = y-oEvent.clientY;
var dis=Math.sqrt(a*a+b*b)
var scale = 1- dis/300
if (oEvent.clientY == 0) {
scale=0.5
}
if (scale<0.5) {
scale=0.5
}
aImg[i].width=scale*200
}
}
function likai() {
alert(1)
}
</script>
<style type="text/css">
body{
margin: 0;
}
#div1 {
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<img src="https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=0961e307c11349547a1eef66664f92dd/fd039245d688d43fd02aca74771ed21b0ff43bb0.jpg"
width="100" >
<img src="https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=0961e307c11349547a1eef66664f92dd/fd039245d688d43fd02aca74771ed21b0ff43bb0.jpg"
width="100" >
<img src="https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=0961e307c11349547a1eef66664f92dd/fd039245d688d43fd02aca74771ed21b0ff43bb0.jpg"
width="100" >
<img src="https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=0961e307c11349547a1eef66664f92dd/fd039245d688d43fd02aca74771ed21b0ff43bb0.jpg"
width="100" >
<img src="https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=0961e307c11349547a1eef66664f92dd/fd039245d688d43fd02aca74771ed21b0ff43bb0.jpg"
width="100" >
<img src="https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=0961e307c11349547a1eef66664f92dd/fd039245d688d43fd02aca74771ed21b0ff43bb0.jpg"
width="100" >
<img src="https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=0961e307c11349547a1eef66664f92dd/fd039245d688d43fd02aca74771ed21b0ff43bb0.jpg"
width="100" >
<img src="https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=0961e307c11349547a1eef66664f92dd/fd039245d688d43fd02aca74771ed21b0ff43bb0.jpg"
width="100" >
</div>
</body>
</html>
网友评论