如何用js实现图片逐渐拉远的效果
本人还不懂写js，本想上网搜索下载过来改的，但发现还是不会改，效果类似这样lifestore.nero-hair.jp（网址）...
本人还不懂写js，本想上网搜索下载过来改的，但发现还是不会改，效果类似这样lifestore.nero-hair.jp（网址）
展开
2个回答
展开全部
恩恩，看了你的这个预期效果！这是我的代码，你可以看看，可以实现这个效果：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AlloyTeanm-zy</title>
<script src="jquery-1.11.1.js"></script>
<style type="text/css">
body{
font-family: simhei;
overflow: hidden;
}
#div1{
overflow:hidden;
}
#pic{
position: relative;
overflow: hidden;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#pic").load(function() {
$("#pic").animate({width:'1520px',height:'700px',top:'-10px',left:'-5px',bottom:'0px',right:'-10px'},8000);
})
})
</script>
</head>
<body>
<div style="width: 1600px ;height: 700px" >
<img src="05.jpg" id="pic" style="width: 1700px;height: 800px;top:-100px;left: -100px">
</div>
</body>
</html>
需要注意的几点：
1.我用的是jQuery，需要引入外部jQuery库！
<script src="jquery-1.11.1.js"></script>
2.图片的原始大小，以及屏幕的大小都会影响这个效果！
3.这些top属性和left属性，都是根据我的图片和屏幕调的，具体的值，你要根据自己的情况更改，反正原理就这样！原理是，将图片的长度和宽度调的比屏幕窗口或者DIV大，也就是让图片“溢”出来，多的部分使用“overflow：hidden”隐藏掉，然后在让图片他恢复和窗口或者DIV一样大尺寸，就会产生图片拉远的效果！
有不懂的地方继续问我！
希望能帮助到你，望采纳！
追问
图片我可以设大一点，但显示器或者浏览器大小不同的话就不能缩小居中了，有没有办法解决这一点？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>test</title>
<link rel="stylesheet" href="css.css" type="text/css" media="screen">
</head>
<body>
<style type="text/css">
.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**/
</style>
<div></div>
<div class='top' ><img src='http://lifestore.nero-hair.jp/wp-content/themes/neroHairAndLifeStore/assets/images/top/top-vi-image2.jpg' ></div>
<div>上面代码中css 的animation放在.top img{}中，切换图片可以考虑修改class=top 形式</div>
<div>仅供参考</div>
</body>
</html>
更多追问追答
追问
这种方法可以做到，但不兼容所有的浏览器，请问怎样解决这个问题？
追答
css覆盖，支持Safari，Opera，Firefox，Chrome，Firefox和IE9及以上，IE8及以下不支持
使用低版本IE内核的杂牌浏览器不支持
.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 {}to {transform:scale(0.5)}}
@-ms-keyframes gogogo{from {}to {transform:scale(0.5)}}
@-webkit-keyframes gogogo{from {}to {transform:scale(0.5)}}
@-moz-keyframes gogogo{from {}to {transform:scale(0.5)}}
@-o-keyframes gogogo{from {}to {transform:scale(0.5)}}
/**缩小比例0.5**/
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
