2 suwu150 suwu150 于 2017.01.07 17:06 提问

CSS动画,如何实现当滚轮滚动到当前页面显示

CSS动画,如何实现当滚轮滚动到当前页面显示时,进行显示这个页面,并且是动态显示,也就是将两个图片合并到一起,然后显示出来,具体来说就是一张很长的界面,当一部分出现在用户能够看到的屏幕中时就动态的显示动画,当图片滚出屏幕时,动态的消失

2个回答

csmzl
csmzl   2017.01.07 19:42

能说得具体点不。
-指在同一页面内,当页面往下滚,滚到某个位置时,会有2个图片动态的跳出来,然后拼接在一起显示在窗口中间?

suwu150
suwu150 和你说的一样,就是那样的,怎么做,是不是有监听事件在监听,监听时又怎么动作?用什么做监听的标准??
11 个月之前 回复
suwu150
suwu150 具体来说就是一张很长的界面,当一部分出现在用户能够看到的屏幕中时就动态的显示动画,当图片滚出屏幕时,动态的消失
11 个月之前 回复
csmzl
csmzl   2017.01.09 13:43

授汝以鱼不如授汝以渔:
给你弄了个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>

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!