GSAP动画库实现无缝无限滚动跑马灯效果
网页图片跑马灯滚动效果的需求：均速无限滚动，无缝衔接滚动，鼠标悬浮暂停滚动，鼠标移动恢复滚动，可以向左或向右滚动。实现原理，利用gsap参数x和repeat。 效果如下： HTML代码： <div class="gallery"> <ul> <li> <a href=""> <img class="img" src="../images/gallery_01.jpg" alt=""/> </a> </li> <...
GSAP参数的箭头函数的运用方法和示例
(参数) => { 函数体 }是ES6中引入的特性，叫箭头函数，一种简洁的函数定义方式，在GSAP中利用箭头函数，可以实现更多变化的动画。 箭头函数有两种基本语法，分别是 (参数) => { 函数体 } (参数) => 表达式 示例： //一般函数 function add(a, b){ return a + b; } //箭头函数 const add = (a, b) => a + b; 在GSAP插件中的使用 (参数) => 表达式 的形式 1、动态计算属性值：根据索引设置...
通过execCommand命令实现一键复制文本的javascript代码
网页上实现一键复制的功能可以使用clipboardjs插件，也可以使用execCommand命令，但兼容性没有前者好。实现思路是创建一个表单文本输入框元素如input、textarea，然后使用select()方法选择文本，再使用execCommand命令复制文本到剪切板。 为了便于重复调用，写成一个函数 function tddx_copyText(ctext) { var copyText = document.createElement('textarea'); //或者是input copyText.value = ctext; //把要复制...
canvas实现点击指定切换元素的圆形弧线进度条动画效果
这是一个使用画布canvas做的通过点击元素实现弧线运动到指定位置的动画效果。实现原理和前面分享的《Canvas百分比动画进度条》教程一样，区别是增加了一个点击事件来传递参数使弧线动画运动到指定位置。思路很简单，代码也很简单。 HTML代码： <div class="canvas"> <canvas id="circle" width="644" height="640"></canvas> </div> <div id="add">前进</div> <div ...
javascript封装$_GET函数来获取url的参数值
js获取通过window.location获取当前网址的参数（参考《javascript获取当前页面url网址参数信息代码》），如果需要频繁获取或者获取的参数较多，显得有点不方便。写成函数的方式，像php或其它代码那样直接使用$_GET['id']的方式获取参数值会更好。 var $_GET = (function(){ var url = window.document.location.href.toString();//获取当前页面的完整url地址 var u = url.split('?');//把url使用?分隔成数组 if(typeof(u...
通过swiper.js插件实现单边三张图片重叠轮播效果
常见的堆叠轮播效果，基于Swiper 8.4.7版本的创意效果参数effect: 'creative'实现。 HTML代码： <link rel="stylesheet" type="text/css" href="../css/swiper-bundle.css" media="screen"/> <!--Swiper 8.4.7--> <script src="../js/swiper-bundle.min.js"></script><!--Swiper 8.4.7--> <div...
简单javascript代码实现简单的天时分秒倒计时功能效果
常见的活动倒计时效果js代码，实现原理很简单，通过计算结束时间与当前的时间差实现倒计时，然后可以使用setInterval方法实现每隔1000毫秒（即1秒）变动一次剩余时间的动态倒计时效果。 HTML代码： <div class="countTime"> <span id="day"></span> <span>天</span> <span id="hour"></span> <span>时</span> <span id="min"&g...
jquery实现粘贴16位序列号自动分割填入input的代码
常见的功能，复制验证序列号粘贴自动分割填入当前focus的input及后面input，每个框4个字符。同时实现当复制的内容自由分割后，某个input不足4个字符时，focus在那个input，超过4个字符则focus进入下一个input。 实现代码 HTML代码 <div class="serial"> <input type="text" class="text" id="input1" value="" maxlength="4" tabindex="1"> <input type="text" cl...
javascript数组转换成字符串的代码方法join()
Javascript join()方法用于把一个数组中的所有元素通过指定的分隔符进行分隔转换为一个字符串。join()方法为JavaScript版本增加，所有主要浏览器都支持。 语法： array.join(separator); 参数 separator：可选，指定要使用的分隔符（如,-|等），留空则自由使用逗号作为分隔符。 返回值 String：返回一个字符串，该字符串是通过把数组中的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入分隔符separator而生成的字符串。 示例： var...
解决HTML5 video不支持播放m3u8格式视频的方法
m3u8是一种基于HLS(HTTP Live Streaming)文件视频格式，HLS由苹果公司提出，使用<video></video>标签可以在Safari浏览器直接播放，但其它浏览器要借助hls.js或基于hls.js开发的html5播放器插件才能兼容播放m3u8格式视频，否则会提示不支持视频格式。 基础代码 HTML代码： <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <video id="video1" co...
jquery实现tab切换内容为几个不同swiper.js轮播插件模块的代码
做一个点击指定元素切换指定内容的页面模块（TAB切换），要切换的内容是独立的swiper.js轮播插件模块，如果先swiper初始化轮播内容，然后实现tab切换就会出现各轮播模块冲突，比如前进后退按钮异常、分页器异常、切换时内容加载异常等。可以避免各轮播模块冲突的方法是点击切换时再初始化当前的swiper轮播，其它的swiper轮播则注销掉。 HTML代码： <script src="js/swiper-bundle.min.js"></script> <div class="videos"> <div class="ta...
支持跟随鼠标方向的Canvas 3D粒子波浪动画效果代码
偶尔会用到的3D效果，由粒子构成的波浪形状，并以波浪形态运动的3D动画效果，支持鼠标摆动方向。 该效果基于JavaScript 3D库three.js，一个易于使用、轻量级、跨浏览器、通用的3D库。three.js库地址：https://github.com/mrdoob/three.js HTML代码： <div id="particle"></div> 引入three.js： <script src="js/three.min.js"></script> Javascript代...