jQuery实现“电子书自动滑动的效果”

关注

原创最新推荐文章于 2026-08-29 11:34:37 发布 962 阅读 AI 写同款· GEO 优化 ›

基于jQuery与HTML5的电子书翻页效果实战：BookBlock插件应用经过这一番折腾，你应该发现了：真正出色的电子书系统，从来不是某个单一技术的胜利，而是多个层次协同作用的结果结构层：用语义化 HTML 构建清晰骨架；表现层：用 Canvas 实现电影级翻页动画；交互层：用 jQuery 精准响应用户操作；框架层：用 BookBlock 快速集成成熟方案；体验层：用响应式 + 手势 + 搜索提升可用性。🎯 技术的本质，是服务于人的感受。当你做的电子书能让用户忘记它是在屏幕上，那就是成功了。阅读详情

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
</head>
<style>
    *{
        padding: 0;
        margin: 0px;
    }

    div{
        width: 200px;
        height: 200px;
        background-color: greenyellow;
        overflow: auto;
    }
    div p{
        width: 100px;
        height: 3000px;
        background-color: red;
    }
</style>
<body>
<script>
    $(function () {

            setTimeout(function step() {
                var top = $("div").scrollTop();
                $("div").scrollTop(top+30);
                console.log("aaa");
                if(top == $("div").scrollTop()) return;
                setTimeout(step,20);
            },0);
    });
</script>
<div>
    <p></p>
</div>
</body>
</html>

收录于