菜单

canvas实现点击指定切换元素的圆形弧线进度条动画效果

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.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的代码

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粒子波浪动画效果代码

支持跟随鼠标方向的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代...

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

图片高度超过DOM元素节点高度,且父元素添加了overflow:hidden;图片超过高度的部分不会显示,通过鼠标悬浮图片,图片向上滚动的方式显示被截取的部分。 HTML代码: <div class="scroll"> <img src="图片URL地址" alt="长图片"/> </div> CSS代码: .scroll {padding-bottom:50%; overflow:hidden;} .scroll img {display: block; position: absolute; left:0; ...

简易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;display:none;} .popup .video{width:100%;min-height:100%;justify-content:center;al...