每日案例4

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>视觉滚动</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-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:2s;}
    .detail{position: absolute;left: 2000px;top: 620px;width: 100%;font-size: 16px;-webkit-transition-duration:2s;}
    .detailtitle-3{top: 550px;left: -1000px;}
    .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;}
    .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://images.cnblogs.com/cnblogs_com/sdgjytu/606940/o_1344651748384.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://images.cnblogs.com/cnblogs_com/sdgjytu/606940/o_1319163709435.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://images.cnblogs.com/cnblogs_com/sdgjytu/606940/o_1319175496381.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>

时间: 2024-11-08 21:49:16

每日案例4的相关文章

每日案例3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

每日案例2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

每日案例1

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>CSS3动画——抖动导航</title> <style type="text/css"> *{padding: 0;margin: 0;} body{font-size: 12px;font-family: "宋体",Arial;color:

案例实战:每日上亿请求量的电商系统,JVM年轻代垃圾回收参数如何优化?

出自:http://1t.click/7TJ 目录: 案例背景引入 特殊的电商大促场景 抗住大促的瞬时压力需要几台机器? 大促高峰期订单系统的内存使用模型估算 内存到底该如何分配? 新生代垃圾回收优化之一:Survivor空间够不够 新生代对象躲过多少次垃圾回收后进入老年代? 多大的对象直接进入老年代? 别忘了指定垃圾回收器 今日思考题 1.案例背景引入 按照惯例,我们接下来会用案例驱动来带着大家分析到底该如何在特定场景下,预估系统的内存使用模型. 然后合理优化新生代.老年代.Eden和Surv

CSS3每日一练之内容处理-嵌套编号

出处:http://www.w3cfuns.com/thread-5592229-1-17.html 1.大标题一   1.子标题   2.子标题   3.子标题2.大标题二   1.子标题   2.子标题3.大标题三   1.子标题   2.子标题   3.子标题 这种问题,你可能会觉得直接定义两个计数器,分别编号不就行了,于是就写出了如下代码: <!DOCTYPE HTML> <html> <head> <meta charset="gb2312&q

个人作业2--英语学习APP案例分析

我们生活中很多时候要和软件打交道,大家上课开小差时候玩的手机游戏,买火车票的网站,互相联系用的微信.QQ,等等都是软件,都很值得分析.你为何成为它们的用户?它们的团队做对了什么,做错了什么?如果你来做,会做得更好么?通过各种案例分析,评测,辩论,总结,我们就能看到软件工程的原则在实践中的种种体现,学好软件工程,帮助我们在实践中做得更好. 第一部分 调研, 评测 1.下载并使用,描述最简单直观的个人第一次上手体验 . 整体来说,界面还是比较美观的,最大的优点应该就是没有植入广告了.而且分块也比较明

(转)大型网站架构系列:电商网站架构案例(1)

大型网站架构是一个系列文档,欢迎大家关注.本次分享主题:电商网站架构案例.从电商网站的需求,到单机架构,逐步演变为常用的,可供参考的分布式架构的原型.除具备功能需求外,还具备一定的高性能,高可用,可伸缩,可扩展等非功能质量需求(架构目标). 根据实际需要,进行改造,扩展,支持千万PV,是没问题的. 本次分享大纲 电商案例的原因 电商网站需求 网站初级架构 系统容量估算 网站架构分析 网站架构优化 架构总结 电商网站案例,一共有三篇本篇主要说明网站的需求,网站初始架构,系统容量估算方法. 一.电商

微软必应词典案例分析

1.微软必应词典案例分析 1.1微软必应词典功能性BUG说明 声明:以下版本和运行环境如下: 运行环境:Android 5.0.2 LRX22G MIUI 8.0.1.0(LHMCNDG) 必应词典软件版本:5.2.2 1.1.1:BUG-1-悬浮窗错误弹出 软件测试BUG特征 与其他软件存在使用冲突 重现步骤 0.安装讯飞输入法1.打开必应词典->我的->设置->勾选悬浮窗口->打开微信->在对话框中输入讯飞输入法自带的emoji表情,例如破涕为笑 测试结果 弹出“本地暂无

个人作业-Week2 案例分析

微软必应词典客户端的案例分析 第一部分 调研,评测 1)bug: 1.必应词典iOS版,学习界面中的经典词库出国考试(GM)和出国考试(T)一直加载不出来. 2.必应词典iOS版,拍照翻译功能十分耗时,有时需要一分多钟,且中间不能打断,不能够指定需要翻译的位置,基本没有正确的返回结果. 2)采访对象背景 北航计算机学院大三学生 学英语的目的:准备GRE考试,提高自己的英语水平 具体的需求是:增加直接在浏览器中进行查词的功能,因为想查询一个词需要切到主页然后再进入到必应词典的过程比较麻烦且耗时.