HTML
关注
分享
扫一扫
记录html应用及问题
小溪彼岸
万里长征，日进一步 , 好记性不如烂笔头
展开
-
HTML简单广告轮播器
1、首先建立一个images 文件夹存放图片； 2、建立一个js文件夹存放jquery.js代码； 3、建一个html页， 代码如下：<?xml version="1.0" encoding="gb2312"?><html><head> <title>第一个网页</title> <meta charset="gb123"/> <!--设置编码--> <style type="t原创 2015-08-29 11:10:11 · 3049 阅读 · 0 评论 -
html 切换状态分栏
一个自己的分栏工具，可以快速创建分栏效果。 HTML：<div class="g-header"> <!-- 导航栏 --> <div class="g-nav"> <div class="g-wrap"> <ul class="g-nav-list"> <li ><span id="doing">分栏一</s原创 2016-08-13 15:50:23 · 4760 阅读 · 0 评论 -
html 自定义弹框效果
页面系统弹框往往不能满足我们的需求，多数需要自定义弹框。写了几个自定义弹框样式。 alertView.js/** * Created by rayootech on 16/8/12. */var containHtml;/** * 带输入框的弹框 */<!--自定义提示标题,内容,单个按钮事件-->$.fn.showInputAlert = function(callback){原创 2016-08-13 16:08:42 · 8432 阅读 · 0 评论 -
querySelector的用法
在js中可以通过标签选择器获取标签，现在发现还有querySelector可以实现选择器的功能。js的用法：<label>hhh22</label><label id="la">hhh</label><script> alert(document.getElementById('la').innerHTML);</script>querySelector的用法：<label>hhh22<原创 2016-08-14 16:08:51 · 8273 阅读 · 0 评论 -
canvas绘图（一）
canvas绘制矩形1： <canvas width="500" height="300">您的浏览器不支持canvas</canvas> <script> //获取标签 var cas = document.querySelector('canvas'); //获取绘制环境 var ctx = cas.getContext('原创 2016-08-14 23:34:13 · 518 阅读 · 0 评论 -
html delegate、live方法
delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。 使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。语法规则：$(selector).delegate(childSelector,event,data,function)参数： 参数 描述 childSelector原创 2016-08-15 11:10:05 · 812 阅读 · 0 评论 -
html子页面调用父页面的方法
不做过多的介绍了，直接看代码吧。 父页面：<!DOCTYPE html><html><head> <title>parents</title> <meta charset="UTF-8"></head><body><script language="javascript" type="text/javascript"> function sayhello() {原创 2016-09-26 15:41:19 · 28889 阅读 · 1 评论 -
html 无提示关闭窗口
无提示关闭窗口代码如下： closeWindow.html<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, min原创 2016-10-15 10:24:08 · 1182 阅读 · 0 评论 -
html 子父视图方法互调
父页面： father.html<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximu原创 2016-10-15 13:13:29 · 757 阅读 · 0 评论 -
html 改变placeholder颜色
代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {/*原创 2016-10-15 13:15:55 · 2245 阅读 · 0 评论 -
html 绘制太极
太极的绘制主要需要用到5个圆，具体代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .bigCircle{ width: 200px; height: 200px;原创 2016-10-15 14:16:02 · 12283 阅读 · 5 评论 -
webstorm zencoding
webstorm中提供了一些zencoding快捷编码提示，只要输入左边缩写，按下tab键就可以快速生成html代码。一些常用的快捷提示：快捷提示1：html:5 //html5结构按下Tab键回会生成以下代码：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</ti原创 2016-10-08 10:34:53 · 1868 阅读 · 0 评论 -
html 选择列表
带有勾选按钮的多选列表<span class="cbox" onclick="this.className=/checked/ig.test(this.className)?this.className.replace('checked',''):(this.className+' checked')"></span>当点击时替换className达到切换的母的。具体代码如下：<!DOCTYPE h原创 2016-11-12 11:40:08 · 2621 阅读 · 0 评论 -
html fixed导航条
页面中基本上都会用到导航条，下面是一个简单的导航效果。 html:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-sca原创 2016-08-13 15:24:40 · 992 阅读 · 0 评论 -
Zepto API学习（2）
Zepto最新扩展方法：1、.toString(obj)⇒string转化为字符串2、.toString(obj) ⇒ string 转化为字符串 2、.slice(start,end) 截取字符串 3、$.later 延迟执行fnfn: 将要延时执行的方法when: 可选(默认 0) 什么时间后执行periodic: 可选(默认 false) 设定是否是周期性的执行context:原创 2016-09-04 12:42:18 · 718 阅读 · 0 评论 -
ECharts学习-柱状图
按照官方文档写了一个柱状图的例子。第一种方式使用网络js:主要代码如下：<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="height:400px"></div><!-- ECharts单文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts-al原创 2016-05-24 13:21:31 · 5616 阅读 · 1 评论 -
对ECHarts柱状图的初步封装
在研究ECHarts时，总感觉局限性太大，只能在html页面使用ECHarts，而且创建过程也比较复杂。就尝试着对ECHarts进行初步封装，以便可以快速创建一个图标视图，将过程进行简单记录。 主要代码如下： html页面代码：<!DOCTYPE html><html><head lang="en"> <meta charset="utf-8"> <title>ECharts原创 2016-05-24 18:13:33 · 2135 阅读 · 0 评论 -
ECharts学习-折线图
绘制折线图的主要代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="utf-8"> <title>ECharts</title></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="height:400px;width: 600原创 2016-05-25 15:09:31 · 23994 阅读 · 2 评论 -
伸缩两级菜单
做界面有时需要使用到伸缩的两级菜单，下面有两种写伸缩菜单的方法。 第一种方法：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, ma原创 2016-07-28 13:24:56 · 1019 阅读 · 0 评论 -
html meta收集
在html中meta包含很多信息，在移动端适配中也起到相当的作用，收集一些已做不时之需。<!-- 移动端的meta --><!-- 适应移动端start --><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /><!-- 是否启用 WebApp 全屏模式 --><met原创 2016-08-16 14:25:52 · 412 阅读 · 0 评论 -
使用Swiper实现无线滚动效果
swiper地址：http://idangero.us/swiper/api/#.V5B6wJN969s在HTML body加入以下内容：<div class="m-detail-show"> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide原创 2016-07-21 16:59:54 · 8854 阅读 · 0 评论 -
你所不知的 CSS ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面，里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外，就是接下来要介绍的这两个伪元素了。 Creative Button Styles 一 基本语法转载 2016-08-17 11:03:12 · 1012 阅读 · 0 评论 -
html简单下拉菜单
菜单的功能多种多样，这里提供给一个简单的下拉菜单的参考。 具体代码如下： html:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> .dropbtn{ background-c原创 2016-08-28 17:06:29 · 15229 阅读 · 0 评论 -
html简单的跑马灯效果
很多项目中都会遇到有类似跑马灯效果的消息轮播展示，做了一个简单的消息轮播展示。 主要代码如下： html<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>跑马灯效果</title> <meta name="viewport" content="initial-scale=1.0, m原创 2016-08-07 01:27:41 · 24752 阅读 · 1 评论 -
html自己动手写无限轮播效果
使用到无限轮播图的方式有很多，也有一些比较好的第三方如swiper等，先看一个自己动手写的无限轮播例子。html<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maxi原创 2016-08-07 01:41:31 · 8002 阅读 · 1 评论 -
window.onresize监听div和屏幕的改变
监听屏幕的改变：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=原创 2016-08-12 11:32:26 · 33780 阅读 · 2 评论 -
zepto API学习（1）
看到别人说zepto和jQuery很像，那么zepto究竟有什么优势呢？比较： 1、大小方面 , 压缩后的 zepto.min.js 大小只有21K, 使用服务器端 gzip 压缩后大小只有5~10K, 可以说非常的小, 但是功能很齐全, 多出来了一些触摸屏的事件 , 它唯一不支持的就是万恶的IE, 不过用它来开发iPhone和Android网页绝对是首选了. 2、jquery主要是用原创 2016-09-04 10:06:03 · 2338 阅读 · 0 评论 -
js 移除指定元素
//需移除的元素 var removeItem = $(this).attr("id"); selectedShop = $.grep(selectedShop, function(value) { return value != removeItem; });原创 2016-11-14 14:13:14 · 2213 阅读 · 0 评论