抄袭苹果菜单放大功能

效果图

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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容