- 博客(63)
- 收藏
- 关注
RSS订阅
原创 关于H5实现的手机摇一摇
var shake=4000, last_update=0, count=0, x=y=z=last_x=last_y=last_z=0; if(window.DeviceMotionEvent){ window.addEventListener("devicemotion",deviceM
2015-04-22 10:51:44
4786
原创 无缝幻灯片2
上一篇写了一个无缝幻灯片。但是一个朋友说。我那个只适合做纯效果。如果在上面有一些操作，就会报错。比如说:oul.getElementsByTagName(“li”)[0].这个时候没3秒钟返回的节点是一样的。在变化。针对这个需求，我就重新了一个。希望对大家有帮助。 *{ margin:0;
2015-02-07 16:57:00
1030
原创 和大家分享表格拖动替换内容以及排序的效果
上代码 Document *{ margin:0; padding:0; } #chenkbox{ margin: 100px auto; width: 500px; position: relative;
2015-02-02 15:03:16
1219
原创 JS 实现自定义滚动条 实现透明度控制和滚动条
Document *{ margin:0px; padding:0px; list-style: none; } #parent{ width: 600px; height: 12px; position: relative; top: 12px;
2014-05-07 13:26:21
3426
1
原创 清明节黑白效果=>来聊聊色彩矩阵算法
昨天各大平台收到通知，需要首页以黑白效果来展示，高级浏览器有一个简单的属性，全局设置一下，就可以满足：-webkit-filter: grayscale(100%);filter: grayscale(100%);在低级浏览器可以借助grayscale.js插件来实现。原理，简单来说就是递归DOM结构，判断节点的类型，如果是文本直接更改其颜色值，如果是图片，通过canvas来更改...
2020-04-05 22:49:19
1290
原创 velocityJS 动画使用方法
常用的属性和方法 都中文注释了 相信大家一看就会明白。可以复制代码到本地直接运行看到效果 *{margin:0;padding:0;} .box{width:300px;height:200px;overflow: auto;}
2016-05-20 15:25:43
1851
1
原创 CSS3 3D效果
demo *{ margin:0; padding: 0; } .demo{ width:500px; height:500px; margi
2016-03-10 19:41:19
1149
原创 Canvas放大镜效果
demo 放大镜+水印 *{ margin:0; padding: 0; } #Mycanvas{ margin:0 auto; display:block;
2016-03-01 13:29:39
1089
原创 微信朋友圈红包照片实现
demo 朋友圈照片红包效果 *{ margin:0; padding:0; } .pic{ width: 854px; height: 569px;
2016-02-24 18:16:24
850
原创 移动端单指拖 双值旋转缩放(修改版)
demo修改内容:修改了缩放或者扩大后元素溢出边框的BUG,获取了缩放或者扩大的区间值进行计算,具体差别可以看上一篇博客对比一下代码就知道了。 222 *{ margin:0; padding:0; -webkit-perspe
2016-02-13 17:44:25
1672
原创 CSS3蒙版 Mask
之前mask这个属性用的比较少,对它也并不了解，又一次在前端群里面五一看到人打了一个这样的属性出来，我感觉很陌生，马上去看了，原来真的有这么神奇的属性，蒙版，可以实现很多复杂多样化的遮罩。语法： -webkit-mask-image:url(circle.svg);和background的样式语法是一样的，蒙版的alpha设置为0那后面的图片也不见了，设置为1才是可见。...
2016-01-20 17:13:13
11189
原创 Canvas基本视频引用
demo1 demo2 *{ margin:0; padding:0; } #Mycanvas{ position: absolute; top:
2015-12-30 10:43:51
1965
原创 Canvas基本匀速运动
demo1 demo2 每次重新打开页面速度都会有差别 *{ margin:0; padding:0; } !(function
2015-12-26 16:54:02
1556
1
原创 Canvas画雪
*{ margin:0; padding:0; } !(function(doc){ function Snowflake(elem){
2015-12-17 16:20:11
720
原创 load预加载简单实现
很久没写博客了 昨天在写页面的时候 突然想起一个页面预加载的东西 试试，刚好有朋友经常接触微信活动页面 就聊了一下思路。页面资源加载就是三个 图片 CSS JS现在最方便的就是判断图片加载完毕来计算进度（JS也可以计算CSS 和JS 文件是否加载完毕了，考虑loading页面等待时间不能太长，所以忽略了CSS和JS，只判断load页面的下一个页面所需要的图片加载完毕来计算进度）img
2015-10-21 17:56:04
3741
原创 r.js 打包压缩文件（依赖require）
r.js是requireJS的优化（Optimizer）工具，可以实现前端文件的压缩与合并，在requireJS异步按需加载的基础上进一步提供前端优化，减小前端文件大小、减少对服务器的文件请求。要使用r.js需下载r.js文件（ 点我下载 ），将其放到你的项目根目录；还需要安装nodeJS（ 点我下载），以便通过命令行来执行r.js功能。下面是我项目 幸福来敲门的目录结
2015-08-31 16:51:04
5857
原创 多个倒计时切换 开始和结束
/* * @Author: Mark* @Date: 2015-08-06 13:54:01* @Last Modified by: Mark* @Last Modified time: 2015-08-17 11:49:27*/var tmover=(function(){ function tim(opt){ _this=this;//保存当
2015-08-17 13:59:22
2392
原创 HTML5 新的API 窗口可视区 scrollIntoView dataset calssList
scrollIntoView方法有两个参数 布尔值 true 和 false 使用true或者空会让调用这个方法的元素和浏览器顶部对齐 出现在可视区，使用参数false 也会出现可视区，但是不会和顶部对齐，它会和顶部有一段的距离。调用方法：document.getElementsByTagName("ul")[0].scrollIntoView(true);ul就会出现在可视区，省去
2015-07-28 15:25:06
2034
1
原创 查找一个节点是不是另外一个节点的后代
var contains=(function(){ if(typeof document.documentElement.contains){ return function(refNode,otherNode){ return refNode.contains(otherNod
2015-07-28 14:56:12
1554
原创 判断浏览器是否支持CSS3 已经初步探索JS 惰性加载
分享一个判断浏览器是否支持的函数，然后有牵扯到了一个懒性加载的概念。var iscss3=(function(){ var _style=document.createElement("div").style; return 'transition' in _style||'mozTransition' in _style||'webkitT
2015-07-27 16:12:38
1161
原创 省市区镇（可以选四级）联动点击自动展开下一级
周末在家的时候，接到后端的一个电话，说领导有这个这样的需求。刚开始我理解错了。以为需要做一个省市区三级联动的，稀里哗啦的在网上找了数据。然后谢了出来。结果沟通才知道。需求理解错了，需要电商网站填写个人收货地址的需求。简化用户点击次数，选择完省，市自动出来，选择市，县自动出来，接着再如果需要四级联动，就单独封装函数AJAX四级城镇请求出来：代码为：
2015-07-07 10:58:36
15580
9
原创 HTML5 Canvas 获取网页的像素值。
我之前在网上看过一个插件叫做出JScolor 颜色拾取器 说白了就是通过1*1PX的DOM设置颜色值通过JS来获取当前鼠标点击位置DOM的颜色值。自从HTML5 画布出来之后。就有更好的方法来获取了，比如郭阿里巴巴ICON矢量库 用的SVG和渐变来进行绘制:我昨天用Canvas来绘制了一下，因为Canvas有现成的方法getImageData(x,y,width,height
2015-07-05 11:37:47
4722
原创 微信浏览器自带的返回上一页的停留位置 scrollTop
我们做过微信的应该都知道，微信自带的返回上一页，就是重新打开页面。并不是返回历史页面。我们PC端的浏览器是返回历史页面。点击返回页面之后 上一个页面的scrollTop还是之前没有进入新页面的位置。我看了下京东的微信网站。果然和我想到的方法一样。利用sessionStorage HTML5本地存储 进行存储位置scrollTop以及加载了多少次ajax次数 微信返回上一页（当前页面）之后。就会
2015-06-30 09:32:38
10336
3
原创 JS画椭圆
*{ margin:0; padding:0; } .ab{ width:1px; height:1px; background: #000; position: absolute; } .m
2015-05-29 17:33:16
3995
1
原创 js节流操作
函数节流，之前在用一些onscroll,onresize这种容易频繁触发的事件。都没有做节流，可以说缺乏这个意识，突然在群里看到有朋友提问，我自己也想到了。确实要处理，不能狗频繁触发。频繁触发的话，浏览器的负载会越来越大的。比如scroll每滚动一下，浏览器就会处理里面的逻辑。如果我们每隔一段时间在处理逻辑。这样浏览器就不会有这么大的负载了。对不。两个逻辑。延迟定时器。和时间戳。resiz
2015-05-28 10:13:27
2046
1
原创 JS实现钟表
*{ margin:0; padding:0; } .parents{ width:250px; height:250px; background:#000; -webkit-border-radius:20px;
2015-05-20 16:52:36
989
原创 轮盘抽奖代码
div{ text-align: center; } .cj{ z-index: 2; -webkit-transform:translate3d(0,327px,0); cursor: pointer; position: relative;
2015-05-12 17:34:20
195416
原创 数字和字符串比较
/**字符串之间的对比***/ function test(){ alert(1<3);//true; /**字符串数字之间的对比，会先转化成数字**/ alert("1"<"3");//true /**纯字符串比较 会先转成ascii码**/ alert("a"<"b");//true /
2015-05-06 15:12:07
4442
1
原创 JS 实现简易老虎机
*{ margin:0; padding:0; } ul{ text-align: center; margin: 100px auto; overflow: hidden; } ul li{
2015-05-05 10:36:26
17189
1
原创 滚动浮动菜单
效果简介：滚到那个栏目 一个fixed元素的栏目名就变色。 html{ height: 2000px; } ul li{ width:100%; height:200px; margin-bottom:10
2015-04-20 14:12:50
1233
原创 Canvas展示型页面
function hasClass(node,oclass){ var oname=node.className.split(/\s+/); for (var i = 0; i < oname.length; i++) { if(oname[i]==oclass){
2015-04-20 10:40:49
791
原创 关于JS里面的变量提升
之前和一个同事做一个项目的时候遇到了一个变量提升的问题，明明已经定义了但是会弹出undefined.后来查了一下，因为是变量提升的原因才导致的。 var V="Hello World"; (function(){ alert(V); var V="111" })()这个时候你会弹出一个undefined，按照我们本来的思路应该是弹出一个H
2015-04-17 11:50:55
777
2
原创 数组去重Array
var aee3=[31,42,13,19,5,11,8,13,40,39,1,8,44,15,3]; Array.prototype.unqu2=function(){ this.sort(); var arr2=[this[0]]; for (var j = 1; j < this.length; j++) {
2015-03-20 16:44:23
789
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人