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、动态计算属性值：根据索引设置...
Node.js NODE_PATH环境变量的作用以及怎么配置NODE_PATH环境变量
为什么要配置Node.js的NODE_PATH环境变量？目的是为了能够让Node.js在全局范围内识别并找到某些模块或库，通俗地讲就是为了告诉Node.js在哪里查找全局安装的npm包（即npm全局包）。 配置步骤： 1、右键点击“此电脑”或“我的电脑”，选择“属性”，点击“高级系统设置”，在“系统属性窗口中”点击“环境变量(N)...”按钮，在新弹出的环境变量窗口中，点击“系统变量(S)”下面的“新建(W)”按钮： 2、在弹出的“编辑系统变量”窗口中，变量名(N)输入NODE_PATH，变量值(V)输入nodejs全局npm包的安装路径...
Node.js设置或更改npm下载包的默认缓存目录命令npm config set cache
npm下载包缓存目录用于保存已下载包的电脑本地位置，从而方便在后续安装相同包时进行复用，有效节省下载安装时间和带宽资源。不同操作系统的默认npm缓存目录会有差异，但好像都不好找。windows系统的默认npm缓存目录的路径一般是C:\Users\<username>\AppData\Roaming\npm-cache。（username是电脑用户名） 如果不喜欢这个存储路径，可以使用npm命令进行更改设置。 1、在nodejs安装目录，如D:\nodejs，直接鼠标右键新建文件夹的方式创建一个用来存放全局npm包的目录（使用命令创建，则是mkdir命令...
Node.js修改或自定义设置npm全局包的安装路径命令npm config set prefix
windows电脑想自定义npm全局包的安装路径方便查找，可以使用npm config set prefix命令。 1、在nodejs安装目录，如D:\nodejs，直接鼠标右键新建文件夹的方式创建一个用来存放全局npm包的目录（使用命令创建，则是mkdir命令），命名为node_global，那么其路径便是D:\nodejs\node_global。 2、以管理员身份运行命令提示符工具，输入以下命令后按回车键执行命令： npm config set prefix "D:\nodejs\node_global" 这条命令的作用是把npm全局包的安装路...
通过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...
xampp启动后访问网站提示Host 'localhost' is not allowed to connect to this MariaDB server
XAMPP之前一直正常使用，再次打开可以正常启用Apache、MySQL，但访问网站提示错误Host 'localhost' is not allowed to connect to this MariaDB server，访问phpmyadmin也提示数据库链接错误。解决方法是设置启动mysql时不启动grant-tables，即跳过权限验证。 需要注意的是，跳过权限验证后，本地连接数据库可以使用任意账号或者密码。 操作步骤： 1、在xampp的安装目录/xampp/mysql/bin目录下找到并编辑my.ini文件，在[mysqld]下面添加ski...
简单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...