HTML CSS
关注
分享
扫一扫
文章平均质量分 57
Orange_J
爱前端，爱编程
展开
-
一个javascript的Cookie读写删的通用代码
function writeCookie(name, value, days) { var expires = ""; if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toGMTS原创 2015-06-01 15:53:59 · 481 阅读 · 0 评论 -
二次贝塞尔曲线的实现（基于Canvas与JavaScript）
先上效果图：实现代码：二次贝塞尔曲线 body, h1{margin:0;} canvas{margin: 20px; } 二次贝塞尔曲线 /** * @param sx 起始点x坐标 * @param sy 起始点y坐标 * @param ex 结束点x坐标 * @param ey 结束点y坐标 *原创 2016-04-14 23:29:02 · 2716 阅读 · 0 评论 -
D3.js实现随机散点图（附带横纵坐标轴）
.axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } var w = 600; // svg宽度 va原创 2015-12-09 22:57:22 · 2910 阅读 · 2 评论 -
Canvas实现矩形随机铺满的动画效果
原作地址：http://codepen.io/svendsen/pen/eNjqar效果如下：本人将其源代码重写后并添加注释，直接复制保存为HTML即可看到效果。源码如下： body { text-align: center; background-color: #2c3e50; } ca原创 2015-10-15 15:39:00 · 1104 阅读 · 0 评论 -
CSS3实现的一批hover特效
本特效的原版是codepen上面的hover.css项目，个人很喜欢所以把所有的hover特效自己也写了一遍，上传文件麻烦所以直接把css整合到HTML代码中了，代码复制下来保存后即可用浏览器打开浏览。 Hover .container { margin: 0 auto; w原创 2015-08-10 09:19:37 · 4443 阅读 · 1 评论 -
HTML5的Canvas实现小圆点在屏幕内跑动
点击屏幕可以增加小圆点个数，效果如图：完整代码如下，复制到HTML文件，打开即可运行。 Hover --> /*@import url(http://fonts.googleapis.com/css?family=Right原创 2015-08-11 17:15:02 · 4621 阅读 · 0 评论 -
Sprites图+JavaScript制作动画效果
闲逛Codepen时发现了一个利用Sprites图做动画效果的示例，大为所动，遂cope其图，自己实现一下。整体思路很简单：加载大图之后，利用js不断改变background-position以实现动画效果。ps1：只简单实现了动画效果，没有对首次加载图片的延时做处理，如果没看到动画，刷新一下页面就可以了ps2：处理延时时采用的setTimeout，性能堪忧，待我找到更好的方式后再优化原创 2015-10-09 16:54:28 · 808 阅读 · 0 评论 -
纯css实现高尔夫小球动画案例分析
原作品网址为：http://codepen.io/kevinjannis/pen/MaoGbP作品效果如下：重写的代码如下： * { box-sizing: border-box; } html { background: #d1d1d1;原创 2015-10-10 15:13:01 · 1053 阅读 · 0 评论 -
CSS3中transition-duration参数对hover前后两种过渡时间的影响
transition-duration这个参数是设置过渡时间的，将transition-duration放在哪个类中，那么在这个类被启用时就会按照transition-duration设定的时间来过渡。例如，有类 .a 和 .a:hover 1.如果只在 .a 中设定transition-duration: 3s;的话，那么在鼠标覆盖这个元素和鼠标离开元素时，过渡时原创 2015-08-07 10:08:01 · 3393 阅读 · 0 评论 -
移动端页面弹出对话框效果Demo
核心思路：设置一个隐藏的(display:none;)、背景偏暗的div及其子div作为对话框，当点击某处时，将此div设置为显示。核心代码如下(部分js代码用于动态调整div内容的行高，这部分代码可以忽略): function getHeight(className) {原创 2015-07-24 15:32:21 · 10675 阅读 · 0 评论 -
使用Swiper框架模仿Swiper中文官网的效果Demo
核心代码如下： Swiper test * { margin: 0; padding: 0; } .blue-slide { background: #3566f2; } .red-slide {原创 2015-07-14 10:00:14 · 4885 阅读 · 0 评论 -
JavaScript中地理位置API的使用
Where am I? window.onload = getMyLocation; var zjj = { //张家界的经纬度 latitude:29.667, longitude:110.5 }; function getMyLocation() { //判断浏览器是否支持地理API，若支持，则调用处理函数原创 2015-06-30 11:46:14 · 677 阅读 · 0 评论 -
利用JavaScript和Google API在网页中加入地图
首先获取当前位置的经纬度，然后利用谷歌的API来显示一个地图，并用大头针标记自己的当前位置。 Google Map .map { width: 400px; height: 400px; border: 2px solid black; position: relative; top: 10px; }原创 2015-06-30 12:55:47 · 570 阅读 · 0 评论 -
CSS利用margin属性使整个页面居中
使用一个包裹层将页面主题包裹起来，设置width和margin就可以使整个页面居中。width是页面内容区的宽度，margin是外边距，将左右外边距设为auto后，变可以自动计算左右外边距导致页面居中。 * {padding: 0;margin: 0;} .box1 {background-color: red;height: 150px;} .box2 {ba原创 2015-06-29 14:40:54 · 4719 阅读 · 0 评论 -
CSS实现中间定宽，左右自适应的三列布局
要实现中间定宽，左右自适应的三列布局，个人想到的一种方式是：首先在父容器内设置两个子容器，宽度各占50%并分别向左向右浮动；在每个子容器中放置一个显示区，左容器的显示区设置margin-right，右容器的显示区设置margin-left，这样便留出了中间的空间。最后再使用一个定宽的绝对定位容器水平居中显示，即可完成中间定宽，左右自适应的三列布局。示例代码如下：<!DOCTYPE html&...原创 2018-07-03 09:46:11 · 613 阅读 · 0 评论