![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 65
寓言s
这个作者很懒,什么都没留下…
展开
-
清明节黑白效果=>来聊聊色彩矩阵算法
昨天各大平台收到通知,需要首页以黑白效果来展示,高级浏览器有一个简单的属性,全局设置一下,就可以满足:-webkit-filter: grayscale(100%);filter: grayscale(100%);在低级浏览器可以借助grayscale.js插件来实现。原理,简单来说就是递归DOM结构,判断节点的类型,如果是文本直接更改其颜色值,如果是图片,通过canvas来更改...原创 2020-04-05 22:49:19 · 1334 阅读 · 0 评论 -
Canvas画雪
*{ margin:0; padding:0; } !(function(doc){ function Snowflake(elem){原创 2015-12-17 16:20:11 · 732 阅读 · 0 评论 -
多个倒计时切换 开始和结束
/* * @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 · 2406 阅读 · 0 评论 -
r.js 打包压缩文件(依赖require)
r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小、减少对服务器的文件请求。要使用r.js需下载r.js文件( 点我下载 ),将其放到你的项目根目录;还需要安装nodeJS( 点我下载),以便通过命令行来执行r.js功能。下面是我项目 幸福来敲门的目录结原创 2015-08-31 16:51:04 · 5869 阅读 · 0 评论 -
查找一个节点是不是另外一个节点的后代
var contains=(function(){ if(typeof document.documentElement.contains){ return function(refNode,otherNode){ return refNode.contains(otherNod原创 2015-07-28 14:56:12 · 1593 阅读 · 0 评论 -
判断浏览器是否支持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 · 1170 阅读 · 0 评论 -
鼠标从一个元素四周哪边进入 定位的子元素跟着从这边进来 离开也是一样的(强推荐)
一个跟着鼠标方向动态进行移动的效果。原创 2014-09-11 16:54:20 · 1385 阅读 · 0 评论 -
省市区镇(可以选四级)联动点击自动展开下一级
周末在家的时候,接到后端的一个电话,说领导有这个这样的需求。刚开始我理解错了。以为需要做一个省市区三级联动的,稀里哗啦的在网上找了数据。然后谢了出来。结果沟通才知道。需求理解错了,需要电商网站填写个人收货地址的需求。简化用户点击次数,选择完省,市自动出来,选择市,县自动出来,接着再如果需要四级联动,就单独封装函数AJAX四级城镇请求出来:代码为:原创 2015-07-07 10:58:36 · 15646 阅读 · 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 · 4759 阅读 · 0 评论 -
JS画椭圆
*{ margin:0; padding:0; } .ab{ width:1px; height:1px; background: #000; position: absolute; } .m原创 2015-05-29 17:33:16 · 4020 阅读 · 1 评论 -
load预加载简单实现
很久没写博客了 昨天在写页面的时候 突然想起一个页面预加载的东西 试试,刚好有朋友经常接触微信活动页面 就聊了一下思路。页面资源加载就是三个 图片 CSS JS现在最方便的就是判断图片加载完毕来计算进度(JS也可以计算CSS 和JS 文件是否加载完毕了,考虑loading页面等待时间不能太长,所以忽略了CSS和JS,只判断load页面的下一个页面所需要的图片加载完毕来计算进度)img原创 2015-10-21 17:56:04 · 3766 阅读 · 0 评论 -
HTML5 新的API 窗口可视区 scrollIntoView dataset calssList
scrollIntoView方法有两个参数 布尔值 true 和 false 使用true或者空会让调用这个方法的元素和浏览器顶部对齐 出现在可视区,使用参数false 也会出现可视区,但是不会和顶部对齐,它会和顶部有一段的距离。调用方法:document.getElementsByTagName("ul")[0].scrollIntoView(true);ul就会出现在可视区,省去原创 2015-07-28 15:25:06 · 2059 阅读 · 1 评论 -
和大家分享表格拖动替换内容以及排序的效果
上代码 Document *{ margin:0; padding:0; } #chenkbox{ margin: 100px auto; width: 500px; position: relative;原创 2015-02-02 15:03:16 · 1230 阅读 · 0 评论 -
Canvas合成图像
*{ margin:0; padding:0; } .center{ text-align: center; }原创 2015-07-09 16:58:36 · 4203 阅读 · 0 评论 -
小图看大图
demo *{ margin:0; padding:0; } div{ float:left; } .box{原创 2016-01-29 18:15:09 · 529 阅读 · 0 评论 -
移动端单指拖 双值旋转缩放(修改版)
demo修改内容:修改了缩放或者扩大后元素溢出边框的BUG,获取了缩放或者扩大的区间值进行计算,具体差别可以看上一篇博客对比一下代码就知道了。 222 *{ margin:0; padding:0; -webkit-perspe原创 2016-02-13 17:44:25 · 1684 阅读 · 0 评论 -
微信朋友圈红包照片实现
demo 朋友圈照片红包效果 *{ margin:0; padding:0; } .pic{ width: 854px; height: 569px;原创 2016-02-24 18:16:24 · 873 阅读 · 0 评论 -
velocityJS 动画使用方法
常用的属性和方法 都中文注释了 相信大家一看就会明白。可以复制代码到本地直接运行看到效果 *{margin:0;padding:0;} .box{width:300px;height:200px;overflow: auto;}原创 2016-05-20 15:25:43 · 1865 阅读 · 1 评论 -
微信浏览器自带的返回上一页的停留位置 scrollTop
我们做过微信的应该都知道,微信自带的返回上一页,就是重新打开页面。并不是返回历史页面。我们PC端的浏览器是返回历史页面。点击返回页面之后 上一个页面的scrollTop还是之前没有进入新页面的位置。我看了下京东的微信网站。果然和我想到的方法一样。利用sessionStorage HTML5本地存储 进行存储位置scrollTop以及加载了多少次ajax次数 微信返回上一页(当前页面)之后。就会原创 2015-06-30 09:32:38 · 10388 阅读 · 3 评论 -
js节流操作
函数节流,之前在用一些onscroll,onresize这种容易频繁触发的事件。都没有做节流,可以说缺乏这个意识,突然在群里看到有朋友提问,我自己也想到了。确实要处理,不能狗频繁触发。频繁触发的话,浏览器的负载会越来越大的。比如scroll每滚动一下,浏览器就会处理里面的逻辑。如果我们每隔一段时间在处理逻辑。这样浏览器就不会有这么大的负载了。对不。两个逻辑。延迟定时器。和时间戳。resiz原创 2015-05-28 10:13:27 · 2057 阅读 · 1 评论 -
bind方法 一种我们忽略的继承
我们之前说过了call和apply两者的区别仅仅是第二参数的不同,call对的第二个参数 可以是任意字符,apply的第二个参数必须是数组。当然,第二个参数视需求而定,是可选的。今天本来想写一个放大镜的效果,再找参考资料的时候 无意发现了一个bind方法,看到解释让我甚是感兴趣,改变函数对象内部的this指向。IE8以下不兼容:"use strict"; var pi原创 2015-03-05 11:29:38 · 778 阅读 · 0 评论 -
各种浏览器UserAgent一览表(桌面+移动)
桌面============================================IE 而IE各个版本典型的userAgent如下: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0) Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2) Mozill转载 2015-03-04 16:49:01 · 5205 阅读 · 0 评论 -
jquery pagex与clientx
function getpos(ev){ var scrilltop=document.documentElement.scrollTop||document.body.scrollTop; var scrillLeft=document.documentElement.scrollLeft||document.body.scrollLeft;原创 2015-03-04 09:54:32 · 3402 阅读 · 0 评论 -
关于字符串编码的三个方法
随行笔记怕忘了。和字符串有关的三个编码方法:decodeURIComponent和encodeURIComponent以及encodeURI;decodeURIComponent解码的 :var str="http://www.abc.com/index.html?imgurl=http%3A%2F%2Fimg.abc.com%2Fa.jpg&mobile=1380000000"原创 2015-03-03 15:37:10 · 927 阅读 · 0 评论 -
关于innerText和textContent
RunJS sssssss sssssss sssssss sssssss sssssss var odiv=document.getElementsByTagName("div")[0]; function setText(element,text){ if(typeof element.textCon原创 2015-03-03 17:50:12 · 1121 阅读 · 0 评论 -
关于call和apply的区别
关于call和apply。 function a(names){ this.name=names; } a.prototype.show=function(){ alert(this.name); } function b(name1){ this原创 2015-03-02 10:37:05 · 661 阅读 · 0 评论 -
关于闭包
这两天在苦苦钻研闭包,因为之前对闭包的接触并不多,于是大量在网上找资料。怕遗忘,登陆博客,记录下来。什么是闭包,记得刚学习JS的时候,说闭包就是外部调用内部函数的变量。楼主当时比较浮躁,就以为是个很简单的东西,也就没有深究,但是随着,写的代码多了,感觉闭包真的非常有用。到目前为止,用的最后就是匿名函数自调用。首先看我的两个案例,作用域和执行顺序。 for (var i=0;原创 2015-01-25 18:55:53 · 845 阅读 · 0 评论 -
无缝幻灯片2
上一篇写了一个无缝幻灯片。但是一个朋友说。我那个只适合做纯效果。如果在上面有一些操作,就会报错。比如说:oul.getElementsByTagName(“li”)[0].这个时候没3秒钟返回的节点是一样的。在变化。针对这个需求,我就重新了一个。希望对大家有帮助。 *{ margin:0;原创 2015-02-07 16:57:00 · 1040 阅读 · 0 评论 -
幻灯片无缝滑动(无需重新设置下标)
代码的效果可以直接看文章底部的演示地址,之前的滑动幻灯片我写的有一个小小的bug就是当到了最后一个节点,又需要重新回到第一个节点。从最后回到第一个节点。这个过程浪费了时间。并且不友好。现在我每执行一次,就把写个回调函数,DOM操作把第一个放在最后一个,这样就变成无缝幻灯片了。 *{ margin:原创 2015-02-05 15:03:13 · 1056 阅读 · 0 评论 -
数组去重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 · 801 阅读 · 0 评论 -
关于document.body和document.documentElement
刚刚帮朋友写一个样式加载数据的时候,用到了这样的一个语句,document.documentElement.clientHeight,原创 2015-03-08 20:27:57 · 710 阅读 · 1 评论 -
nodeValue和nodeType
nodeValue看到value我们就知道是值了,nodeType看到Type就知道是类型了 nodevalue是取得文本值 当nodeType==3的时候才有会返回值。不然会返回一个null值(或者经常按照我们编码的习惯,会产生一个空格 空格在JS里面nodeType==3是返回true)。 1111原创 2015-03-18 11:12:44 · 773 阅读 · 0 评论 -
数字和字符串比较
/**字符串之间的对比***/ function test(){ alert(1<3);//true; /**字符串数字之间的对比,会先转化成数字**/ alert("1"<"3");//true /**纯字符串比较 会先转成ascii码**/ alert("a"<"b");//true /原创 2015-05-06 15:12:07 · 4462 阅读 · 1 评论 -
JS 实现简易老虎机
*{ margin:0; padding:0; } ul{ text-align: center; margin: 100px auto; overflow: hidden; } ul li{原创 2015-05-05 10:36:26 · 17227 阅读 · 1 评论 -
轮盘抽奖代码
div{ text-align: center; } .cj{ z-index: 2; -webkit-transform:translate3d(0,327px,0); cursor: pointer; position: relative;原创 2015-05-12 17:34:20 · 199454 阅读 · 0 评论 -
关于JS里面的变量提升
之前和一个同事做一个项目的时候遇到了一个变量提升的问题,明明已经定义了但是会弹出undefined.后来查了一下,因为是变量提升的原因才导致的。 var V="Hello World"; (function(){ alert(V); var V="111" })()这个时候你会弹出一个undefined,按照我们本来的思路应该是弹出一个H原创 2015-04-17 11:50:55 · 785 阅读 · 2 评论 -
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 · 805 阅读 · 0 评论 -
滚动浮动菜单
效果简介:滚到那个栏目 一个fixed元素的栏目名就变色。 html{ height: 2000px; } ul li{ width:100%; height:200px; margin-bottom:10原创 2015-04-20 14:12:50 · 1248 阅读 · 0 评论 -
关于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 · 4819 阅读 · 0 评论 -
document.compatMode 获取可视区宽高
document.compatMode== 'BackCompat' //不是标准声明 document.compatMode== 'CSS1Compat ' //标准声明 这两个模式下面 对应的获取可视区宽高也是不一样的。标准的声明 可以document.documentElement.clientWidth这样获取宽度非原创 2015-03-18 11:51:18 · 695 阅读 · 0 评论