jquery实现tab切换内容为几个不同swiper.js轮播插件模块的代码

做一个点击指定元素切换指定内容的页面模块（TAB切换），要切换的内容是独立的swiper.js轮播插件模块，如果先swiper初始化轮播内容，然后实现tab切换就会出现各轮播模块冲突，比如前进后退按钮异常、分页器异常、切换时内容加载异常等。可以避免各轮播模块冲突的方法是点击切换时再初始化当前的swiper轮播，其它的swiper轮播则注销掉。 HTML代码： <script src="js/swiper-b...
Web前端开发 / / 1374次阅读

支持跟随鼠标方向的Canvas 3D粒子波浪动画效果代码

偶尔会用到的3D效果，由粒子构成的波浪形状，并以波浪形态运动的3D动画效果，支持鼠标摆动方向。 该效果基于JavaScript 3D库three.js，一个易于使用、轻量级、跨浏览器、通用的3D库。three.js库地址：https://github.com/mrdoob/three.js HTML代码： <div id="particle"></div> 引...
Web前端开发 / / 8871次阅读
支持跟随鼠标方向的Canvas 3D粒子波浪动画效果代码

jquery鼠标悬浮元素时图片向上滚动的代码

图片高度超过DOM元素节点高度，且父元素添加了overflow:hidden;图片超过高度的部分不会显示，通过鼠标悬浮图片，图片向上滚动的方式显示被截取的部分。 HTML代码： <div class="scroll"> <img src="图片URL地址" alt="长图片"/> </div> CSS代码： .scroll {padding-bottom:5...
Web前端开发 / / 1593次阅读

简易HTML5 video点击元素弹框播放视频的jQuery代码

很简单的点击指定元素弹出层播放video视频的代码，如果不喜欢很炫酷的弹框视频效果可以一用。 CSS代码： .popup{position:fixed;left:0;top:0;width:100%;height:100%;overflow-y:auto;background-color:rgba(0,0,0,0.75);z-index:10;-webkit-overflow-scrolling:touch;di...
Web前端开发 / / 1971次阅读

jQuery/Zepto 3D透视圆形/椭圆形旋转木马轮播插件cloud9carousel

cloud9carousel是一款与jQuery和Zepto配合使用、支持多个轮播实例、支持任何HTML元素、速度流畅、专注于性能的3D透视旋转木马插件，使用requestAnimationFrame方法固定FPS来实现平滑过渡动画、自动开启GPU来支持CSS 转换动画（自动判断是否支持），有onLoaded、onRendered、onAnimationFinished三个回调函数，支持元素倒影（需要reflection.js插件...
Web前端开发 / / 1953次阅读
jQuery/Zepto 3D透视圆形/椭圆形旋转木马轮播插件cloud9carousel

通过axisLabel属性设置Echarts横纵坐标轴核度名称的文字样式

Echarts官方文档给出的设置坐标轴名称文字样式的属性是nameTextStyle，但在yAxis标签中配置后并不生效，这是因为把坐标轴的name标签和axisLabel标签混淆了，nameTextStyle属性设置的是坐标轴的名称标签name，而要修改坐标轴核度data[]的文字样式，要使用的是坐标轴刻度标签axisLabel，两者虽然标签有不少相同的属性，但实际设置的东西是不一样的。 坐标轴名称...
Web前端开发 / / 1846次阅读
通过axisLabel属性设置Echarts横纵坐标轴核度名称的文字样式

Echarts柱状图barGap参数设置柱间距离不生效的问题

series-bar.barGap是series标签的一个参数，用于配置不同系列的柱与柱之间的柱间距离（数值为柱子宽度的百分比）。配置起来很简单的一个参数，但是会发现直接添加到series标签后不生效，原因是没有把grid标签的top、left、bottom、right四个参数设置完，缺少一个都会导致barGap的配置不生效。 不生效的代码： var option = { grid: { left: "...
Web前端开发 / / 1809次阅读

Echarts给图形上的label标签数值添加单位或其它文本内容

Echarts图形上的文本标签label标签默认只显示数值，如果想显示更多的文本或者调整样式，可以通过配置label标签参数实现。如给图形的数值增加一个单位字符串。 给数值增加其它文本内容要用到的label标签参数是formatter（标签内容格式器），示例如下： 原代码： series: [ { name: 'Direct', type: 'bar', stack: 't...
Web前端开发 / / 1517次阅读
Echarts给图形上的label标签数值添加单位或其它文本内容

jquery左右拖拽对比前后效果图片的代码

新旧两张图片效果的不同对比，实现效果通过拖拽按钮对比相同位置的差异。 HTML代码： <div class="compare"> <div class="pic before" style="background-image:url(before.jpg);"></div> <div class="pic after" style="backgro...
Web前端开发 / / 894次阅读
jquery左右拖拽对比前后效果图片的代码

javascript判断当前浏览器是否是微信浏览器

判断是否是微信浏览器和判断其它浏览器的方法一样，都可以通过navigator对象的userAgent属性（用户代理，简称 UA）来获取浏览器的标识，然后判断是哪个浏览器。 判断微信浏览器的代码： 便于多次使用，把判断写成函数形式： function is_weixin(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/M...
Web前端开发 / / 1118次阅读

javascript获取video视频某一帧作为poster封面图片

HTML标签Video的poster属性可以给视频添加一个图片作为视频未开始播放时的封面，但如果不想单独添加图片，也可以通过代码利于canvas获取视频的某一帧作为封面图片。 HTML代码： <video id="cvideo" src="upload/video.mp4" webkit-playsinline="true"...
Web前端开发 / / 1684次阅读