CSS动画,如何实现当滚轮滚动到当前页面显示时,进行显示这个页面,并且是动态显示,也就是将两个图片合并到一起,然后显示出来,具体来说就是一张很长的界面,当一部分出现在用户能够看到的屏幕中时就动态的显示动画,当图片滚出屏幕时,动态的消失
能说得具体点不。
-指在同一页面内,当页面往下滚,滚到某个位置时,会有2个图片动态的跳出来,然后拼接在一起显示在窗口中间?
授汝以鱼不如授汝以渔:
给你弄了个demo,记得自己添加jquery引用,好友自己添加一张图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-1.12.1.js"></script>
<title>页面滚动到某处时图片动态出现</title>
</head>
<body>
<div align="center" style="height: 1200px;">
请往下滚动!
</div>
<div id="imgDiv" align="center">
<img alt="滚动出现的图片" src="../img/tupian.jpg"/>
</div>
<script type="text/javascript">
$(window).scroll(function(){
var winHeight = $(this).height();
var winWidth = $(this).width();
var imgDiv = $("#imgDiv");
var sTop = $(this).scrollTop();
var imgTop = $(imgDiv).offset().top;
if((sTop + winHeight) > imgTop){
$(imgDiv).animate({"position":"absolute","margin-top":-(winHeight + $(imgDiv).height())/2,"margin-left":(winWidth-$(imgDiv).width())/2},50);
}
})
</script>
</body>
</html>