h5c3 day2

最新推荐文章于 2019-09-06 21:23:41 发布

LBunny_

最新推荐文章于 2019-09-06 21:23:41 发布

阅读量274

点赞数

本文链接：https://blog.csdn.net/LBunny_/article/details/83584467

版权

1、边框图片：在内容变化的容器可以使用，边框自动填充

border-image:图片资源切割的尺寸（切割位置距离对应的边的距离），默认单位px，不能使用小数/ 边框宽度平铺方式;

border-image:url() 167/20px round;

border-image-source:url();

border-image-slice:167 167 167 167;

border-image-width:20px;

border-image-repeat:round; //round环绕 strength拉伸 repeat 平铺

2、语化标签

html5shiv.min.js插件可以使IE9以下支持H5C3，放在页面结构前，提前解析

条件注释：放在网页任何地方，根据浏览器版本去加载内容 lt小于 gt大于 lte小于等于 gte大于等于

<!--[if ;te IE 8]>

<![endif]-->

3、QQTIM

index.html

<head>

<title>QQTIM</title>

<!--[if ;te IE 8]>

<![endif]-->

</head>

<body>

</ul>

<ul>

</ul>

<span>当前在线人数：227,763,015</span>

</div>

</div>

</nav>

</section>

<h2>沟通，是跨越<br>千山万水的亲切声音</h2>

<p>无论何时何地，你都能自由享受QQ在各类<br>终端上带来的高清通话，与好友一起想聊多久聊多久</p>

</div>

</section>

<h2>沟通，是随时随地<br>爽快收发</h2>

<p>通过QQ，电脑和手机上的文件都能收发自如，<br>更有手机在线查阅，轻松你的工作和生活。</p>

</div>

</section>

<h2>沟通，是志同道合<br>的他们的放肆青春</h2>

<p>即使世界很大，你也不会孤单，在兴趣部落<br>有和你一样的人，期待着和你一起发现精彩。</p>

</section>

</div>

</footer>

</body>

index.js

$(function(){

/1、引入

/2、结构背景加data-stellar-background-ratio="0.3" 样式bg需要加background-attachment:fixed;

/3、初始化结构

$.stellar({

horizontalScrolling:false,

responsive:true

});

index.css

/*=====reset css=====*/

margin:0;

padding:0;

}

body(

font-size:14px;

font-family:"Microsoft YaHei",sans-serif; //浏览器默认字体

ul{

list-style:none;

}

color:#333;

text-decoration:none;

}

/*=====model css=====*/

.qq_nav{

height:150px;

background:url("../images/nav_bg.png") repeat-x;

position:absolute;

top:0;

left:0;

width:100%;

}

.qq_nav .wrapper{

width:1080px;

height:75px;

margin:0 auto;

}

.qq_nav .wrapper .logo{

width:100px;

height:75px;

background:url("../images/nav_brand.png") no-repeat center;

float:left:

}

.qq_nav .wrapper .nav{

float:left;

}

.qq_nav .wrapper .nav li{

float:left;

font-size:18px;

line-height:75px;

margin-left:20px;

}

.qq_nav .wrapper .nav li a{

display:block;

padding:0 20px;

}

.qq_nav .wrapper .nav li a.hover

.qq_nav .wrapper .nav li a:hover{

background:#12b7f5;

}

.qq_nav .wrapper .register{

float:right;

width:96px;

height:36px;

text-align:center;

line-height:36px;

font-size:16px;

background:#12b7f5;

color:#fff;

border-radius:18px;

margin-top:18px;

}

.qq_nav .wrapper .other{

float:right;

width:250px;

height:75px;

}

.qq_nav .wrapper .other ul{

width:250px;

}

.qq_nav .wrapper .other ul li{

float:right;

margin-left:40px;

}

.qq_nav .wrapper .other ul li a{

font-size:14px;

text-shadow:0 0 2px #333;

height:50px;

line-height:50px;

}

.qq_nav .wrapper .other span{

float:right;

}

.qq_banner{

height:880px;

background:url("../images/banner_bg.png") no-repeat center top;

padding-top:150px;

}

.qq_banner img{

display:block;

margin:20px auto 0;

}

.qq_banner img:last-child{

width:100%; /自适应等比例缩放图片有这个特殊效果/

}

.qq_sound{}

.qq_sound .h1{

height:300px;

background:url("../images/sound_text.png") no-repeat center /cover;

font-size:0;

}

.qq_sound .bg{

height:500px;

background:url("../images/sound_bg.jpg") no-repeat center /cover;

}

.qq_sound .content{

height:500px;

width:980px;

margin:0 auto;

position:relative;

}

.qq_sound .content .iphone{

position:absolute;

left:0;

top:-200px;

width:700px;

height:700px;

background:url("../images/sound_phone.jpg") no-repeat center top/cover;

}

.qq_sound .content h2{

float:right;

padding-top:100px;

width:500px;

text-align:right;

font-size:40px;

}

.qq_sound .content p{

padding-top:50px;

float:right;

width:500px;

text-align:right;

font-size:18px;

text-shadow: 0 0 2px #333;

}

.qq_file{}

.qq_file .bg{

width:500px;

background:url("../images/file_bg.jpg") no-repeat center top/cover;

}

.qq_file .content{

height:500px;

width:980px;

margin:0 auto;

position:relative;

}

.qq_file .content .mac{

width:600px;

height:340px;

background:url("../images/file_mac.png") no-repeat center top/cover;

position:absolute;

right:-60px;

top:100px;

}

.qq_file .content h2{

float:left;

padding-top:100px;

width:500px;

text-align:left;

font-size:40px;

}

.qq_file .content p{

padding-top:50px;

float:left;

width:500px;

text-align:left;

font-size:18px;

text-shadow: 0 0 2px #333;

}

.qq_interest{}

.qq_interest .bg{

height:500px;

background:url("../images/interest_bg.jpg") no-repeat center /cover;

}

.qq_interest .content{

height:500px;

width:980px;

margin:0 auto;

position:relative;

}

.qq_interest .content .phone{

position:absolute;

left:0;

top:0;

width:350px;

height:500px;

background:url("../images/interest_phone.png") no-repeat center top/cover;

}

.qq_interest .content h2{

float:right;

padding-top:100px;

width:500px;

text-align:right;

font-size:40px;

}

.qq_interest .content p{

padding-top:50px;

float:right;

width:500px;

text-align:right;

font-size:18px;

text-shadow: 0 0 2px #333;

}

.qq_footer{}

.qq_sound .bg,.qq_file .bg,.qq_interest .bg{

background-attachment:fixed;

}

4、3d切割轮播图

//轴的正方向，translate rotate 3d转换属性

//rotateX rotateY rotateZ旋转方向顺着轴的正方向看顺时针旋转负角度逆时针正角度

<head>

<style>

margin:0;

padding:0;

}

.box{

width:560px;

height:300px;

margin:100px auto 0;

border:1px solid #ccc;

position:relative;

}

.box .imageBox{

list-style:none;

width:100%

height:100%

overflow:hidden;

transform-style:preserve-3d;

}

.box .imageBox li{

width:112px;

height:100%

float:left;

position:relative;

//视距呈现近大远小 perspective:500px;

transition:all 1s;

}

.box .imageBox li span{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

}

//拼接立体容器

//1、立体容器旋转中心要在电脑平面上

//2、立体容器每一个面的图片正面朝外

.box .imageBox li span:nth-child(1){

transform:translateZ(150px);

background-image:url("images/1.jpg");

}

.box .imageBox li span:nth-child(2){

//旋转过后轴也会旋转

transform:rotateX(90deg) translateZ(150px);

background-image:url("images/2.jpg");

}

.box .imageBox li span:nth-child(3){

transform:rotateX(180deg) translateZ(150px);

background-image:url("images/3.jpg");

}

.box .imageBox li span:nth-child(4){

transform:rotateX(270deg) translateZ(150px);

background-image:url("images/4.jpg");

}

//拼接背景

.box .imageBox li:nth-child(1) apan{

background-position: 0 0;

}

.box .imageBox li:nth-child(2) span{

background-position:-112px 0;

}

.box .imageBox li:nth-child(3) span{

background-position:-224px 0;

}

.box .imageBox li:nth-child(4) span{

background-position:-336px 0;

}

.box .imageBox li:nth-child(5) span{

background-position:-448px 0;

}

.box .left,

.box .right

{

poaition:absolute;

width:50px;

height:70px;

background:rgba(0,0,0,.2);

top:115px;

text-align:center;

line-height:70px;

font-size:20px;

color:#fff;

text-decoration:none;

font-weight:bold;

}

.box .right{

right:0;

}

</style>

</head>

<body>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

<body>

index.js

$(function(){

/*1、点击切换图片*/

/*定义一个索引*/

/*第2张图-90deg 第4张图90deg*/

var index=0;

/*开关*/

var flag=true;

/*2、点击左边按钮上一张*/

$('.left').on('click',function(){

if(!flag) return false;

flag=false;

index--;

var angle=-index*90;

$('li').css('transform,''rotateX('+angle+'deg)').each(function(){

/*设置不同延时*/

$(this).css('transition-delay',i*0.25+'s');

});

/*3、点击右边按钮下一张*/

$('.right').on('click',function(){

if(!flag) return false;

flag=false;

index++;

var angle=-index*90;

$('li').css('transform,''rotateX('+angle+'deg)').each(function(){

$(this).css('transition-delay',i*0.25+'s');

});

/*4、优化重复点击动画会层叠执行*/

$('li:last').on('transitionend',function(){

/*最后一张图片部分旋转完毕*/

flag=true;

});

</script>

5、dom扩展

（1）类操作

var dom=document.querySelector('标签');

jquery：addClass()添加 removeClass()移除 toggleClass()切换 hasClass()判断是否选中

h5：add()添加 remove()移除 toggle()切换 contains()判断是否选中

获取类：dom.classList

操作类：dom.classList.add();

（2）自定义属性

jquery获取方式：获取所有 $('标签').data();

获取单个自定义属性 $('标签'').data('自定义属性')

设置单个属性$('标签').data('自定义属性','自定义属性名称');

h5：var set=div.dataset;

var user=set.自定义属性获取

set.自定义属性=['自定义属性名称']; 设置

（3）jquery：data()操作内存 h5：dataset()操作数据

LBunny_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5c3 day2

1、边框图片：在内容变化的容器可以使用，边框自动填充border-image:图片资源切割的尺寸（切割位置距离对应的边的距离），默认单位px，不能使用小数/ 边框宽度平铺方式;border-image:url() 167/20px round;border-image-source:url();border-image-slice:167 167 167 167...
复制链接

扫一扫

h5c3 day2

“相关推荐”对你有帮助么？