如何用js实现图片逐渐拉远的效果

2025-04-16 07:06:05

推荐回答（2个）

回答1：

恩恩，看了你的这个预期效果！这是我的代码，你可以看看，可以实现这个效果：




    
    AlloyTeanm-zy
    
    
        body{

            font-family: simhei;
            overflow: hidden;
        }

        #div1{

            overflow:hidden;
        }
        #pic{

            position: relative;
            overflow: hidden;
        }
    
    
        $(document).ready(function(){

            $("#pic").load(function() {

                $("#pic").animate({width:'1520px',height:'700px',top:'-10px',left:'-5px',bottom:'0px',right:'-10px'},8000);

            })
        })

需要注意的几点：

1.我用的是jQuery，需要引入外部jQuery库！

2.图片的原始大小，以及屏幕的大小都会影响这个效果！

3.这些top属性和left属性，都是根据我的图片和屏幕调的，具体的值，你要根据自己的情况更改，反正原理就这样！原理是，将图片的长度和宽度调的比屏幕窗口或者DIV大，也就是让图片“溢”出来，多的部分使用“overflow：hidden”隐藏掉，然后在让图片他恢复和窗口或者DIV一样大尺寸，就会产生图片拉远的效果！

有不懂的地方继续问我！

希望能帮助到你，望采纳！

回答2：




    
    
    test
    


    
        .top{border:1px solid red;overflow: hidden;float:left;text-align:center;position:relative;width:500px;height:300px;}
        .top img{width:550px;height:350px;position:absolute;top:50%;margin-top:-175px;left:50%;margin-left:-275px;animation:gogogo 5s infinite;/* Safari and Chrome */-webkit-animation:gogogo 5s infinite;-webkit-animation-timing-function:linear;}
        /*css3 animation,*/
        @keyframes gogogo
        {
        from {width:550px;height:350px;position:absolute;top:50%;margin-top:-175px;left:50%;margin-left:-275px;}
        to {width:500px;height:300px;position:absolute;top:50%;margin-top:-150px;left:50%;margin-left:-250px;}
        }
        /**上面所有css中，margin-top=height/2,margin-left=width/2**/

上面代码中css 的animation放在.top img{}中，切换图片可以考虑修改class=top 形式

仅供参考