- 博客(79)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 HTML5 页面跳转和参数传递
页面跳转：方法一:<script language="javascript"> window.location = "http://www.baidu.com";</script>方法二:<script language="javascript"> document.location = "http://www.baidu.com";
2018-06-28 15:16:06
1045
转载 详解 清除浮动 的多种方式（clearfix）
本文适合知道HTML 与 CSS基础知识的读者，或者想要了解清除浮动背后原理的读者！1.什么是浮动首先我们需要知道定位 元素在页面中的位置就是定位，解决问题之前我们先来了解下几种定位方式 1、普通流定位 static（默认方式） 普通流定位，又称为文档流定位，是页面元素的默认定位方式 页面中的块级元素：按照从上到下的方式逐个排列 页面中的行内元素：按照从左到右的方式逐个排列 但是如何让多个块级元素...
2018-03-23 14:12:29
334
原创 关于target的运用
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>结构性伪类选择器—target</title><style type="text/css"> #brand:target p { background: o
2018-03-20 17:33:06
480
原创 阴影效果
<!DOCTYPE html><html><head><meta charset=utf-8 /><title>before、after</title><style>.box h3{ text-align:center; position:relative; top:80px;}.box { width:7
2018-03-20 16:46:32
280
原创 单选框样式
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>属性选择器</title><link href="style.css" rel="stylesheet" type="text/css"
2018-03-20 16:14:50
373
转载 word-wrap:break-word;与word-break:break-all
你真的了解word-wrap和word-break的区别吗？这两个东西是什么，我相信至今还有很多人搞不清，只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句，又或者是因为这两个东西实在是太拗口了，长得又差不多，导致连背都很难背下来。那它们到底是什么呢？我在mozilla的官网上找到如下的解释：word-wrapword-br...
2018-03-20 11:06:44
2434
原创 拖拽demo
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>拖拽</title><style>*{ padding: 0; margin: 0;}.groove{ width:67.8%; hei
2018-03-14 17:53:34
216
转载 js断点调试
1.断点调试是啥？难不难？断点调试其实并不是多么复杂的一件事，简单的理解无外呼就是打开浏览器，打开sources找到js文件，在行号上点一下罢了。操作起来似乎很简单，其实很多人纠结的是，是在哪里打断点？（我们先看一个断点截图，以chrome浏览器的断点为例）步骤记住没？用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开
2017-11-22 11:15:39
423
转载 Flex 布局教程
Flex 布局教程：语法篇作者： 阮一峰日期： 2015年7月10日网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年
2017-10-25 14:57:53
265
转载 html-javascript前端页面刷新重载的方法汇总
一、javascript页面刷新重载的方法： href="javascript:location.reload();">点击重新载入页面 href="javascript:history.go(0);">点击重新载入页面 href="javascript:location=location;">点击重新载入页面 href="javascript:location=location.hre
2017-10-17 17:18:38
802
转载 垂直居中的几种方式
页面中垂直居中的几种方法：1. 通过使用absolute定位来实现垂直居中在需要垂直居中的元素的长宽已知的情况下可以使用此方法。HTML: div class="bg"> div class="center-div"> ""/> div> div>12345CSS： style typ
2017-09-22 12:45:41
1514
转载 base64图片文件上传实例
jquery 图片base64 $("#testPhone").click(function () { $("#testFile").click(); });
2017-09-21 10:48:48
631
转载 图片文件上传(blob)
Document //下面用于图片上传预览功能 function setImagePreview(avalue) { //input var docObj = document.getElementById("doc"); //img
2017-09-21 09:50:15
2625
转载 URL.createObjectURL和URL.revokeObjectURL
一.URL.createObjectURL URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象. 语法: objectURL = URL.createObjectURL(blob || file);
2017-09-19 10:16:14
502
转载 前端的存储方式有：localStorage、sessionStorage、cookie、UserData、webSQL、indexeddb、HTML5离线存储等
1、本地存储1.cookie在h5之前，存储主要用的是cookie。cookie会随着每次http请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同而不同，IE6大约只能存储2K。1）cookie的存取方法1.存:赋值（键值对）document.cookie = "键=值"; //一次只能存一个键值对2.取：
2017-09-13 13:23:32
1992
转载 各类Http请求状态(status)及其含义详细解析
Web服务器响应浏览器或其他客户程序的请求时，其应答一般由以下几个部分组成：一个状态行，几个应答头，一个空行，内容文档。下面是一个最简单的应答 ：状态行包含HTTP版本、状态代码、与状态代码对应的简短说明信息。在大多数情况下，除了Content-Type之外的所有应答头都是可选的。但Content-Type是必需的，它描述的是后面文档的MIME类型。虽然大多数应答
2017-09-13 09:42:35
3567
转载 jquery ajax jsonp跨域调⽤实例代码
jquery ajax jsonp跨域调⽤实例代码什么是跨域？简单的来说，出于安全⽅⾯的考虑，页⾯中的JavaScript⽆法访问其他服务器上的数据，即“同源策略”。⽽跨域就是通过某些⼿段来绕过同源策略限制，实现不同服务器之间通信的效果。具体策略限制情况可看下表：URL 说明 允许通信http://www.a.com/a.jshttp://www.a.com/b.j
2017-09-06 15:39:20
621
转载 ajax jsonp 跨域请求访问实例
何为跨域，浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。跨域请求在很多地方用到，但是浏览器常常是阻止访问，为了解决这个问题，查询一些资料，实现了其功能。采用如下方法，ajax jsonp请求：客户端 javascript：function requestMethed() var the
2017-09-06 15:10:52
290
转载 FileReader除了有函数readAsDataURL，另外还有另外两个函数readAsBinaryString 和 readAsText，分别可以将选择的文件读取成二进制和文本格式
Document //判断浏览器是否支持FileReader接口 if (typeof FileReader == 'undefined') { document.getElementById("xmTanContentDiv").InnerHTML = "当前浏览器不支持FileRead
2017-09-06 10:48:56
2948
转载 图片下载功能
Document 点此下载 //图片转成base64位字符串数据 // var imgData = "data:image/png;base64,........."; //或直接设置图片链接： var imgDat
2017-09-06 10:46:15
375
原创 选择select框下option的值
Document --请选择-- this is content zero; this is content one; this is content two; this is content three;
2017-09-04 11:17:13
594
原创 js 全选，取消全选，反选
function selectAll(){ var checklist = document.getElementsByName("selected"); if(document.getElementById("controlAll").checked) { for(var i=0;i { checklist[i].checked = 1;
2017-09-04 10:45:59
310
转载 从右到左文字动画效果
从右到左文字动画效果* {margin: 0;padding: 0;}body {background: black;font: normal 14px/1.5 "Arial","Lucida Grande",Verdana,"Microsoft YaHei","hei";}.font-move {height: 77px;overf
2017-09-04 09:45:12
1362
原创 js 获取行间样式
获取行间样式 #div1{width:200px;height:200px;background:red;margin:20px;} function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{
2017-08-31 18:41:36
459
转载 移除input 中选中的样式
jquery type=radio 更改属性checked 选中 移除 选1. $("#id").attr("checked","checked"); $("#id").removeAttr("checked"); 注： $('input:radio').prop("checked",''); // 移除input type='radio' 选
2017-08-30 17:55:02
1700
原创 无缝滚动效果
无缝滚动效果*{margin:0px;padding:0px;}.clear{clear:both;}#div1{width:880px;height:140px;margin:100px auto;position:relative;overflow: hidden;}#div1 ul{position:absolute;top:0;left:0px;border:1px s
2017-08-29 17:31:12
378
转载 jQ ajax的使用
AJAX是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新[百度百科] ** XMLHttpRequest对象XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。常用属性：
2017-08-28 16:37:49
382
转载 seriailzeArray() form表单序列化
Document (function($){ $.fn.serializeJson=function(){ var serializeObj={}; $(this.serializeArray()).each(function(){ serializeObj[this.na
2017-08-28 13:10:24
358
转载 css3 文字动画效果
CSS3 Animation文字动画特效 - 站长素材@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');* { margin: 0; padding: 0;}body { f
2017-08-22 17:26:45
1161
转载 文字滚动切换效果
从右到左文字动画效果* {margin: 0;padding: 0;}body {background: black;font: normal 14px/1.5 "Arial","Lucida Grande",Verdana,"Microsoft YaHei","hei";}.font-move {height: 77px;overf
2017-08-22 16:25:49
463
转载 jquery制作滚动到指定位置触发动画
利用jquery制作滚动到指定位置触发动画 *{ margin:0px; padding:0px;} .gs{ position:relative; top:100px; background-color:#099; left:150px; width:80px; } .xz{ animation:roate 2s;
2017-08-22 16:21:42
814
原创 同一个页面多个视频，同时有且只能播放一视频
Document 您的浏览器暂不支持播放该视频，请升级至最新版浏览器。 您的浏览器暂不支持播放该视频，请升级至最新版浏览器。
2017-08-17 11:51:34
10321
1
转载 取数组中相同的值
//比较两个数组。。把相同的元素取出来 var arr1 = ["i", "b", "c", "d", "e", "f","x"]; //数组A var arr2 = ["a", "b", "c", "d", "e", "f", "g"];//数组B var temp = []; //临时数组1 var temparray = [];//临时数组2 f
2017-08-16 15:48:29
2412
转载 jq简单轮播效果
Document.banner{ height:365px; overflow:hidden;}/*.banner ul{ float:left; position:relative; left:50%; margin-left:-960px;}*/.banner ul li{ float:left;}
2017-08-16 15:41:29
245
转载 js 动态添加多个class
setAttribute('class', 'abc') .ddddd { background: black; } .abc { background: red; } test div var div = document.getElementById('d1'); // div.setAttribute("class", "ab
2017-08-16 13:50:04
4405
转载 事件冒泡
在dom中事件是冒泡的形式到document对象上的，而srcElement一直指向的是当时发生事件的元素，只要一直选择这个元素的父亲元素，就可以匹配到你想要的元素了Document click me (#test1) click me (#test2)
2017-08-11 11:30:04
205
转载 jQuery收缩展开效果
jQuery实现DIV层的收缩展开效果-纵向 .panel{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;display:none;}.flip{margin:0px;padding:5px;text-align:center;b
2017-08-11 10:18:38
754
转载 h5新标签video详解
HTML5播放器细谈，从大众自带浏览器 到 wechat和QQ以x5内核的浏览器，以及UC其他特殊的浏览器在此不再细谈：）当然也会分析iphone iOS系统和Android手机系统的差别。【基本属性】video标签属性：src ：视频的属性，url地址poster：视频封面，没有播放时显示的图片preload：预加载|none|metadata（部分预加载）|auto
2017-08-08 16:48:04
962
jq 双日历时间选择控件
2017-03-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人