Welcome 微信登录

首页 / 脚本样式 / JavaScript

用canvas 实现个图片三角化(LOW POLY)效果

用canvas 实现个图片三角化(LOW POLY)效果

之前无意中看到Ovilia 用threejs做了个LOW POLY,也就是图片平面三角化的效果,觉得很惊艳,然后就自己花了点时间尝试了一下。 我是没怎么用过threejs,所以就直接用canvas的2d绘图API来做,因为感觉似乎这效果也用不上threejs。 直接上demo先:http://whxaxes.github.io/canvas-test/src/Funny-demo/lowpoly/index.html (也可以在移动端看,不过因为计算...
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)

基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)

基于jQuery实现仿搜狐辩论投票动画代码 ,一款个性的卡通小人正方反方辩论投票特效代码。移动动画效果平滑自然。具有非常好的用户体验。该源码兼容目前最新的各类主流浏览器。效果演示 源码下载html代码:<script type="text/javascript">$(document).ready(function () {var a = 500;var b = 130;$("#white").animate({ width: 0, left:...
ECharts仪表盘实例代码(附源码下载)

ECharts仪表盘实例代码(附源码下载)

大家在汽车驾驶舱里一眼就可以看到仪表盘,使用使用Echarts制作的仪表盘可以轻松展示用户的数据,清晰的看出某个指标值所在的范围,仪表盘形式的报表应用在各种统计系统中,本文结合实例讲解仪表盘在销售任务完成率的统计应用。效果演示源码下载HTML首先引入Echarts,然后在需要放置图表的地方加上div#myChart,同时给它加上宽度和高度属性。<script src="echarts.min.js"></script> <di...
JS实现1000以内被3或5整除的数字之和

JS实现1000以内被3或5整除的数字之和

今天在技术群里看到一道这样的提:求1000以内被3或5整除的数字之和。其中看到很有趣的解法二,最开始还是挺迷惑的,后来想了下,再经人指点,就觉得茅塞顿开。第一种解法很普遍,就是将1000以内的数都遍历一遍,只要有整除3或者整除5的数,就将其加起来,最终得到一个总的和。让我感兴趣的是第二种解法,这里巧妙运用了数学上的等差数列一个公差为的等差数列前项的级数为:第二种方法第一步就用了(a1+an)/3*3,所以就变成了3*(1+333)*333/2,这一步就是把...
多种js图片预加载实现方式分享

多种js图片预加载实现方式分享

图片预加载有大体有几种方式1.html标签或css加载图片 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载。但是为了避免初次载入过多图片影响体验。一般最好在文档渲染完成以后再加载(使用window.onload等)。2.纯js实现预加载空城计-Code记的Javascript实现图片的预加载的完整实现的预加载实例为function preloadimages(arr){var newimages=[],...
谈一谈javascript中继承的多种方式

谈一谈javascript中继承的多种方式

JS 是没有继承的,不过可以曲线救国,利用构造函数、原型等方法实现继承的功能。 var o=new Object();其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属性与方法。那么为什么能访问Object对象的方法,其实访问的是其原型对象的方法,所有的方法都是放在原型中而不是类中。console.log(o.__proto__ === Object.prototype) // true 继承的本质console.log(o.__p...
javascript轻量级库createjs使用Easel实现拖拽效果

javascript轻量级库createjs使用Easel实现拖拽效果

我就把我学习Createjs的一些心得体会向大家分享下:一.什么是CreateJS? createjs是一个轻量级的javascript库,是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包,利用createjs可以构建出许多有趣的动画游戏。例如围住神经猫,看你有多色等Html5游戏。二.CreateJS有哪几款工具?createjs里面共有四大引擎:EaselJS:主要用于动画、向量及位图的绘制。提供支持移动设备触控的一系列方法(cli...
初识angular框架后的所思所想

初识angular框架后的所思所想

因为工作中实际开发需要,才开始接触angular框架。从当初的比葫芦画瓢,被各种问题、概念折磨摧残,到现在有一定的了解认识,觉得有必要将自己的认识进行简单的总结。不到位的地方还望多多包涵。1.双向数据绑定 目前业内盛行各种MV**框架,相关的框架不断涌现,而angular就是其中的一种(MVVM)。MV**框架其实最核心的问题就是将view层和model分离开来,降低代码的耦合性,做到数据和表现的分离,MVC、MVP、MVVM均有相同的目标,而他们之间的不...
学习javascript文件加载优化

学习javascript文件加载优化

在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行。 所以,在这里,我们可以对其进行很多优化工作。放置在BODY底部为了让渲染引擎能够及早的将DOM树给渲染出来,我们需要将script放在body的底部,让页面尽早脱离白屏的现象,即会提早触发DOMContentLoaded事件. 但是由于在IOS Safari, Android browser以及IOS w...
jQuery on()绑定动态元素出现的问题小结

jQuery on()绑定动态元素出现的问题小结

jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,例如append等。之前使用 on 的时候一直是$("").on("click","function(){ }") 之后发现有些时候一直无法绑定(比如元素动态生成时),查看文档后发现正确用法应该是$(document).on("change","#pageSize_out",function(){ if($("#page_out").v...
基于JavaScript实现弹出框效果

基于JavaScript实现弹出框效果

弹出框在网站页面中是必不可少的一部分,今天借助脚本之家平台给大家分享使用js实现简单的弹出框效果,本文写不好,还请见谅!首先我们来分析弹出框的部件.简单弹出框分为头,内容,尾部. 头部中有标题和关闭按钮,内容就可以图文,媒体,iframe,flash等等,尾部就是按钮(确认,取消等等),这个例子尾部我就不加入按钮了,这个例子主要是实现弹出框的核心部分.<!DOCTYPE html><html><head><meta...
JavaScript深度复制(deep clone)的实现方法

JavaScript深度复制(deep clone)的实现方法

在代码复用模式里面有一种叫做“复制属性模式”(copying properties pattern)。谈到代码复用的时候,很有可能想到的是代码的继承性(inheritance),但重要的是要记住其最终目标——我们要复用代码。继承性只是实现代码复用的一种手段,而不是唯一的方法。复制属性也是一种复用模式,它跟继承性是有所不同的。这种模式中,对象将从另外一个在对象中获取成员,其方法是仅需将其复制即可。用过jQuery的都知道,它有一个$.extend()方法,它...
javascript每日必学之循环

javascript每日必学之循环

朋友们大家好,今天,我们继续接着前面的内容讲,前们我们已经讲了条件分支,今天我们就讲循环,顾名思义就是,重复执行相同的操作,正常循环是受程序控制的,不正常的情况,就会出现死循环,那就是我们的代码中出现bug,那样,我们还要学会调式bug,等我们先把基础知识讲完了之后,我还会专门用篇幅来讲解浏览器里面的调试,那种程序就会在我们掌控之中,这才是我们想要结果。 循环包括的结构体有 for , while , do--while,for循环有两种形式的存在,一种...
javascript下使用Promise封装FileReader

javascript下使用Promise封装FileReader

Promise 在处理异步的时候是个很好的选择,可以减少嵌套层次,让代码更好读,逻辑更清晰。ES6 将其加入规范,jQuery 3.0 也修改实现向规范靠拢(3.0 发布公告)。一些新增元素比如 .fetch() 原生就 “thenable”,不过大多数以往的 API 还要依赖回调,这个时候,我们只要将它们重新封装,就能避开嵌套陷阱,享受 Promise 带来的愉悦体验。Promise 一般用法先来看下 Promise 的一般用法。// 声明 Promis...
<< 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 >>