hiuman
- 浏览: 52145 次
- 性别:
- 来自: 广州
-
文章列表
我的博客已经搬到https://www.cnblogs.com/hiuman/
常见的菜单栏+内容界面。欢迎指点。
效果图：
可以戳这里看效果https://littlehiuman.github.io/menuAndContent/index.html，
= = = = = = = = = 2017/3/10 = = = = = = = = =
改进了：菜单栏的样式，菜单栏自动更新宽度、响应window窗口大小，菜单栏内元素超出长度隐藏，……
效果图：
可以戳这里看效果（刚打开闪一下是因为在更改菜单栏的宽度）https://littlehiuman.github.io/menuAndContent/index2.html，
源码：https://git ...
根据的是百度提供的坐标，canvas的坐标是大的坐标在后面，所以跟实际生活方向相反。
所以canvas里的北方在下方，实际生活中北方在上方。
因为根据的是真实坐标，所以跟广州地铁提供的地图不一样。
左侧地图一种写法，右侧地图另一种写法。
左侧可以下拉菜单选择线路查看路线，还可以查询站名属于哪个路线；右侧是全地图。
暂时没有其他功能……欢迎指点。
看代码可以戳链接：https://github.com/littleHiuman/GZsubway-canvas
可以戳相册地址看高清图：http://hiuman.iteye.com/picture/136749
附上超级大图……：
前提：
1. 借助Node.js环境里的npm来安装，
2. 设置好npm镜像，
（比如淘宝的npm镜像：输入
引用npm install -g cnpm –registry=https://registry.npm.taobao.org
即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了 ），
==============或 者============
（配置指向源，通过 npm 命令指定下载源）
引用npm config set registry http://registry.cnpmjs.org
3. 安装完webpack。
引用npm install w ...
跟商城有关系的网站，难免会有购物车的结账界面。
我用javascript实现了增加数量/减少数量,实时计算总金额，删除该商品，选中商品/反选商品/全选/全反选...的操作。
欢迎指点！~
效果如图：（图片有点大，可以到这里看 http://hiuman.iteye.com/picture/136625）
用到的素材：加号 减号 商品图 删除图标 选中的图标和没选中的图标
代码：
<body onselectstart="return false;" style="-moz-user-select:none;">
<ta ...
上次写这个的时候的博客：http://hiuman.iteye.com/blog/2324929
上次是网上搜的，这次是自己写的。
无论多少个input都可以点击～但是只有一种内容（弹出的内容），可以修改，如果想要有多种内容需要改关联的弹出内容。
欢迎指点～
我导入的jquery是jQuery v1.9.1版本的。还加入了一个关闭的图片。
效果图：
（图片有点大。弹出的位置是正好正中间的。）
代码如下：
css：
input {
width: 100%;
height: 30px;
}
.fixed_bg {
position: fixed;
to ...
原理：
Math.ceil() //向上取整
Math.floor() //向下取整
Math.round() //四舍五入取整
第一种：得到的是整数
function percentNum(num, num2) {
return Math.ceil(num / num2 * 100) + '%';
}
alert(percentNum(2,3));
第二种：得到的是整十数
function percentNum(num, num2) {
return (Math.floor(num / num2 * 10))*10 +'%';
}
...
（涉及到swiper.min.js，swiper.min.css，记得导入这两个文件。）
两种样式：
1）标题 + 页数。
2）标题。
第一种：标题+页数。
<div class="swiper-container" id="swiper-container">
<div class="swiper-wrapper" >
<div class="swiper-slide" data-hash="slide2"><i ...
比较全的屏幕信息。
function getInfo()
{
var s = "";
s += " 网页可见区域宽：" +document.body.clientWidth +"<br/>";
s += " 网页可见区域高：" +document.body.clientHeight +"<br/>";
s += " 网页可见区域宽：" +document.body.offsetWidth +" (包括边线和滚动条的 ...
在百度上搜了很多方法去修改HTML5 progress的样式，然而并没有实现。
所以自己用div实现了一个。
简单粗暴(*＾-＾*) 可以在CSS里改样式，可以JS里改进度。
<div class="timepro">
<div class="timepro-go" style="width:10%"></div>
</div>
.timepro{
height:5px;
background:#ccc;
width:95%;
border-ra ...
欢迎指点！
效果图：
有两种办法实现：
原理一：多个html文件之间的跳转。（多个html文件）
原理二：显示隐藏。（一个html文件）
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
原理一：多个html文件之间的跳转。
CSS样式都是一样的：
body{
margin: 0;padding: 0;width: 100%;height: 100%;
}
ul{
margin: 0;
padding: 0;
padding-to ...
欢迎指点！
先放上效果图：
鼠标移入界面后：
图片有点大，展示不全，可以到我的相册里看完整图。http://hiuman.iteye.com/picture/136355
<body onselectstart="return false;" style="-moz-user-select:none;">
<div class="containner">
<span id="prev"><</span>
<span id=& ...
包括：
介绍。
基础入门。（兼容性。获取canvas上下文。绘制直线/描边，填充内容。绘制表格。）
canvas是基于状态的绘图。
绘制矩形。
绘制圆形。
绘制文本。
绘制图片。
阴影。
渐变。
绘制背景图。
变换。
介绍：
HTML5的新 ...
Less常用来写样式，比较多的用法是使用第三方软件编译成CSS文件，然后在HTML页面引入CSS文件。而不是直接在HTML页面里引入编译文件和Less文件。如此以来，在后期修改方便的多。当然，在写小项目的时候可能会觉得写CSS比写Less方便的多。写LESS更多的是后期的维护和修改，它可以实现改一个地方多处修改的好处。
它可以在Node.js中使用，也可以在浏览器端使用，也就是客户端使用。
@charset编码：
@charset "utf-8"
Less的注释：
可以使用css中的注释（/**/）也可以使用//注释，但是使用//不会被编译。
/*该注释会被编译*/
/ ...
包括：
Cookie概述（Cookie的存放，有效期和作用域）
Cookie操作（保存Cookie，读取Cookie，Cookie的生命周期）
Cookie工作原理（Cookie与会话跟踪，Cookie安全性）
Cookie概述：
Cookie是由服务器生成并存储在客户端文件系统（.txt格式 ...