常用特效
文章平均质量分 55
xyphf_和派孔明
全栈工程师,熟悉原生JavaScript、TypeScript、ES6、Webpack、VUE全家桶、JAVA SSM框架、Spring boot 、Spring cloud、MySql、Oracle、Linux等,可独立构建多页面、单页面应用项目。
展开
-
数字滚动效果的实现
如何实现下列效果,数字滚动增长效果原创 2022-06-01 11:26:53 · 207 阅读 · 0 评论 -
怎么使一行代码实现网页变灰
如何实现下列效果,更换多套CSS么?那多费劲,那么使用一招快速变更页面为灰色,等清明节过完了,就可以恢复主要是给html标签加个样式html.gray { -webkit-filter: grayscale(.95);}其兼容性写法为html { -webkit-filter: grayscale(100%); -moz-filter: grays...原创 2020-04-08 13:23:08 · 441 阅读 · 0 评论 -
loading.js
/*** 将此js文件放在所以页面引入的其他js文件上方*/// 加载HTML图var _LoadingHtml = '<div id="loadingDiv" style="position:fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 99999;"><div style="position: fixed;to...原创 2020-03-04 11:51:07 · 506 阅读 · 0 评论 -
关于使用HTML5本地存储图片的介绍——和派孔明
关于使用HTML5本地存储图片的介绍——和派孔明原创 2016-07-05 09:17:19 · 4290 阅读 · 0 评论 -
移动开发,touchstart轮播图,移动端拖拽应用
touchstart,移动开发,拖拽应用,手机轮播图原创 2016-06-20 21:17:14 · 2621 阅读 · 0 评论 -
注册获取验证码倒计时DEMO
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>注册获取验证码倒计时DOME</title><script src="js/jquery-1.4.2.min.js"></script><script src="js/Pandora.AutoSize.js"></script><scrip原创 2016-09-12 11:34:36 · 3919 阅读 · 0 评论 -
jquery无缝轮播图
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jquery轮播图</title><script src="./jquery-1.8.0.min.js" type="text/javascript"></script><script typ转载 2016-09-13 23:09:02 · 801 阅读 · 0 评论 -
懒加载图片
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>懒加载图片</title><style>div{ margin-top:300px; width:470px; height:150px; border:1px #000 solid;}原创 2016-10-03 18:20:29 · 376 阅读 · 0 评论 -
JQ获取鼠标的键值
<div id="div1"> <span id="span1">span</span></div><script>$(function(){ $('#span1').on('mousedown',function(ev){ alert(ev.which); }); });</script>原创 2016-10-05 23:09:37 · 593 阅读 · 0 评论 -
javascript,一幅图让你看懂DIV拖拽
和派孔明——前端工程师" />DIV拖拽解析*{ margin:0; padding:0; list-style:none; font-family: "微软雅黑","张海山锐线体简"}#div1{width:200px;height:200px; background:red; position:absolute;left:0;top:0;}window.onload=funct原创 2016-03-31 22:12:39 · 684 阅读 · 0 评论 -
html5将文字生成图片
本文链接:https://blog.csdn.net/qq_30100043/article/details/76549377由于canvas能够将画布上的纹理生成数据给img显示出来,所以,我们在html5里面可以实现将文字生成图片显示。首先我书写了一个将文字绘制到canvas上面的函数,然后函数会返回canvas绘制的纹理数据。//绘制文字到canvas,判断换行位置,和设置c...转载 2019-08-15 21:28:11 · 1603 阅读 · 0 评论 -
全屏滚动,微场景,H5全屏切换滚动页面制作的方法介绍
很多人找了很久,都没找到一款好用的H5全屏滚动插件,而H5全屏滚动又是一个常用的技术,常用于移动端的营销推广,虽然现在有很多类似易企秀之类的合成软件,除了数据没法对接到自己平台之外,收集用户数据也有被平台运营方获取的风险。所有我们今天自己查找了一款全屏滚动插件,就是swiper,很多人乍一看,swiper这么的API一下就蒙圈了,这里我做了一下简要的提炼,方便你快速上手,H5移动端全屏滚动动画的制作原创 2016-07-25 11:53:37 · 11640 阅读 · 0 评论 -
淡入淡出轮播(banner),自动按图片个数生成居中按钮——和派孔明
淡入淡出轮播(banner),自动按图片个数生成居中按钮/* 1、JQuery带左右按钮淡入淡出轮播 2、轮播图根据图片数量自动生成按钮个数 3、在宽高不确定的情况下,居中元素 注:不管是菜鸟还是大神,若有bug,及时联系交流,QQ 2766588380; 闻道有先后,术业有专攻,所有的大神都是从菜鸟的道路上走出来的 */<!DOCTYPE html><html lang="en">原创 2016-06-16 15:04:51 · 1680 阅读 · 0 评论 -
轮播图系列教程(四)自动切换,定时器应用——和派孔明
轮播图 函数调用及闭包应用*{margin:0;padding:0;list-style:none;font-family:"微软雅黑";}.box{width:1000px;height:409px;border:7px solid #ccc;margin:0 auto;}.box ul{list-style:none;}.box ul li{display:none;}/*隐藏所有的原创 2016-04-02 15:18:04 · 455 阅读 · 0 评论 -
轮播图系列教程(三)函数调用及封闭空间形式案例——和派孔明
轮播图 函数调用及闭包应用*{margin:0;padding:0;list-style:none;font-family:"微软雅黑";}.box{width:1000px;height:409px;border:7px solid #ccc;margin:0 auto;}.box ul{list-style:none;}.box ul li{display:none;}/*隐藏所有的原创 2016-04-02 15:02:13 · 522 阅读 · 0 评论 -
轮播图系列教程(二)选项卡思维——和派孔明
*{margin:0;padding:0;list-style:none;font-family:"微软雅黑";}.box{width:1000px;height:409px;border:7px solid #ccc;margin:0 auto;}.box ul{list-style:none;}.box ul li{display:none;}/*隐藏所有的li*/.box ul li原创 2016-04-02 14:50:24 · 785 阅读 · 0 评论 -
javaScript简易运动框架封装——和派孔明
//javascript简易运动框架封装原创 2016-03-31 22:23:50 · 691 阅读 · 0 评论 -
轮播图系列教程(一)——和派孔明
//简易左右切换轮播图系列教程(一),欢迎阅读javascript轮播图系列教程,本教程将由简单到复杂逐布实现轮播图效果。*{margin:0;padding:0;list-style:none;}img{border:none;}body{background:#ecfaff;}.box{width:1000px;height:409px;overflow:hidden;positio原创 2016-04-02 12:30:57 · 718 阅读 · 0 评论 -
jQ模拟逐帧动画动画
百度云盘demo下载 提取密码:qjxx *{margin:0;padding:0;list-style:none;}.div1{margin:100px auto;width:242px;height:137px;background:url(bao.png) 0 0;}.div2{margin:100px auto;width:242px;height:137px;b原创 2016-06-29 13:02:16 · 4496 阅读 · 0 评论 -
文字无限无缝滚动效果——和派孔明
文字无限无缝滚动效果——和派孔明<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title><style>*{margin:0;padding:0;list-style:none;}#div1{width:100px;height:20px;margin:0 auto;overflo原创 2016-06-13 21:08:59 · 3357 阅读 · 0 评论 -
Jquery文字滚动效果
*{margin:0;padding:0;list-style:none;}#div1{width:100px;height:20px;background: red;overflow: hidden;position: relative;}#div1 ul{width:100px;background: red;position: absolute;top:0;}#div1 ul li{w原创 2016-06-15 00:19:50 · 681 阅读 · 0 评论 -
animate.css动画库使用方法介绍
animate.css动画库简介 Animate.css是由Dan Eden的Daniel Eden使用CSS3的animation制作的动画效果的CSS集合。 它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。换句原创 2016-07-13 16:45:52 · 7732 阅读 · 0 评论 -
在div宽高不确定的情况下,使其居中[轮播图点击按钮常用]——前端工程师和派孔明
*{margin:0;padding:0;list-style:none;}.div1{/*width:100%;*/}.div1 ul{position:relative;left:50%;float:left; clear:both;margin-bottom:2px;}.div1 ul li{position:relative;left:-50%; float:left;margi原创 2016-06-16 13:32:21 · 1265 阅读 · 0 评论 -
轮播图系列教程(五),左右切换,运动框架应用——和派孔明
幻灯片左右滑动效果 - 和派孔明 高级前端工程师* { padding: 0; margin: 0; }li { list-style: none; }img { border: none; }body { background: #ecfaff; }.box { width: 470px; height: 150px; overflow: hidden; position: re原创 2016-04-02 15:31:23 · 1004 阅读 · 0 评论