一次项目杂记续

最新推荐文章于 2024-04-22 20:47:06 发布
最新推荐文章于 2024-04-22 20:47:06 发布
阅读量800 收藏
点赞数
分类专栏： html5 css3 文章标签： css3 javascript 动画 视频 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ernijie/article/details/50856098
版权

中午到的公司，昨天加班太晚，上午调休了。项目算是顺利上线。此刻头晕脑胀。做这个项目还是留下了遗憾。如有好的建议，共同讨论。

1、因为此项目是在微信里使用，而且页面里的动画有视频的元素，无论是安卓还是IOS有一部分机型，会出现全屏播放视频的情况，那原来的震撼效果，被破坏殆尽。

说明：我已经按照查到的资料在video标签里添加了对应的属性（x-webkit-airplay="true" webkit-playsinline="true"），可以还是不起作用。（急需要解决）

2、ISO7不支持音频的相关的方法、属性，play()，currentTime等。

希望大神们多多指点。附上自己的代码


html：

<div class=" video js_video">
                <video id="movie" preload="auto" poster="image/page01_bg.jpg" x-webkit-airplay="true" webkit-playsinline="true" style="width:100%; outline:none; vertical-align:baseline;">
                    <source type="video/mp4" src="image/movie.mp4"/>
                </video>
            </div>


css： 

/*
 * author: tianhaiting
 * date: 2016-3-3
 * function: animate
*/
/*reset*/
* { margin:0; padding:0; }
body, html { width:100%; height:100%; overflow:hidden; -webkit-backface-visibility: hidden; }
html { font-size:62.5%; }
body { font-family:"Microsoft YaHei"; }
input { 
    -webkit-tap-highlight-color:none;
    -webkit-appearance:none;
    outline:0;
}
section { display:block; }
img { display:block; width:100%; }
.hide { display:none; }
/*animate*/
@-webkit-keyframes fadeDownIn {
    0% { opacity:0; -webkit-transform:translateY(-30px); }
    100% { opacity:1; -webkit-transform:translateY(0); }
}
@-webkit-keyframes fadeRightIn {
    0% { opacity:0; -webkit-transform:translateX(3rem) }
    6% { opacity:1; -webkit-transform:translateX(-4rem) }
    50% { opacity:1; -webkit-transform:translateX(-4rem) }
    80% { opacity:.3; -webkit-transform:translateX(-6rem) }
    100% { opacity:0; -webkit-transform:translateX(-10rem); }
}
@-webkit-keyframes fadeLeftIn {
    0% { opacity:0; -webkit-transform:translateX(-12rem) }
    6% { opacity:1; -webkit-transform:translateX(3rem) }
    100% { opacity:1; -webkit-transform:translateX(0); }
}
@-webkit-keyframes fadeSmallIn {
    0% { opacity:0; -webkit-transform:scale(0,0); }
    100% { opacity:1; -webkit-transform:scale(1,1); }
}
@-webkit-keyframes fadeBigIn {
    0% { opacity:0; -webkit-transform:scale(2,2); }
    100% { opacity:1; -webkit-transform:scale(1,1); }
}
@-webkit-keyframes fadeRoundIn {
    0% { opacity:0; left:0; -webkit-transform:rotateZ(0);}
    1% { opacity:1; -webkit-transform:rotateZ(0); }
    100% { opacity:1; left:62.5%; -webkit-transform:rotateZ(-720deg); }
}
@-webkit-keyframes fadeJzIn {
    0% { opacity:0; -webkit-transform:translateX(-10rem); }
    10% { opacity:1; -webkit-transform:translateX(0) rotateZ(5deg);  }
    20% { opacity:1; -webkit-transform:translateX(0) rotateZ(15deg);  }
    30% { opacity:1; -webkit-transform:translateX(0) rotateZ(30deg);  }
    40% { opacity:1; -webkit-transform:translateX(0) rotateZ(0);  }
    50% { opacity:1; -webkit-transform:translateX(0) rotateZ(15deg);  }
    60% { opacity:1; -webkit-transform:translateX(0) rotateZ(0);  }
    70% { opacity:1; -webkit-transform:translateX(0) rotateZ(10deg);  }
    80% { opacity:1; -webkit-transform:translateX(0) rotateZ(0deg);  }
    90% { opacity:1; -webkit-transform:translateX(0) rotateZ(2deg);  }
    100% {opacity:1; -webkit-transform:translateX(0) rotateZ(0);  }
}
@-webkit-keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes Shake {
    0% { opacity:1; -webkit-transform:rotateZ(0); }
    100% { opacity:1; -webkit-transform:rotateZ(30deg); }
}
@-webkit-keyframes fadeArrow {
    0% { opacity:0; -webkit-transform:translateY(0); }
    100% { opacity:1; -webkit-transform:translateY(.8rem); }
}
@-webkit-keyframes fadeOut {
    0% { opacity:1; }
    100% { opacity:0; }
}
@-webkit-keyframes fadeJumpIn {
    0% { opacity:1;  -webkit-transform:scale(.5,.5); }
    100% {  opacity:1; -webkit-transform:scale(1,1); }
}
/*video*/

.video_box { position: fixed; width:100%; height:100%; top: 0; left: 0; bottom: 0; background: rgba(0,0,0,0.7); display: none; z-index: 10; }

.video_box .close { color: #fff; font-size: 3rem; position: absolute; right: .1rem; top: 0; z-index: 11; }

.video_con { margin:3rem 0 0 0; }

/*loading*/
.load_wrap { width:100%; height:100%; position:absolute; left:0; top:0; bottom:0; background:#0d1117;}

.load_percent { margin:10rem 0 0; text-align:center; font-size:3rem; color:#eeac5e; }
.load_tip { margin:2rem 0 0 0; font-size:1rem; color:#fce4a1; text-align:center; }

/*swiper*/
.global { width:100%; height:100%; position:relative; overflow:hidden; }
.layout { position:relative; overflow:hidden; height:100%; -webkit-box-sizing: border-box; box-sizing: border-box; background-repeat:no-repeat; background-position:center center; background-size:100% 100%; }
.layout .img { position:absolute; background-size:contain; background-repeat:no-repeat; background-position:center center; opacity:0; }

/*first page*/
.layout1 { background-image:url(../image/page01_bg_m.jpg) }

.layout1 .box { width:100%; height:100%; overflow:hidden; }

.layout1 .img1 { width:40.156%; height:11.354%; left:4.688%; top:3.478%; background-image:url(../image/logo.png); }

.layout1 .img2 { width:63.438%; height:73.565%; left:24.688%; top:8.87%; background-image:url(../image/role01.png); }

.layout1 .img3 { width:100%; height:100%; left:0%; top:0%; /*background-image:url(../image/glass_01.png);*/ }

.layout1 .img4 { width:13.438%; height:8.87%; left:60.938%; top:27.478%; background-image:url(../image/click.png); }

.layout1 .img5 { width:68.75%; height:27.478%; left:30.938%; top:42.435%; background-image:url(../image/big_word01.png); }

.layout1 .img6 { width:100%; height:100%; left:0%; top:0%; background-image:url(../image/page01_bg_q.jpg); }

.layout1 .img7 { width:100%; height:83.652%; left:0%; top:4%; background-image:url(../image/role02.png); }

.layout1 .img8 { width:74.375%; height:11.826%; left:13.75%; top:30.087%; background-image:url(../image/big_word02.png); }

.layout1 .img9 { width:95.313%; height:34.783%; left:4.688%; top:42.609%; background-image:url(../image/glass_02.png); }

.layout1 .img10 { width:12.813%; height:7.13%; left:62.5%; top:22.609%; background-image:url(../image/video_btn.png); }

.layout1 .arrow { width:21.253%; height:5.217%; left:39.063%; top:79.304%; background-image:url(../image/arrow.png); }

.layout1 .hit1, .layout1 .hit2, .layout1 .hit3 { opacity:1; }

.layout1 .hit1 { width:218px; height:273px; left:-110px; top:-130px; background-image:url(../image/hit1.png); }

.layout1 .hit2 { width:218px; height:205px; left:-110px; top:-100px; background-image:url(../image/hit2.png); }

.layout1 .hit3 { width:340px; height:292px; left:-170px; top:-140px; background-image:url(../image/hit3.png); }

.layout1.swiper-slide-active .img1{ -webkit-animation:fadeDownIn 1s ease-in .5s both; } 

.layout1.swiper-slide-active .img2{ -webkit-animation:fadeSmallIn 1s ease-in 1.5s both; }

.layout1.swiper-slide-active .img3{ -webkit-animation:fadeSmallIn .1s ease-in 3s both; }

.layout1.swiper-slide-active .img4{ -webkit-animation:Shake 1s ease-in 2.5s infinite; }

.layout1.swiper-slide-active .img5 { -webkit-animation: fadeRightIn 1.5s ease-in 1s 1;}

.layout1.swiper-slide-active .img2 { background-image:url(../image/role01_q.png); -webkit-animation: fadeOut 1.5s ease-out 2.5s both; }

.layout1.layout1_1 .img6 { background-size:100% 100%; -webkit-animation:fadeDownIn 1s ease-in 0s both; }

.layout1.layout1_1 .img7 {  -webkit-animation:fadeLeftIn 1s ease-in 1.5s both; }

.layout1.layout1_1 .img8 {  -webkit-animation:fadeBigIn 1s ease-in 2.5s both; }

.layout1.layout1_1 .img9 {  -webkit-animation:fadeSmallIn 1s ease-in 2.5s both; }

.layout1.layout1_1 .img10 {  -webkit-animation:fadeRoundIn 1s ease-in 3.5s both; }

.layout1.layout1_1 .arrow {  -webkit-animation:fadeArrow 1.5s ease-in-out 4.5s infinite; }

.layout1 .video {position: absolute; -webkit-perspective: 1000; perspective: 1000; -webkit-transform-origin: center center; -webkit-transform: translate3d(0,0,0) scale(1,1); opacity:1; width:100%; height:100%; left:0; top:0; z-index:1; }

/*second page*/
.layout2 { background-image:url(../image/page02_bg.jpg) }

.layout2 .role{ width:58.438%; height:77.739%; left:0; top:7.826%; background-image:url(../image/page02_role.png) }

.layout2 .word{ width:63.75%; height:17.217%; left:28.438%; top:4.348%; background-image:url(../image/page02_word.png) }

.layout2 .video{ position: absolute; width:92.188%; height:28.87%; left:4.348%; top:47.826%; -webkit-perspective: 1000; perspective: 1000; -webkit-transform-origin: center center; -webkit-transform: translate3d(0,0,0) scale(1,1); }

.layout2 .video video{ width:100%; height:100%; }

.layout2 .arrow { width:21.253%; height:5.217%; left:39.063%; top:79.304%; background-image:url(../image/arrow.png); -webkit-animation:fadeArrow 1.5s ease-in-out .5s infinite; }

.layout2.swiper-slide-active .role { -webkit-animation:fadeLeftIn 1s ease-in .5s both; }

.layout2.swiper-slide-active .word { -webkit-animation:fadeBigIn 1s ease-in .5s both; }

/*third page*/
.layout3 { background-image:url(../image/page03_bg.jpg) }

.layout3 .role{ width:58.438%; height:74.783%; left:0; top:7.826%; background-image:url(../image/page03_role.png) }

.layout3 .word{ width:85.625%; height:17.739%; left:9.375%; top:4.348%; background-image:url(../image/page03_word.png) }

.layout3 .video{ position: absolute; width:92.188%; height:28.87%; left:4.348%; top:47.826%; -webkit-perspective: 1000; perspective: 1000; -webkit-transform-origin: center center; -webkit-transform: translate3d(0,0,0) scale(1,1); }

.layout3 .video video{ width:100%; height:100%; }

.layout3 .arrow { width:21.253%; height:5.217%; left:39.063%; top:79.304%; background-image:url(../image/arrow.png); -webkit-animation:fadeArrow 1.5s ease-in-out .5s infinite; }

.layout3.swiper-slide-active .role { -webkit-animation:fadeLeftIn 1s ease-in .5s both; }

.layout3.swiper-slide-active .word { -webkit-animation:fadeBigIn 1s ease-in .5s both; }

/*forth page*/
.layout4 { background-image:url(../image/page04_bg.jpg) }

.layout4 .role{ width:85.438%; height:75.652%; left:0; top:10.435%; background-image:url(../image/page04_role.png) }

.layout4 .word{ width:60.313%; height:17.043%; left:32.188%; top:4.174%; background-image:url(../image/page04_word.png) }

.layout4 .video{ position: absolute; width:92.188%; height:28.87%; left:4.348%; top:47.826%; -webkit-perspective: 1000; perspective: 1000; -webkit-transform-origin: center center; -webkit-transform: translate3d(0,0,0) scale(1,1); }

.layout4 .video video{ width:100%; height:100%; }

.layout4 .arrow { width:21.253%; height:5.217%; left:39.063%; top:79.304%; background-image:url(../image/arrow.png); -webkit-animation:fadeArrow 1.5s ease-in-out .5s infinite; }

.layout4.swiper-slide-active .role { -webkit-animation:fadeLeftIn 1s ease-in .5s both; }

.layout4.swiper-slide-active .word { -webkit-animation:fadeBigIn 1s ease-in .5s both; }

/*fifth page*/
.layout5 { background-image:url(../image/page05_bg.jpg) }

.layout5 .word{ -webkit-transform-origin:right bottom; width:62.813%; height:56.174%; left:18.75%; top:10.957%; /*background-image:url(../image/page05_word.png)*/ }

.layout5 input.btn{ display:block; background-color:transparent; border:none; width:52.5%; height:6.957%; left:23.438%; top:69.391%; background-image:url(../image/page05_Btn.png) }

.layout5.swiper-slide-active .word { -webkit-animation:fadeJzIn 2s ease-in .5s both; }

.layout5.swiper-slide-active input.btn { -webkit-animation:fadeJumpIn .8s ease-in 2.5s both 3; }

.landscapes { z-index:100; position:fixed; left:0; top:0; bottom:0; background:rgba(0,0,0,0.5); color:#fff; text-align:center; font-size:3rem; width:100%; }

@media screen and (min-width:320px) and (max-width:375px) {
    .layout5 .word img{ width:82%; margin:0 auto; }
}
@media screen and (min-width:376px) and (max-width:414px) {
    .layout5 .word img{ width:83%; margin:0 auto; }
}
@media screen and (min-width:415px) and (max-width:768px) {
    .layout5 .word img{ width:60%; margin:0 auto; }
}
@media screen and (min-width:769px) and (max-width:1024px) {
    .layout5 .word img{ width:40%; margin:0 auto; }
}

@media all and (orientation:landscape) {
    .landscapes { display:block; }
}
@media all and (orientation:portrait) {
    .landscapes { display:none; }
}

js： 

/*
author: tiahaiting
function: jsws_red_pocket
*/
; (function (window) {
    
    var pics = [];
    var layouts = {
        loadProgerss: function (pic) {
            var _this = this;
            var img = new Image();
            var index = 0;
            var len = pic.length;
            var per = document.getElementById("progress");
            var loadImg = function () {
                img.src = pic[index];
                img.onload = function () {

                    per.innerHTML = Math.floor((index + 1) / len * 100) + "%";
                    index++;
                    if (index < len) {
                        loadImg();
                    } else {
                        $(".js_load").hide();
                        _this.init();
                    }
                };
                img.onerror = function () {
                    per.innerHTML = Math.floor((index + 1) / len * 100) + "%";
                    index++;
                    if (index < len) {
                        loadImg();
                    } else {
                        $(".js_load").hide();
                        _this.init();
                    }
                }
                
            };
            loadImg();
        },
        animate: function (index) {
            if (index == 1) {
                $(".js_show,#image").removeClass("hide");
                $(".layout1").removeClass("layout1_1");
                $(".hit1,.hit2,.hit3").addClass("hide");
                $("#movie1")[0].play();
            } else if (index == 2) {
                $("#movie2")[0].play();
            } else if (index == 3) {
                $("#movie3")[0].play();
            };
        },
        init: function () {
           
            $(".global").removeClass("hide");
            var context = this;
            var initialSlide = 0;
            

            context.swiper = new Swiper('body', {
                wrapperClass: 'global',
                slideClass: 'layout',
                mode: 'vertical',
                initialSlide: initialSlide,
                noSwiping: true,
                preventClicksPropagation: false,
                onSlideChangeStart: function (swiper, direction) {
                    context.animate(swiper.activeIndex);
                }
            });
            context.clickGlass();
            $(".js_videoBtn").click(function () {
                $(".js_video").show();
                $("#bg_sound")[0].pause();
                $('.video_con').html('<iframe frameborder="0" width="100%" height="100%" src="http://v.qq.com/iframe/player.html?vid=w0186hql8o8&tiny=0&auto=0" allowfullscreen></iframe>');
            });
            $(".close").click(function () { 
                $(".js_video").hide();
                $('iframe').remove();
                $("#bg_sound")[0].play();
            });
            
            
        },
        clickGlass: function () {
            var hitCount = 1;
            var _this = this;
            $(".js_click")[0].addEventListener("touchstart", function (e1) {
                if (hitCount < 4) {
                    if (_this.getIosVersion() != 7) {
                        $("#hit_sound")[0].currentTime = 0;
                        $("#hit_sound")[0].play();
                    }
                    $(".hit" + hitCount).removeClass("hide").css("-webkit-transform", "translate3d(" + e1.touches[0].pageX + "px," + e1.touches[0].pageY + "px,0)");
                } else {
                    //敲击结束后
                    hitCount = 0;
                    $(".js_show,#image").addClass("hide");
                    $(".js_video").removeClass("hide");
                    $("#movie")[0].play();
                }
                
                hitCount++;

            });
            $("#movie")[0].addEventListener("ended", function () {
                $("#movie")[0].pause();
                $(".js_video").addClass("hide");
                $(".layout1").addClass("layout1_1");
                $("#bg_sound")[0].play();
                

            });
        },
        getIosVersion:function () {
            var agent = navigator.userAgent.toLowerCase();
            var version;
            if (agent.indexOf("like mac os x") > 0) {
                //ios
                var regStr_saf = /os [\d._]*/gi;
                var verinfo = agent.match(regStr_saf);
                version = (verinfo + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");
            }
            var version_str = version + "";
            if (version_str != "undefined" && version_str.length > 0) {
                version = version.substring(0, 1);
                return version
            }
            return false
        }
    };
    window.layouts = layouts;

    layouts.loadProgerss(pics);
})(window);
 上边是部分代码，如果有问题请大家指正。。。

中午到的公司，昨天加班太晚，上午调休了。项目算是顺利上线。此刻头晕脑胀。做这个项目还是留下了遗憾。如有好的建议，共同讨论。

1、因为此项目是在微信里使用，而且页面里的动画有视频的元素，无论是安卓还是IOS有一部分机型，会出现全屏播放视频的情况，那原来的震撼效果，被破坏殆尽。

说明：我已经按照查到的资料在video标签里添加了对应的属性（x-webkit-airplay="true" webkit-playsinline="true"），可以还是不起作用。（急需要解决）

2、ISO7不支持音频的相关的方法、属性，play()，currentTime等。

希望大神们多多指点。附上自己的代码


ClassicSong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
oracle杂记.doc
05-25
oracle杂记.doc 这是我个人的总结。 主要是oracle的编程以及体系结构的理解。
git使用杂记
02-25
作为一个开发者，如果现在还不知道git或者还不会使用git，那么你应该好好的反省。自己去好好看一遍的入门介绍吧。今天只是对自己在日常中使用git的一些常用命令的介绍与自己认为不错且能提高我们办公效率的命令。...
系统服务杂记
qq_48975137的博客
08-15 349
一、高级命令扩展。
中间件相关杂记
一个初学者 的博客
03-28 1410
• Tomcat服务器 采用nio方式的话跟netty一样，也会有个Acceptor，网络接收线程池和事件处理线程池，处理一个HTTP请求的过程如下： 1. 用户点击网页内容，请求localhost/test/get被发送到本机端口8080，被在那里监听的Coyote HTTP/1.1 Connector获得。 2.Connector生成request和response并交给它所在的Service的Engine来处理。 3.Engine把请求分配到名为localhost的Host 4.Hos...
网络安全工程师毕业答辩杂记
Gjqhs的博客
04-17 6623
目录 01 数通技术知识要点... 1 02 渗透测试基础... 1 03 渗透测试环境搭建与工具使用... 1 04 信息收集... 1 05 web安全... 2 06 不定性拓展内容... 2 07 应急响应... 2 08 安全基线... 3 09 操作系统要点... 3 01 数通技术知识要点 TCP/IP模型及OSI七层模型结构、名字、对应关系 TCP/IP网络层、传输层、数据链路层头部（尾部）结构（哪些主要字段，每个字段的用途）及长度。 IP子网划分与聚合
SQL Server性能调优杂记（二）----傻瓜机的失效效应续
enhydraboy的专栏
09-26 1172
     上文说道了失效效应。只想说明在Performance Tunning方面只能根据情况来寻求原因并解决。这是一个有意思的过程。大原则是经验，帮助我们少犯错误。因此，糟糕的设计，必然导致性能问题。没有经验的程序员必然会写出糟糕的代码。但是良好的设计可以弥补程序员的经验不足。这个到此打住，这个topic涉及品质管理，实在太大了。     再看一例，失效效应的体现。     还是上文数说
因果推断杂记——因果推断与线性回归、SHAP值理论的关系（十九）
素质云笔记
12-15 6087
文章目录1 因果推断与线性回归的关系1.1 DML的启发1.2 特殊的离散回归 = 因果？2 因果推断中的ITE 与SHAP值理论的思考 1 因果推断与线性回归的关系 第一个问题也是从知乎的这个问题开始： 因果推断（causal inference）是回归（regression）问题的一种特例吗？ 其中经济学大佬慧航提到过，回归只是工具，因果推断可以用，其他研究方向也可以用。 在此给出我的看法， 因果推断，是需要考虑干预得（Y|X,T），其中干预效应是主要的差异点； 而一般的多元，只是(Y|X)，并
#Android开发杂记--如何让App自动更新并跳转至安装界面(完美兼容Android10)
投笔丶从戎的博客
03-20 5645
#Android开发杂记--如何让App自动更新并跳转至安装界面（完美兼容Android10）引言自动更新App的步骤定义FileProviderFileProvider常见问题解析： 引言        一款发行的app不可能一开始就达到完美，因此App自动更新的重要性不言而喻。        到了7.0以后使用FileProvider访问sdk私有文件，原本只需要草
一个计算机专业学生几年的编程经验汇总 （该系列一共 11 篇,看完之后，java 基础绝对有不小的提升！）
逍遥飞鹤的专栏
07-28 4558
Java 杂谈（一）   想来学习 Java 也有两个年头了，永远不敢说多么精通，但也想谈谈自己的感受，写给 软件学院的同仁们，帮助大家在技术的道路上少一点弯路。说得伟大一点是希望大家为软件 学院争气，其实主要的还是大家自身的进步提升。   1． 关于动态加载机制       学习 Java 比 C++更容易理解 OOP 的思想，毕竟 C++还混合了不少面向过程的成分。 很多人都能背出来 J
python保存类对象_python 存储类对象吗
weixin_39620273的博客
12-18 1168
Python源码读后小结Python 笔记前言(还是叫杂记吧)在python中一切皆对象, python中的对象体系大致包含了"类型对象", "Mapping对象(dict)", "Sequence对象(list, set, tuple, string)", "Number对象(integer, float, bo...文章megachen2018-06-08778浏览量精选26个Python实用...
【完结】cyのMemo（20240422~20240608）
最新发布
一只热爱奔跑的程序猿
04-22 1301
太阳，终将再度升起。
java杂记.txt
04-24
除了Java基础之外，还有一小部分web方面的知识，如：JSP、EL表达式、JSTL、过滤器与监听器之类的知识，但是只有一小部分
互联网杂记（一）.docx
09-27
- **商业模式**：360通过免费模式吸引了大量用户，后续可以通过广告投放等方式实现盈利，这一模式的成功也为其他互联网企业提供了一种新的思路。 ### 2. 谦虚的重要性及其在创业中的体现 #### 知识点说明： - **...
使用css3实现环形进度条
热门推荐
ClassicSong的博客
06-01 4万+
进度条效果如下： 整圆的效果处理会简单些，不完整环实现起来细节多点。下边是实现逻辑和过程。 进度条组成： 环形：两种颜色进度条，当余量少于50%时进度条颜色由绿色变为黄色。进度条结构由两个叠加环形组成；上叠加环形展示剩余量，深色；下叠加环形展示100%总量，浅色。 样式实现： 1：画一个方形，如图中阴影部分所示： 2：方形中画两个等大均分方形的矩形，(注意每个矩形一定要设置：o...
css3中rem详解
ClassicSong的博客
08-04 1万+
rem：是一个相对单位，相对根元素字体大小的单位，再直白点就是相对于html元素字体大小的单位。 优点：这样在计算子元素有关的尺寸时，只要根据html元素字体大小计算就好。不再像使用em时，得来回的找父元素字体大小频繁的计算，根本就离不开计算器。 刚刚做完一个移动端的项目有一些使用的小收获在这里分享一下，也许大家已用过。如果有欠妥的地方，欢迎讨论。 html的字体大小
锚点伪类改善点击时按钮状态交互细节（使用:active实现）
ClassicSong的博客
05-24 2927
温习了一遍锚点伪类，五个状态，老规则 love and hate  再加一个focus。详细点就是:link, visited,  focus， active, hover，前两个为静态伪类只有超链接才会有，后两个为动态伪类，可以应用于任何元素（后三个的顺序也不能变）。 由此想到平时做的项目，按钮、链接元素都是习惯加个默认的样式，再加个hover样式。可是在移动端这个样式却没有那么明显，当用户点
css3--容器背景分上中下三部分，上下不变，中间部分垂直重复平铺切图方案
ClassicSong的博客
03-05 2634
拿到个这样的设计稿，蓝色背景图片忽略，注意白线框。 切图要求： 1、红色框位置1：背景不变。 2、红色框位置3：背景不变。 3、红色框位置2：背景需要垂直方向重复，即内容不固定，支持垂直方向延展。 4、黄色框位置4：放置内容区域。 切图方案一： 没准会想到简单粗暴的方式，直接切一张大背景就好了，为什么要较劲，不同页面切不同背景。可以直接那么搞，一次性的还好，时不时的让你维护一下内容，可能会惨死。...
火狐text-align:justify设置两端对齐失效
ClassicSong的博客
08-26 1331
都这个时代了，火狐居然不支持text-align:jusitify；可能吗？？？
AbstractQueuedSynchronizer详解：并发控制核心
1. **ExclusiveMode**：这是独占模式，即一次只有一个线程可以获取锁。`acquire(int arg)`方法是获取独占锁的关键，如果当前线程能够获取锁，它会更新锁的状态并持有锁；否则，线程会被添加到等待队列的尾部并被阻塞...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值