边框图片
属性
-
属性名称：
border-image -
组合写法：
border-image: url("images/border01.jpg") 167/20px stretch -
拆分写法：
-
border-image-source: url("images/border01.jpg");图片地址 -
border-image-slice: 167;裁剪尺寸 -
border-image-width: 20px边框宽度 -
border-image-repeat: repeat;平铺方式 默认stretchroundrepeat
-
原理
设置的图片将会被“切割”成九宫格形式，然后进行设置。如下图
“切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，
其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺。如下图
1、round和repeat之间的区别
round 会自动调整尺寸，完整显示边框图片。
repeat 单纯平铺多余部分，会被“裁切”而不能完整显示。
2、更改裁切尺寸
border-image-slice: 34 36 27 27 分别设置裁切如下图
360浏览器
fullpage插件
-
基于 jQuery 的插件，它能够帮你很方便、很轻松的制作出全屏网站。
-
支持鼠标滚动，支持前进后退和键盘控制，多个回调函数，支持手机、平板触摸事件，支持 CSS3 动画，支持窗口缩放，窗口缩放时自动调整，可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等。
-
使用步骤：
-
引用文件
<link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery.fullPage.js"></script> html结构 <div id="fullpage"> <div class="section">第一屏</div> <div class="section">第二屏</div> <div class="section"> <div class="slide">第三屏的第一屏</div> <div class="slide">第三屏的第二屏</div> <div class="slide">第三屏的第三屏</div> <div class="slide">第三屏的第四屏</div> </div> <div class="section">第四屏</div> </div> js初始化 $(function(){ $('#fullpage').fullpage(); });
-
-
参考文档
-
配置
选项 类型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 slidesColor 数组 无 设置背景颜色 sectionsColor 数组 无 设置背景颜色 anchors 数组 无 定义锚链接 scrollingSpeed 整数 700 滚动速度，单位为毫秒 easing 字符串 easeInQuart 滚动动画方式 menu 布尔值 false 绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动 navigation 布尔值 false 是否显示项目导航 navigationPosition 字符串 right 项目导航的位置，可选 left 或 right navigationColor 字符串 #000 项目导航的颜色 navigationTooltips 数组 空 项目导航的 tip slidesNavigation 布尔值 false 是否显示左右滑块的项目导航 slidesNavPosition 字符串 bottom 左右滑块的项目导航的位置，可选 top 或 bottom controlArrowColor 字符串 #fff 左右滑块的箭头的背景颜色 loopBottom 布尔值 false 滚动到最底部后是否滚回顶部 loopTop 布尔值 false 滚动到最顶部后是否滚底部 loopHorizontal 布尔值 true 左右滑块是否循环滑动 autoScrolling 布尔值 true 是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条 scrollOverflow 布尔值 false 内容超过满屏后是否显示滚动条 css3 布尔值 false 是否使用 CSS3 transforms 滚动 paddingTop 字符串 0 与顶部的距离 paddingBottom 字符串 0 与底部距离 fixedElements 字符串 无 normalScrollElements 无 keyboardScrolling 布尔值 true 是否使用键盘方向键导航 touchSensitivity 整数 5 continuousVertical 布尔值 false 是否循环滚动，与 loopTop 及 loopBottom 不兼容 animateAnchor 布尔值 true normalScrollElementTouchThreshold 整数 5 - -
方法
回调函数名称 说明 moveSectionUp() 向上滚动 moveSectionDown() 向下滚动 moveTo(section, slide) 滚动到 moveSlideRight() slide 向右滚动 moveSlideLeft() slide 向左滚动 setAutoScrolling() 设置页面滚动方式，设置为 true 时自动滚动 setAllowScrolling() 添加或删除鼠标滚轮/触控板控制 setKeyboardScrolling() 添加或删除键盘方向键控制 setScrollingSpeed() 定义以毫秒为单位的滚动速度 -
-
名称 说明 afterLoad 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算 onLeave 滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down。 afterRender 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数 afterSlideLoad 滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数 onSlideLeave 某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数 -
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>360浏览器</title> <link rel="stylesheet" href="fullpage/jquery.fullpage.min.css"> <link rel="stylesheet" href="css/index.css"> </head> <body> <!--结构按fullpage插件要求--> <!--注意：section类名必须加--> <div class="container"> <!--第一屏--> <section class="section"> <!--logo--> <div class="logo"><img src="images/logo.png" alt=""></div> <!--文字--> <div class="text"> <img src="images/text_1.png" alt=""> <img src="images/text_2.png" alt=""> <img src="images/text_3.png" alt=""> <img src="images/text_4.png" alt=""> <img src="images/text_5.png" alt=""> <img src="images/text_6.png" alt=""> <img src="images/text_7.png" alt=""> <img src="images/text_8.png" alt=""> </div> <!--说明--> <div class="info"><img src="images/info_1.png" alt=""></div> </section> <!--第二屏--> <section class="section"> <!--盾牌--> <div class="shield"> <img src="images/shield_1.png" alt=""> <img src="images/shield_2.png" alt=""> <img src="images/shield_3.png" alt=""> <img src="images/shield_4.png" alt=""> <img src="images/shield_5.png" alt=""> <img src="images/shield_6.png" alt=""> <img src="images/shield_7.png" alt=""> <img src="images/shield_8.png" alt=""> <img src="images/shield_9.png" alt=""> </div> <!--说明--> <div class="info"><img src="images/info_2.png" alt=""></div> </section> <!--第三屏--> <section class="section"> <!--说明--> <div class="info"><img src="images/info_3.png" alt=""></div> <!--圆--> <div class="circle"> <!--圆图片--> <img src="images/circle.png" alt=""> <!--火箭图片--> <div class="rocket"><img src="images/rocket.png" alt=""></div> </div> </section> <!--第四屏--> <section class="section"> <!--搜索区域--> <div class="search"> <!--搜索框--> <div class="input"><img src="images/search.png" alt=""></div> <!--关键字--> <div class="key"><img src="images/key.png" alt=""></div> <!--搜索结果--> <div class="result"><img src="images/result.png" alt=""></div> </div> <!--说明--> <div class="info"><img src="images/info_4.png" alt=""></div> </section> <!--第五屏--> <section class="section"> <!--说明--> <div class="info"><img src="images/info_5.png" alt=""></div> <!--浏览器--> <div class="browser"> <!--4边--> <div class="line_top"></div> <div class="line_right"></div> <div class="line_bottom"></div> <div class="line_left"></div> <!--分割线--> <div class="line_middle"></div> <!--工具栏--> <div class="toolbar"><img src="images/toolbar.png" alt=""></div> <!--工具栏边框--> <div class="box"></div> <!--其他--> <div class="extra"><img src="images/extra.png" alt=""></div> </div> </section> </div> <!--基于jquery--> <script src="js/jquery.min.js"></script> <!--fullpage js--> <script src="fullpage/jquery.fullpage.min.js"></script> <script> /* * 1.进入页面的时候 页面完全显示 * 2.fullpage提供了加载完成回调函数 * 3.参考fullpage的参数 配置功能 * */ $(function () { $('.container').fullpage({ /*sectionsColor 配置每一屏的颜色*/ sectionsColor:['#0DA5D6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'], /*不垂直居中*/ verticalCentered:false, /*页面完全显示回调函数*/ afterLoad:function (link,index) { /*每个页面要执行的动画不一样*/ /*根据index来区分 序号*/ /*通过类名来控制（属性）要执行的动画*/ /*动画能执行本质 状态发生改变*/ $('.section').removeClass('now').eq(index-1).addClass('now'); } }); }) </script> </body> </html>HTML提升
语义标签
常见语义标签
-
header 头部
-
nav 导航
-
article 主体内容
-
aside 侧边栏
-
section 片段 区块
-
footer 底部
-
语义化标签兼容
-
语义化标签在IE9以下不支持
-
使用html5shiv插件可以解决，使用方式如下
-
<!-- 条件注释 lt gt lte gte 9 指的是版本 --> <!--[if lt IE 9 ]> <script src="html5shiv.min.js"></script> <![endif]-->表单类型
常用类型
-
search
-
email
-
url
-
number
-
date
-
在移动端区别：
测试
更多表单类型请扫码测试：
表单属性
常用表单属性
-
form
-
autocomplete 设置整个表单是否开启自动完成 on|off
-
novalidate 设置H5的表单校验是否工作 true 不工作 不加该属性代表校验
-
-
input:
-
autocomplete 单独设置每个文本框的自动完成
-
autofocus 设置当前文本域页面加载完了过后自动得到焦点
-
placeholder 文本框占位符
-
required 限制当前input为必须的
-
form 属性是让表单外的表单元素也可以跟随表单一起提交
-
-
JAVASCRIPT提升
DOM扩展
获取元素
document.getElementsByClassName ('class'); //通过类名获取元素，以伪数组形式存在。 document.querySelector('selector'); //通过CSS选择器获取元素，符合匹配条件的第1个元素。 document.querySelectorAll('selector'); //通过CSS选择器获取元素，以伪数组形式存在。类名操作
Node.classList.add('class'); //添加class Node.classList.remove('class'); //移除class Node.classList.toggle('class'); //切换class，有则移除，无则添加 Node.classList.contains('class'); //检测是否存在class自定义属性
在HTML5中我们可以自定义属性，其格式如下data-*=""
<div id="demo" data-my-name="itcast" data-age="10"> <script> /* Node.dataset是以对象形式存在的，当我们为同一个DOM节点指定了多个自定义属性时， Node.dataset则存储了所有的自定义属性的值。 */ var demo = document.querySelector(反馈); //获取 //注：当我们如下格式设置时，则需要以驼峰格式才能正确获取 var name = demo.dataset['myName']; var age = demo.dataset['age']; //设置 demo.dataset['name'] = 'web developer'; <script/>综合案例TAB栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab-切换（选项卡）</title> <style> .tab { width: 400px; height: 400px; border: 1px solid #ccc; } .tab ul { list-style: none; margin: 0; padding: 0; height: 50px; } .tab ul li { float: left; width: 100px; height: 50px; line-height: 50px; text-align: center; background: green; color: #fff; font-size: 16px; cursor: pointer; } .tab ul li.now { background: red; } .tab > div { padding: 10px; display: none; } .tab > div.active { display: block; } </style> </head> <body> <div class="tab"> <ul> <li data-id="hot" class="now">热点新闻</li> <li data-id="follow">关注新闻</li> <li data-id="china">国内新闻</li> <li data-id="nba">NBA新闻</li> </ul> <div id="follow"> 关注新闻关注新闻关注新闻关注新闻关注新闻关注新闻 关注新闻关注新闻关注新闻关注新闻关注新闻关注新闻 关注新闻关注新闻关注新闻关注新闻关注新闻关注新闻 </div> <div id="hot" class="active"> 热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻 热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻 </div> <div id="china"> 国内新闻国内新闻国内新闻国内新闻国内新闻 国内新闻国内新闻国内新闻国内新闻国内新闻 </div> <div id="nba"> NBA新闻NBA新闻NBA新闻NBA新闻NBA新闻 NBA新闻NBA新闻NBA新闻NBA新闻NBA新闻 </div> </div> <script> window.onload = function (ev) { /*1. 点击菜单 更换当前样式*/ /*2. 点击菜单 更换当前显示的内容*/ document.querySelector('ul').onclick = function (e) { /*事件触发源*/ var currentLi = e.target; console.log(e.target.tagName); if(e.target.tagName == 'LI'){ /*判断是否已经是选中的 如果是执行停止*/ if(currentLi.classList.contains('now')) return; /*去掉之前的 给当前的加上 now*/ var oldLi = document.querySelector('li.now'); oldLi.classList.remove('now'); currentLi.classList.add('now'); /*隐藏之前显示的内容*/ var oldContentId = oldLi.dataset.id; document.querySelector('#'+oldContentId).classList.remove('active'); /*显示的当前的内容*/ var currentContentId = currentLi.dataset.id; document.querySelector('#'+currentContentId).classList.add('active'); } } } </script> </body> </html>总结
-
能够使用过渡转换动画实现宣传页一类型的需求。
-
在使用HTML5语义标签，表单类型，表单属性的时候，遇见新的不要太惊讶，因为它可能做了更新。
-
HTML5新增API，提高在应用开发过程中的效率
-
扩展内容
拖拽上传
拖拽事件
-
拖拽元素
-
ondrag 应用于拖拽元素，整个拖拽过程都会调用
-
ondragstart应用于拖拽元素，当拖拽开始时调用
-
ondragleave应用于拖拽元素，当鼠标离开拖拽元素时调用
-
ondragend应用于拖拽元素，当拖拽结束时调用
-
-
目标元素
-
ondragenter应用于目标元素，当拖拽元素进入时调用
-
ondragover应用于目标元素，当停留在目标元素上时调用
-
ondrop应用于目标元素，当在目标元素上松开鼠标时调用
-
ondragleave应用于目标元素，当鼠标离开目标元素时调用
-
-
上传代码
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 200px; height: 200px; border: 1px dashed #ccc; line-height: 200px; text-align: center; color: #ccc; } </style> </head> <body> <div class="box">拖放图片到该区域</div> <script> var box = document.querySelector('.box'); box.addEventListener('dragenter', function (e) { /*禁用浏览器默认预览文件或下载文件操作*/ e.preventDefault(); }); box.addEventListener('dragover', function (e) { /*禁用浏览器默认预览文件或下载文件操作*/ e.preventDefault(); }); box.addEventListener('drop', function (e) { e.preventDefault(); /*第一个文件数据*/ var file = e.dataTransfer.files[0]; //console.log(file); /*把数据设置到表单数据中*/ var formData = new FormData(); formData.append('dragImage', file); /*通过ajax异步提交*/ var xhr = new XMLHttpRequest(); xhr.open('post','upload.php'); xhr.send(formData); xhr.onreadystatechange = function () { if(xhr.readyState == 4 && xhr.status == 200){ /*上传成功*/ console.log('ok'); var img = new Image(); img.src = xhr.responseText; document.querySelector('body').appendChild(img); } } }); </script> </body> </html>
"我是Spirit_Breeze,中文<晟世清风>,在这纷纷乱世之中,祈望能有一股清流之风."本人从事销售,不甘心于口舌之利,突然对代码和框架充满兴趣,遂之研究研究,欢迎研究讨论,转载请备注地址和作者,谢谢
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
