cloud9carousel是一款与jQuery和Zepto配合使用、支持多个轮播实例、支持任何HTML元素、速度流畅、专注于性能的3D透视旋转木马插件，使用requestAnimationFrame方法固定FPS来实现平滑过渡动画、自动开启GPU来支持CSS 转换动画（自动判断是否支持），有onLoaded、onRendered、onAnimationFinished三个回调函数，支持元素倒影（需要reflection.js插件）、自动轮播、鼠标滚轮切换、点击切换。 演示：http://specious.git...
barGap用于设置不同系列的柱间距离，barCategoryGap用于设置同一系列的柱间距离，barWidth属性用于设置柱条的宽度，但把几个属性设置之后（如下代码设置），发现设置的值并没有生效。 series: [ { name: "类型", type: "bar", barGap: "30%", barCategoryGap:'54%', barWidth: "28", }, ] 原因：ECharts会根据barGap、barCategoryGap、barWidth三个属性其中的一个属性的值结合图表的高度进行平均分配，也就是说这...
Echarts官方文档给出的设置坐标轴名称文字样式的属性是nameTextStyle，但在yAxis标签中配置后并不生效，这是因为把坐标轴的name标签和axisLabel标签混淆了，nameTextStyle属性设置的是坐标轴的名称标签name，而要修改坐标轴核度data[]的文字样式，要使用的是坐标轴刻度标签axisLabel，两者虽然标签有不少相同的属性，但实际设置的东西是不一样的。 坐标轴名称 实现代码： yAxis: { type: "category", axisLabel: { color: "#333", ...
series-bar.barGap是series标签的一个参数，用于配置不同系列的柱与柱之间的柱间距离（数值为柱子宽度的百分比）。配置起来很简单的一个参数，但是会发现直接添加到series标签后不生效，原因是没有把grid标签的top、left、bottom、right四个参数设置完，缺少一个都会导致barGap的配置不生效。 不生效的代码： var option = { grid: { left: "2%", right: 0, top: 0, containLabel: true, }, series: [ { ...
Echarts图形上的文本标签label标签默认只显示数值，如果想显示更多的文本或者调整样式，可以通过配置label标签参数实现。如给图形的数值增加一个单位字符串。 给数值增加其它文本内容要用到的label标签参数是formatter（标签内容格式器），示例如下： 原代码： series: [ { name: 'Direct', type: 'bar', stack: 'total', label: { show: true, position: 'outside', }, dat...
新旧两张图片效果的不同对比，实现效果通过拖拽按钮对比相同位置的差异。 HTML代码： <div class="compare"> <div class="pic before" style="background-image:url(before.jpg);"></div> <div class="pic after" style="background-image:url(after.jpg);"></div> <div class="drag"> <div...
判断是否是微信浏览器和判断其它浏览器的方法一样，都可以通过navigator对象的userAgent属性（用户代理，简称 UA）来获取浏览器的标识，然后判断是哪个浏览器。 判断微信浏览器的代码： 便于多次使用，把判断写成函数形式： function is_weixin(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i) == "micromessenger"){ return true; }else{ return false;...
HTML标签Video的poster属性可以给视频添加一个图片作为视频未开始播放时的封面，但如果不想单独添加图片，也可以通过代码利于canvas获取视频的某一帧作为封面图片。 HTML代码： <video id="cvideo" src="upload/video.mp4" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscree...
UEditor编辑器除了默认显示出来的工具名称外，还可以增加更多的常用工具，下面是UEditor编辑器工具栏默认支持的完整的按钮列表，可以参考根据需求添加。 toolbars: [ [ 'anchor', //锚点 'undo', //撤销 'redo', //重做 'bold', //加粗 'indent', //首行缩进 'snapscreen', //截图 'italic', //斜体 'underline', //下划线 ...
炮马灯效果通过基础的js代码或HTML的marquee标签都能实现，如果想学习TweenMax插件不妨通过其跑马灯效果代码入手会比较容易理解。 1、下载插件：http://www.tweenmax.com.cn/source/ 把压缩后文件夹里的src/minified/TweenMax.min.js和src/minified/plugins/ModifiersPlugin.min.js文件复制到自己的Web项目 TweenMax.min.js：核心工具 ModifiersPlugin.min.js：基础插件，...
实现监控检测网页所有图片是否加载完成的思路：把网页所有img定义成一个数组变量，再实例化一个Image对象，然后遍历前面的数组变量，把每个src逐个附值给Image对象src，再逐个通过onload事件判断图片是否加载完成。 扩展：ready是指DOM结构加载完成后执行，不包括网页上的图片等媒体元素；onload则是DOM结构和页面资源（图片、视频、flash等）全部加载完成后执行。所以判断图片是否加载完成要用onload事件。（注意：jquery对象以及使用querySelectorAll、getElementsByTagName、getElementsByClassNam...
向下滑动显示slideDown()和向上滑动隐藏slideUp()是jquery内置的常用方法，现在再自定义增加一组向右滑动显示slideRight()和向左滑动隐藏的方法slideLeft()，其实也是一个简单的jquery插件。 代码如下： jQuery.fn.slideLeft = function( speed, callback ) { this.animate({ width : "hide", paddingLeft : "hide", paddingRight : "hide...