<![CDATA[木子屋 - HTML/CSS]]> http://www.mzwu.com/ zh-cn PBlog2 v2.4 木子屋 http://www.mzwu.com/images/logos.gif http://www.mzwu.com/ 木子屋 http://www.mzwu.com/article.asp?id=4982 <![CDATA[DIV使用opacity设置透明后子元素不能取消透明解决方法]]> service@mzwu.com(dnawo) Tue,19 Jul 2022 10:15:17 +0800 http://www.mzwu.com/default.asp?id=4982
复制内容到剪贴板程序代码 程序代码
<style>
    div{background-color: #000; opacity: 0.5;}
    span{opacity: 1;}
</style>

<div>
    <span>hello,world.</span>
</div>

将opacity放在background-color中设置可解决此问题：

复制内容到剪贴板程序代码 程序代码
<style>
    div{background-color: rgb(0, 0, 0, 0.5);}
</style>

<div>
    <span>hello,world.</span>
</div>


相关链接

[1].CSS的opacity设置背景透明字体不透明：https://blog.csdn.net/qq_52070860/article/details/124374739]]> http://www.mzwu.com/article.asp?id=4981 <![CDATA[基于CSS3属性Animation和transform实现类似翻书效果[转]]]> service@mzwu.com(dnawo) Mon,18 Jul 2022 09:36:18 +0800 http://www.mzwu.com/default.asp?id=4981

复制内容到剪贴板程序代码 程序代码
<!doctype html>
<head>
    <meta charset="utf-8">
    <title>基于CSS3属性Animation及transform实现类似翻书效果</title>
    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        .book{
            width: 460px;
            height: 300px;
            position: relative;
            margin: 150px 400px;
            transform: rotatex(15deg);
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
        }
        .page{
            width: 230px;
            height: 300px;
            border: 1px solid #666;
            position: absolute;
            right: 0;
            transform-origin: left;
            transform-style: preserve-3d;
            backface-visibility:hidden;
            font-size: 60px;
            text-align: center;
            line-height: 300px;
        }
        .page span{
            display: block;
            width: 100%;
            position: absolute;
            background-color: #00FFFF;
        }
        .page span:nth-child(2){
            transform: rotatey(-180deg);
            backface-visibility:hidden;
        }

        /*翻上一页动画*/
        @keyframes prev {
            0%{
                transform: rotatey(-180deg);
                z-index: 10;
            }
            100%{
                transform: rotatey(0deg);
            }
        }
        /*翻下一页动画*/
        @keyframes next {
            0%{
                transform: rotatey(0deg);
            }
            100%{
                transform: rotatey(-180deg);
                z-index: 10;
            }
        }
    </style>
</head>
<body>
    <!-- 所展示的书的内容 -->
    <div class="book">
        <div class="page">
            <span>1</span>
            <span>2</span>
        </div>
        <div class="page">
            <span>3</span>
            <span>4</span>
        </div>
        <div class="page">
            <span>5</span>
            <span>6</span>
        </div>
        <div class="page">
            <span>7</span>
            <span>8</span>
        </div>
        <div class="page">
            <span>9</span>
            <span>10</span>
        </div>
    </div>
    <!-- 用来控制上一页和下一页操作 -->
    <input type="button" value="上一页" id="prev"/>
    <input type="button" value="下一页" id="next"/>

    <script>
        $(document).ready(function(){
            let pageno = 0;
            let pagecount = $(".page").length;

            //设置每一页z-index
            let i=0;
            $(".page").each(function(){
                i++;
                $(this).css("z-index", pagecount-i);
            })

            //翻上一页
            $("#prev").click(function(){
                if(pageno > 0){
                    pageno--;
                    $(".page:eq("+pageno+")").css("animation", "prev 1.5s linear 1 forwards");
                }else{
                     pageno = 0;
                }
            })

            //翻下一页
            $("#next").click(function(){
                if(pageno < pagecount){                    
                    $(".page:eq("+pageno+")").css("animation", "next 1.5s linear 1 forwards");
                    pageno++;
                }else{
                     pageno = pagecount;
                }
            })
        });
    </script>
</body>
</html>

原文链接：https://www.cnblogs.com/LUOQIANangel/p/5598512.html]]> http://www.mzwu.com/article.asp?id=4979 <![CDATA[CSS3动画学习笔记]]> service@mzwu.com(dnawo) Sun,17 Jul 2022 21:14:53 +0800 http://www.mzwu.com/default.asp?id=4979

CSS3动画需@keyframes规则和animation属性一起配合使用才能生效，@keyframes规则定义了一组样式，它设置了多个关键点时元素的样式(也称关键帧)，animation属性定义了动画使用的规则、时长、速度等信息。

1、@keyframes规则

@keyframes规则定义了一组样式，它设置了多个关键点时元素的样式，它有两种写法：

复制内容到剪贴板程序代码 程序代码
@keyframes styles {
    /*0%、50%、100%分别对应动画0%、50%、100%时的状态*/
    0% {left: 0px;}
    50% {left: 180px;}
    100% {left: 200px;}
}

或者：

复制内容到剪贴板程序代码 程序代码
@keyframes styles {
    /*from为动画开始时的状态，to为动画结束时的状态*/
    from {left: 0px;}
    to {left: 200px;}
}

from等同于0%，to等同于100%，显然0%-100%形式可以更加精确的控制动画。为能兼容各种浏览器，推荐写法：

复制内容到剪贴板程序代码 程序代码
@keyframes styles {
    0% {left: 0px;}
    100% {left: 200px;}
}
@-webkit-keyframes styles {
    0% {left: 0px;}
    100% {left: 200px;}
}
@-moz-keyframes styles {
    0% {left: 0px;}
    100% {left: 200px;}
}

2、animation属性

animation属性定义了动画使用的规则、时长、速度等信息，animation的属性有：

引用内容 引用内容
animation-name：指定要绑定到的关键帧的名称；
animation-duration：指定动画需要多少秒或毫秒完成；
animation-timing-function：设置动画将如何完成一个周期；
animation-delay：设置动画在启动前的延迟间隔；
animation-iteration-count：定义动画的播放次数；
animation-direction：指定是否应该轮流反向播放动画；
animation-fill-mode：规定当动画不播放时，要应用到元素的样式；
animation-play-state：指定动画是否正在运行或已暂停；

animation属性写法如下：

复制内容到剪贴板程序代码 程序代码
.todo {
    animation-name: styles;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

animation属性支持简写：

引用内容 引用内容
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation属性简写的写法：

复制内容到剪贴板程序代码 程序代码
.todo {
    animation: styles 3s linear forwards;
}

同样为能兼容各种浏览器，推荐写法：

复制内容到剪贴板程序代码 程序代码
.todo {
    animation: styles 3s linear forwards;
    -webkit-animation: styles 3s linear forwards;
    -moz-animation: styles 3s linear forwards;
}

完整示例：

复制内容到剪贴板程序代码 程序代码
<!doctype html>
<head>
    <meta charset="utf-8">
    <title>CSS3 Animation</title>
    <style>
        div{
            width: 10px;
            height: 10px;
            background-color: #000;
            position: relative;
        }

        @keyframes styles {
            0% {left: 0px;}
            100% {left: 200px;}
        }
        @-webkit-keyframes styles {
            0% {left: 0px;}
            100% {left: 200px;}
        }
        @-moz-keyframes styles {
            0% {left: 0px;}
            100% {left: 200px;}
        }

        .todo {
            animation: styles 3s linear forwards;
            -webkit-animation: styles 3s linear forwards;
            -moz-animation: styles 3s linear forwards;
        }
    </style>
</head>
<body>
    <div class="todo"></div>
</body>
</html>

相关链接

[1].CSS3 动画：https://www.runoob.com/css3/css3-animations.html
[2].@keyframes 规则：https://www.runoob.com/cssref/css3-pr-animation-keyframes.html
[3].animation属性：https://www.runoob.com/cssref/css3-pr-animation.html]]> http://www.mzwu.com/article.asp?id=4933 <![CDATA[DIV铺满全屏的三种方法]]> service@mzwu.com(dnawo) Thu,07 Apr 2022 08:18:18 +0800 http://www.mzwu.com/default.asp?id=4933
复制内容到剪贴板程序代码 程序代码
<style>
    * {margin:0; padding:0;}
    html,body{height:100%;}
    .box {height:100%;}
</style>

<div class="box"></div>

2.定位法：
复制内容到剪贴板程序代码 程序代码
<style>
    * {margin:0; padding:0;}
    .box {position:absolute; width:100%; height:100%;}
</style>

<div class="box"></div>

复制内容到剪贴板程序代码 程序代码
<style>
    * {margin:0; padding:0;}
    .box {position:absolute; top:0; bottom:0; left:0; right:0;}
</style>

<div class="box"></div>
]]> http://www.mzwu.com/article.asp?id=4810 <![CDATA[jQuery-1.8.0触发checkbox表单click事件的一个坑及解决方法]]> service@mzwu.com(dnawo) Tue,06 Apr 2021 10:09:10 +0800 http://www.mzwu.com/default.asp?id=4810
复制内容到剪贴板程序代码 程序代码
<input type="checkbox"/>
<script type="text/javascript">
    $(":checkbox").click(function(){
        alert($(this).is(":checked"));
    });            
</script>

手动点击checkbox触发click事件一切正常，改用jQuery触发click事件就不正常了：

复制内容到剪贴板程序代码 程序代码
setInterval("$(':checkbox').click();", 2000);

页面总是先alert然后checkbox状态才改变，顺序反了，表现很怪异：明明alert显示的是false但checkbox却是选中状态，正常应该先checkbox状态变为选中然后alert显示true才对，查了下原因：

引用内容 引用内容
jQuery低版本在模拟点击时，首先触发click回调函数，回调函数执行完后再去修改checkbox的状态。

最终解决方法：

改用change事件 或 升级jQuery到1.9.0(含)以上版本 都可解决！！！]]> http://www.mzwu.com/article.asp?id=4803 <![CDATA[HTML打开WEB版百度地图标点和导航示例]]> service@mzwu.com(dnawo) Mon,29 Mar 2021 23:16:22 +0800 http://www.mzwu.com/default.asp?id=4803
URI API提供以下功能：

>.标注：根据名称或经纬度，调起百度地图产品展示一个标注点，如，分享位置，标注店铺；
>.POI（地点）检索：根据关键字进行本地检索、周边检索、区域检索，调起百度地图产品展示POI检索结果页；
>.公交、地铁线路查询：根据线路名称，调起百度地图产品展示公交、地铁线路图；
>.公交、驾车、步行导航：根据起/终点名称或经纬度，调起百度地图产品展示路径规划方案页；
>.地址解析/查询：根据经纬度或地址信息，进行地址查询或坐标查询，调起百度地图产品展示该位置；

URI API常用功能示例

1).地图标点功能

复制内容到剪贴板程序代码 程序代码
http://api.map.baidu.com/marker?location=30.264079,120.157796&title=西湖&content=断桥残雪&output=html&src=webapp.baidu.openAPIdemo#测试链接

2).驾车导航

复制内容到剪贴板程序代码 程序代码
http://api.map.baidu.com/direction?origin=latlng:30.334685,120.101293|name:三墩&destination=latlng:30.264079,120.157796|name:西湖&region=杭州&mode=driving&output=html&src=webapp.baidu.openAPIdemo#测试链接

复制内容到剪贴板程序代码 程序代码
http://api.map.baidu.com/direction?destination=latlng:30.264079,120.157796|name:西湖&region=杭州&mode=driving&output=html&src=webapp.baidu.openAPIdemo#测试链接



参考资料

[1].地图调起API：http://lbsyun.baidu.com/index.php?title=uri]]> http://www.mzwu.com/article.asp?id=4790 <![CDATA[DIV+CSS 网页布局之：两列布局[转]]]> service@mzwu.com(dnawo) Fri,19 Mar 2021 11:34:15 +0800 http://www.mzwu.com/default.asp?id=4790 1、宽度自适应两列布局

两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动，这样就省的再设置外边距了。

当元素使用了浮动之后，会对周围的元素造成影响，那么就需要清除浮动，通常使用两种方法。可以给受到影响的元素设置 clear:both，即清除元素两侧的浮动，也可以设置具体清除哪一侧的浮动：clear:left 或 clear:right，但必须清楚的知道到底是哪一侧需要清除浮动的影响。也可以给浮动的父容器设置宽度，或者为 100%，同时设置 overflow:hidden，溢出隐藏也可以达到清除浮动的效果。

两列宽度自适应，只需要将宽度按照百分比来设置，这样当浏览器窗口调整时，内容会根据窗口的大小，按照百分比来自动调节内容的大小。

复制内容到剪贴板程序代码 程序代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>宽度自适应两列布局</title>
<style>
*{margin:0;padding:0;}
#herder{
    height:50px;
    background:blue;
}
.main-left{
    width:30%;
    height:800px;
    background:red;
    float:left;
}
.main-right{
    width:70%;
    height:800px;
    background:pink;
    float:right;
}
#footer{
    clear:both;
    height:50px;
    background:gray;
}
</style>
</head>
<body>
<div id="herder">页头</div>
<div class="main-left">左列</div>
<div class="main-right">右列</div>
<div id="footer">页脚</div>
</body>
</html>

2、固定宽度两列布局

要实现固定宽度的两列布局，也很简单，只需要把左右两列包裹起来，也就是给他们增加一个父容器，然后固定父容器的宽度，父容器的宽度固定了，那么这两列就可以设置具体的像素宽度了，这样就实现了固定宽度的两列布局。

复制内容到剪贴板程序代码 程序代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>固定宽度两列布局</title>
<style>
*{margin:0;padding:0;}
#herder{
    height:50px;
    background:blue;
}
#main{
    width:960px;
    margin:0 auto;
    overflow:hidden;
}
#main .main-left{
    width:288px;
    height:800px;
    background:red;
    float:left;
}
#main .main-right{
    width:672px;
    height:800px;
    background:pink;
    float:right;
}
#footer{
    width:960px;
    height:50px;
    background:gray;
    margin:0 auto;
}
</style>
</head>
<body>
<div id="herder">页头</div>
<div id="main">
    <div class="main-left">左列</div>
    <div class="main-right">右列</div>
</div>
<div id="footer">页脚</div>
</body>
</html>

3、两列居中自适应布局

同理，只需要给定父容器的宽度，然后让父容器水平居中。

复制内容到剪贴板程序代码 程序代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>两列居中自适应布局</title>
<style>
*{margin:0;padding:0;}
#herder{
    height:50px;
    background:blue;
}
#main{
    width:80%;
    margin:0 auto;
    overflow:hidden;
}
#main .main-left{
    width:20%;
    height:800px;
    background:red;
    float:left;
}
#main .main-right{
    width:80%;
    height:800px;
    background:pink;
    float:right;
}
#footer{
    width:80%;
    height:50px;
    background:gray;
    margin:0 auto;
}
</style>
</head>
<body>
<div id="herder">页头</div>
<div id="main">
    <div class="main-left">左列</div>
    <div class="main-right">右列</div>
</div>
<div id="footer">页脚</div>
</body>
</html>

4、固定宽度横向两列布局

和单列布局相同，可以把所有块包含在一个容器中，这样做方便设置，但增加了无意义的代码，固定宽度就是给定父容器的宽度，然后中间主体使用浮动。

复制内容到剪贴板程序代码 程序代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>横向两列布局</title>
<style>
*{margin:0;padding:0;}
#warp{
    width:960px;
    margin:0 auto;
    margin-top:10px;
}
#herder{
    height:50px;
    background:blue;
}
#nav{
    height:30px;
    background:orange;
    margin:10px 0;
}
#main{
    width:100%;
    margin-bottom:10px;
    overflow:hidden;
}
#main .main-left{
    width:640px;
    height:200px;
    background:yellow;
    float:left;
}
#main .main-right{
    width:300px;
    height:200px;
    background:pink;
    float:right;
}
#content{
    width:100%;
    overflow:hidden;
}
#content .content-left{
    width:640px;
    height:800px;
    background:lightgreen;
    float:left;
}
#content .content-right-sup{
    width:300px;
    height:500px;
    background:lightblue;
    float:right;
}
#content .content-right-sub{
    width:300px;
    height:240px;
    background:purple;
    margin-top:20px;
    float:right;
}
#footer{
    height:50px;
    background:gray;
    margin-top:10px;
}
</style>
</head>
<body>
<div id="warp">
    <div id="herder">页头</div>
    <div id="nav">导航</div>
    <div id="main">
        <div class="main-left">左-上</div>
        <div class="main-right">右-上</div>
    </div>
    <div id="content">
        <div class="content-left">左-下</div>
        <div class="content-right-sup">右-上</div>
        <div class="content-right-sub">右-下</div>
    </div>
    <div id="footer">页脚</div>
</div>
</body>
</html>
]]> http://www.mzwu.com/article.asp?id=4544 <![CDATA[HTML5基本页模板]]> service@mzwu.com(dnawo) Thu,27 Feb 2020 08:56:40 +0800 http://www.mzwu.com/default.asp?id=4544 1、jQuery基本页

复制内容到剪贴板程序代码 程序代码
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>

<body>
    <script>
        $(document).ready(function(){
            alert("jQuery " + $.fn.jquery + " is ready.");
        });
    </script>
</body>
</html>

2、Vue基本页

复制内容到剪贴板程序代码 程序代码
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cn.vuejs.org/js/vue.min.js"></script>
</head>

<body>
    <div id="example">
        <a :href="url">Vue</a> {{ver}} is ready.
    </div>
    <script>
        var vm = new Vue({
            el: '#example',
            data: {
                url: 'https://cn.vuejs.org/',
                ver: Vue.version
            }
        })
    </script>
</body>
</html>
]]> http://www.mzwu.com/article.asp?id=4411 <![CDATA[HTML5<video>报错Uncaught (in promise) DOMException解决方法[转]]]> service@mzwu.com(dnawo) Tue,30 Jul 2019 16:27:01 +0800 http://www.mzwu.com/default.asp?id=4411
复制内容到剪贴板程序代码 程序代码
<video src="YOUR_VIDEO_URL" autoplay></video>

如果你用 javascript 代码显式调用play方法：

复制内容到剪贴板程序代码 程序代码
<video></video>
<script type="text/javascript">
    var vdo = $("video")[0]; //jquery
    vdo.src = "YOUR_VIDEO_URL";
    vdo.oncanplay = function(){
        this.play();
    };
</script>

你将会在控制台看到如下异常：

引用内容 引用内容
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

Firefox也有类似的异常提示：

引用内容 引用内容
NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

这是因为，Chrome只允许用户对网页进行主动触发后才可自动播放音频和视频。其实，严格地来说，是Chrome不允许在用户对网页进行触发之前播放音频，而视频其实是不受限制的。但因为视频文件同样包含了音频，所以也一同被禁止了。Chrome这样做的目的是为了防止开发者滥用自动播放功能而对用户产生骚扰。

既然知道了原因，那就开始找解决方法。

比较常规的做法是，为video标签设置muted属性，使它静音，这样视频就能自动播放了，但是没有声音:

复制内容到剪贴板程序代码 程序代码
<video src="YOUR_VIDEO_URL" autoplay muted></video>

然后待用户在网页上有了任意触发后，再将muted去掉，或者让用户手动去打开音频（腾讯视频就是这样做的）：

复制内容到剪贴板程序代码 程序代码
document.body.addEventListener('mousedown', function(){
    var vdo = $("video")[0]; //jquery
    vdo.muted = false;
}, false);  

好了，我们来看看大厂的解决方案：




优酷页面打开后视频不自动播放，需用户点击按钮才开始播放，B站解决方法和优酷一样，爱奇艺页面打开后视频自动开始播放，但声音需用户手工开启，所以暂时不要去想什么hack的方法了，有办法这些大厂早用了，还是老老实实引导用户手工点一下吧。

]]> http://www.mzwu.com/article.asp?id=4410 <![CDATA[HTML5<audio>报错audio.play is not a function解决方法]]> service@mzwu.com(dnawo) Tue,30 Jul 2019 16:13:44 +0800 http://www.mzwu.com/default.asp?id=4410
复制内容到剪贴板程序代码 程序代码
<audio id="audio1" controls="controls"></audio>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var audio = $("#audio1");
    audio.src = "http://www.mzwu.com/test.mp3";
    audio.play();
});
</script>

打开出错，提示：

引用内容 引用内容
Uncaught TypeError: audio.play is not a function



HTML5<audio>报错audio.play is not a function解决方法

play()方法属于DOM对象方法，$('#audio1')为jquery对象，jquery对象调用DOM对象的方法导致了上述错误，只需将jquery对象转换为DOM对象即可：

复制内容到剪贴板程序代码 程序代码
var audio = $("#audio1")[0];
]]>