查看演示 website 立即下载 插件描述:bootstrapimagehover是一款基于Bootstrap的css3图片hover效果。这组图片hover效果共16种特效。同时该特效也支持非Bootstrap版本。 使用方法 在页面中引入bootstrap相关文件和FontAwesome字体图标文件以及effects.min.css文件。 <link href=”css/bootstrap.min.css” rel=”stylesheet”> <link href=”css/font-awesome.min.css” rel=”stylesheet”> <link href=”css/effects.min.css” rel=”stylesheet”> HTML结构 该css3图片hover效果的每一种效果都有它们自己的HMTL结构,第一种效果的HTML结构如下: <div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″> <div class=”hover ehover1″> <img class=”img-responsive” src=”images/girl.jpg” alt=””> <div class=”overlay”> <h2>Hover effect 1</h2> <button class=”info” data-toggle=”modal” data-target=”#modal1″>Show code </button> </div> </div> </div> 在DEMO示例中,使用鼠标滑过图片,在hover效果中点击 show code 链接,可以弹出该效果的模态窗口,可以直接复制后使用该效果。 如果你不需要Bootstrap的支持,只需要将顶级div中的col-* class类去掉即可。 CSS样式 第一种效果的CSS样式如下: .hovereffect { width:100%; height:100%; float:left; overflow:hidden; position:relative; text-align:center; cursor:default; } .hovereffect .overlay { width:100%; height:100%; position:absolute; overflow:hidden; top:0; left:0; opacity:0; background-color:rgba(0,0,0,0.5); -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out } .hovereffect img { display:block; position:relative; -webkit-transition:all .4s linear; transition:all .4s linear; […]
查看演示 website 立即下载 插件描述:插件由css+jquery开发,需引入jquery 更新时间:2022-12-25 23:18:16 类名和样式没做封装,类名和结构尽量不要乱动,其中demo1为自定义类名可以随意更改,插件的结构如下: <div class=”panClip demost1″> <div class=”clipBox”> <div class=”clipLeft”></div> <div class=”clipRight width-none”></div> </div> <div class=”percentage”>0%</div> <div class=”circular”></div> <div class=”corest”> <div class=”circular”></div> </div> </div> 圆和圆环的大小样式js不好改,所以圆环粗细样式要自己根据下面公式改一下: 圆环粗细公式:(外圆-内圆) / 2,所以现在圆环有20px((300 – 260) / 2 = 20); 样式示例: .demost1 { width: 300 px!important;height: 300 px!important; }.demost1.percentage { width: 260 px!important;height: 260 px!important; } 使用方法如下: 1. 先获取自定义类名(也可以写panClip不过获取所有的圆形进度条) 示例如下: let demost1 = $(‘.demost1′).eq(0); 2. 调用panClip()函数, 参数1:获取到的自定义类元素节点, 参数2:进度条进度(不要加’%’), 参数3:进度条颜色(‘#ff0000’) 示例如下: panClip(demost1, 45,’#ff0000′ );
查看演示 website 立即下载 插件描述:简单的css+html 灯笼摆动动画 更新时间:2022-07-18 02:44:46
查看演示 website 立即下载 插件描述:新手第一次写,有什么问题欢迎反馈~ 更新时间:2022-07-18 02:28:07 更新说明:修改了图片,避免不必要的问题! 更新时间:2022-07-15 00:37:58 将上面这段javascript代码复制到代码底部,轮播图的代码要在他上面最好放在文档开头head部分。
查看演示 website 立即下载 插件描述:模拟地球转动实现一组动态数据球体围绕中心球体转动的模型 更新时间:2022-04-24 23:26:05 更新说明:为每个小球添加点击事件 更新时间:2022-04-21 00:20:05
查看演示 website 立即下载 插件描述:通过js实现瀑布流布局带预加载效果 更新时间:2022-07-15 00:21:02
查看演示 website 立即下载 插件描述: html,css,jquery 实现打地鼠游戏,该demo封装性强,注释详细,功能丰富,能让许多前期学习的人快速上手 更新时间:2022-05-04 23:28:25 此游戏代码结构清晰、注释全,非常适合学习参考 介绍 – css 采用 rem 单位,自适应各种手机端屏幕 – 设有游戏背景、打击效果、游戏通过、游戏失败多种背景乐和音效增加趣味性 – 识别病毒与苹果,打击病毒扣减相应的分数,打击苹果不增加分数
查看演示 website 立即下载 插件描述:简单实用的ets 3D柱状图 酷炫 更新时间:2022-04-21 00:35:00 使用特别简单: 1.页面引入 jquery.min.js 和 echarts.min.js 2.html <div id=”chart”></div> 把图表放到这个容器div里面 ,设置id=”chart” 3.给容器设置样式宽高 <style> #chart {width: 1000px; height: 400px; } </style> 4.就是开始画3d柱状图的代码了,详情请见附件
查看演示 website 立即下载 插件描述:简单好用的jQuery Excel导出插件table2excel 使用方法 在页面中包含 jquery 和 table2excel <script src=”jquery.min.js”></script> <script src=”jquery.table2excel.min.js”></script> 使用插件 $(“#yourHtmTable”).table2excel({ exclude: “.excludeThisClass”, name: “Worksheet Name”, filename: “SomeFile.xls”, // 是否包含扩展名 preserveColors: false // 如果要保留背景颜色和字体颜色,请设置为 true });
查看演示 website 立即下载 插件描述:图片展示支持本地图片和在线图片,勾选支持单选和多选,同时支持初始化赋值,支持图片的在线缩略图和大图展示 更新时间:2022-04-24 22:50:25 更新说明:增加随机图片新增演示功能,增加说明截图 更新时间:2022-04-21 22:46:48 导入js和css文件 <link rel=”stylesheet” type=”text/css” href=”css/style.css” /> 创建html <div class=””> <button onclick=”deleteImg()” class=”btn btn-danger radius”>批量删除</button> <button onclick=”addimg()” class=”btn btn-primary radius”>增加图片</button> <button onclick=”getData()” class=”btn btn-primary radius”>获取选中的图片</button> </div> <div class=”cl imglist” id=”img_ul”></div> 初始化对象属性 使用过程中有任何问题可以加我wx:Luu806211854