js效果
关注
分享
扫一扫
文章平均质量分 76
zuo-yiran
这个作者很懒，什么都没留下…
展开
-
通过background-position位移效果实现类似阿里云tab切换动画
直接上代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title><style>* { padding: 0px; margin: 0px;}body,html { width: 100%; height: 100%; margin: 0px; padding: 0px;}body { posit原创 2022-02-14 14:58:11 · 640 阅读 · 0 评论 -
echarts实现弧形（环形）进度条的具体配置
完成效果图如下：简单例子说明：任务总数为3，已完成1，未完成2。弧形进度条实现data值：data[0]:标题占固定位置为环形的25%，计算：(1+2)4/30.25=1，data[1]:已完成任务数，具体值为1data[2]:未完成任务数，具体值为2注：1、startAngle值设为315，是为了让弧形图看起来对称且标题说明占25%。2、此处用data[0]中name的值作为data[1]中具体的值来实现图示效果，即：用标题站位的name值来模仿已完成任务的具体值进行说明。随机例子说明原创 2020-07-03 16:18:34 · 5697 阅读 · 0 评论 -
使用ionic在首页新闻中应用到的跑马灯效果的实现
在app中经常会有滚动的跑马灯效果的运用，如图所示为跑马灯效果： 代码如下： html：<div class="shouRight"> <ul class="slideTopbox" slide-scroll style="top:0px;"> <li><a href="#">1.我是第1行</a></li> <li><a href="#">2.我是第2行原创 2017-02-13 15:21:58 · 2922 阅读 · 0 评论 -
完善跑马灯效果——内容长时有横向滚动效果
之前的代码实现了跑马灯的纵向的滚动效果，每条内容长度固定，如果想实现纵向加横向的滚动效果，就是说完全显示内容的话，代码如下： html代码：<div class="shouHead clear"> <div class="shouLeft"> <span class="ywxian"></span><span class="ywfont">要闻通知</span> <原创 2017-03-06 17:33:14 · 950 阅读 · 0 评论 -
echarts图表——条形图（柱状图）的动态横向显示设置
项目中要用到图表，简单地用echarts.js实现。 效果为： 是简单的无坐标轴显示的图表。 代码： html：<div id="main" style="width: 100%;"></div>js（配置）：var length=12;//此处为动态数据的长度var hei=(length*60)+'px';//动态获取图表高度$("#main").css('height',hei原创 2017-06-20 10:01:42 · 70451 阅读 · 8 评论 -
解决iscroll5的上拉下拉的回弹问题
一般在项目的列表页中，经常会用到上拉加载下拉刷新这样的效果。一般加载的数据足够多的时候，用iscroll是可以实现这个没有问题，但是当数据少的时候，占不满一屏，如何用iscroll实现如下回弹效果。 只需加上一句： min-height: 101%;就行了。 另网友建议的方法：height:calc(100% + 1px);// 不管屏幕多高，...原创 2017-08-23 15:22:44 · 4586 阅读 · 2 评论 -
解决ios倒计时失效问题（分别用setTimeout和setInterval实现）
项目中使用倒计时效果，具体实现如下： //使用的数据（获取的是时间戳）：systemTime=1554384835539 createtime=1554384824000 let now = new Date(datamsg.systemTime).getTime(); let start = new Date(datamsg.createtime).getTime();...原创 2019-04-04 21:39:59 · 5208 阅读 · 0 评论