找回密码
当前位置：前端开发者 > JavaScript > 正文

Web前端开发:视差滚动

2018-07-29 分类：JavaScript 阅读(963) 评论(0)

web前端开发教程下载|泰安web前端开发招聘|前端开发详细流程图

代码片段 1

<!doctype html>
<head>
    <meta charset=”utf-8″>
    <title>前端开发 要学几个框架：视差滚动2</title>
    <style type=”text/css”>
        * {
            padding: 0;
            margin: 0;
        }
        img {
            max-width: 100%;
        }
        .article {
            z-index: 2;
            margin: 0 auto;
        }
        .content {
            position: relative;
            margin: 0 auto;
            background-repeat: no-repeat;
            background-position: top center;
            background-attachment: fixed;
            background-size: cover;
            height: 1030px;
            padding-top: 50px;
            overflow: hidden;
        }
        /*.content-1{background-color:#F2E1E7;}
.content-2{background-color:#EAEDDC;}
.content-3{background-color:#D3E5F2;}*/
        .content-1 {
            background-image: url(http://www.w3cfuns.com/data/attachment/album/201408/21/172602dj4h3k9406d9ud97.jpg);
        }
        .content-2 {
            background-image: url(http://www.w3cfuns.com/data/attachment/album/201408/21/172603re0t33x1lm9attmt.jpg);
        }
        .content-3 {
            background-image: url(http://www.w3cfuns.com/data/attachment/album/201408/21/172604wkfusrkbrrdzbqck.jpg);
        }
        .content h1 {
            font: 700 60px Tahoma;
            padding-left: 20px;
        }
        .animg {
            position: absolute;
            left: -1000px;
            top: 160px;
            -webkit-transition-duration: 1s;
        }
        .detailtitle {
            position: absolute;
            left: 0;
            top: -100px;
            padding: 10px 20px;
            background: #333;
            color: #fff;
            font-size: 24px;
            -webkit-transition-duration: 3s;
        }
        .detail {
            position: absolute;
            left: 2000px;
            top: 620px;
            width: 100%;
            font-size: 16px;
            -webkit-transition-duration: 2s;
        }
        .detailtitle-3 {
            top: 550px;
            left: -1000px;
        }
        /* 运动轨迹 begin */
        .content-focus .animg {
            left: 0;
            top: 160px;
            left: 20px;
        }
        .content-focus .detail {
            left: 0;
            top: 570px;
            left: 20px;
        }
        .content-focus .detailtitle {
            top: 500px;
            left: 20px;
        }
        .content-focus .detailtitle-3 {
            left: 20px;
        }
        /* 运动轨迹 end */
        .slidecount {
            position: fixed;
            right: 10px;
            bottom: 50%;
            z-index: 1;
        }
        .slidecount li {
            margin-bottom: 10px;
        }
        .slidecount li a {
            display: block;
            width: 10px;
            height: 10px;
            background: gray;
            border: 3px solid white;
            overflow: hidden;
            line-height: 100px;
            border-radius: 10px;
        }
        .slidecount li a:hover {
            text-decoration: none;
            background: white;
            border: 3px solid orange;
        }
        .slidecount li.focus a {
            background: orange;
            border: 3px solid orange;
        }
    </style>
</head>
<body>
    <div class=”article” style=”height: 2700px;”>
        <div class=”content content-1″ id=”n1″>
            <h1>风景一</h1>
            <img class=”animg” src=”http://www.w3cfuns.com/data/attachment/album/201408/22/180403g258d004l22gzb6z.jpg” width=”500″ height=”313″
            />
            <p class=”detailtitle”>励志名言</p>
            <p class=”detail”>
                向着目标奔跑，何必在意折翼的翅膀，只要信心不死，就看的见方向，顺风适合行走，逆风更适合飞翔，人生路上什么都不怕，就怕自己投降。
            </p>
        </div>
        <div class=”content content-2 content-focus” id=”n2″>
            <h1>风景二</h1>
            <img class=”animg” src=”http://www.w3cfuns.com/data/attachment/album/201408/22/180400rrvs782c7qbr9j79.jpg” width=”500″ height=”313″
            />
            <p class=”detailtitle”>《智慧人生》</p>
            <p class=”detail”>
                淡淡的日子淡然地过。生活如水，人生似茶，再好的茶放到水中一泡，时间久了，也就淡了。也许是棱角平了，或许是成熟稳重了，脚步越来越踏实，日子越来越平淡。人生步入另外一种境界，——淡然。
            </p>
        </div>
        <div class=”content content-3″ id=”n3″>
            <h1>风景三</h1>
            <img class=”animg” src=”http://www.w3cfuns.com/data/attachment/album/201408/22/180402j9wu9xzy9lrywllb.jpg” width=”500″ height=”313″
            />
            <p class=”detailtitle detailtitle-3″>名言警句</p>
            <p class=”detail”>
                无论今后的道路多么坎坷，只要抓住今天，迟早会在奋斗中尝到人生的甘甜。抓住人生中的一分一秒，胜过虚度中的一月一年！
            </p>
        </div>
    </div>
    <div class=”slidecount”>
        <ul>
            <li class=”focus”>
                <a href=”javascript:;” onclick=”scroll(‘n1’)”>1</a>
            </li>
            <li>
                <a href=”javascript:;” onclick=”scroll(‘n2’)”>2</a>
            </li>
            <li>
                <a href=”javascript:;” onclick=”scroll(‘n3’)”>3</a>
            </li>
        </ul>
    </div>
    <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.7.2.min.js”></script>
    <script type=”text/javascript”>
        $(function () {
            var oWinTop;
            var oContentH = $(“.content”).height();
            var oContentLen = $(“.content”).length;
            var vIndex = 0;
            $(“.article”).css(“height”, oContentH * oContentLen);
            $(“.content:eq(” + vIndex + “)”).addClass(“content-focus”);
            $(window).scroll(function () {
                oWinTop = $(window).scrollTop();
                $(“.slidecount li”).removeClass(“focus”);
                $(“.content”).removeClass(“content-focus”);
                if (oWinTop >= 0 && oWinTop < oContentH) {
                    vIndex = 0;
                    $(“.slidecount li:eq(” + vIndex + “)”).addClass(“focus”);
                    $(“.content:eq(” + vIndex + “)”).addClass(“content-focus”);
                } else if (oWinTop >= oContentH && oWinTop < (oContentH * 2)) {
                    vIndex = 1;
                    $(“.slidecount li:eq(” + vIndex + “)”).addClass(“focus”);
                    $(“.content:eq(” + vIndex + “)”).addClass(“content-focus”);
                } else {
                    vIndex = 2;
                    $(“.slidecount li:eq(” + vIndex + “)”).addClass(“focus”);
                    $(“.content:eq(” + vIndex + “)”).addClass(“content-focus”);
                }
            });
        });
    </script>
    <script type=”text/javascript”>
        jquery.getPos = function (e) {
            var l = 0;
            var t = 0;
            var w = jquery.intval(jQuery.css(e, ‘width’));
            var h = jQuery.intval(jQuery.css(e, ‘height’));
            var wb = e.offsetWidth;
            var hb = e.offsetHeight;
            while (e.offsetParent) {
                l += e.offsetLeft + (e.currentStyle ? jQuery.intval(e.currentStyle.borderLeftWidth) : 0);
                t += e.offsetTop + (e.currentStyle ? jQuery.intval(e.currentStyle.borderTopWidth) : 0);
                e = e.offsetParent;
            }
            l += e.offsetLeft + (e.currentStyle ? jQuery.intval(e.currentStyle.borderLeftWidth) : 0);
            t += e.offsetTop + (e.currentStyle ? jQuery.intval(e.currentStyle.borderTopWidth) : 0);
            return { x: l, y: t, w: w, h: h, wb: wb, hb: hb };
        };
        jQuery.getClient = function (e) {
            if (e) {
                w = e.clientWidth;
                h = e.clientHeight;
            } else {
                w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;
                h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;
            }
            return { w: w, h: h };
        };
        jQuery.getScroll = function (e) {
            if (e) {
                t = e.scrollTop;
                l = e.scrollLeft;
                w = e.scrollWidth;
                h = e.scrollHeight;
            } else {
                if (document.documentElement && document.documentElement.scrollTop) {
                    t = document.documentElement.scrollTop;
                    l = document.documentElement.scrollLeft;
                    w = document.documentElement.scrollWidth;
                    h = document.documentElement.scrollHeight;
                } else if (document.body) {
                    t = document.body.scrollTop;
                    l = document.body.scrollLeft;
                    w = document.body.scrollWidth;
                    h = document.body.scrollHeight;
                }
            }
            return { t: t, l: l, w: w, h: h };
        };
        jQuery.intval = function (v) {
            v = parseInt(v);
            return isNaN(v) ? 0 : v;
        };
        jQuery.fn.ScrollTo = function (s) {
            o = jQuery.speed(s);
            return this.each(function () {
                new jQuery.fx.ScrollTo(this, o);
            });
        };
        jQuery.fx.ScrollTo = function (e, o) {
            var z = this;
            z.o = o;
            z.e = e;
            z.p = jQuery.getPos(e);
            z.s = jQuery.getScroll();
            z.clear = function () { clearInterval(z.timer); z.timer = null };
            z.t = (new Date).getTime();
            z.step = function () {
                var t = (new Date).getTime();
                var p = (t – z.t) / z.o.duration;
                if (t >= z.o.duration + z.t) {
                    z.clear();
                    setTimeout(function () { z.scroll(z.p.y, z.p.x) }, 13);
                } else {
                    st = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.y – z.s.t) + z.s.t;
                    sl = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.x – z.s.l) + z.s.l;
                    z.scroll(st, sl);
                }
            };
            z.scroll = function (t, l) { window.scrollTo(l, t) };
            z.timer = setInterval(function () { z.step(); }, 13);
        };
    </script>
    <script type=”text/javascript”>
        function scroll(id) {
            $(“#” + id).ScrollTo(2000);
        }
        $(function () {
            $(‘.slidecount li’).click(function () {
                $(this).addClass(‘focus’).siblings().removeClass();
            });
        });
    </script>
</body>
</html>

前端开发最好的框架是什么|web前端开发教程的书本|移动前端开发原则

赞(0)
前端开发者 » Web前端开发:视差滚动
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论