栏目: CSS/HTML

实现文字跑马灯效果

思路:1.判断文字的长度和容器的长度,如果文字长度大于容器长度,则开始滚动,否则不滚动。2.获取滚动条到元素左边的距离,递归滚动,直到滚动后的距离等于文字的长度退出递归。判断文字和容器的长度可以通过offsetWidth来判断。如果文字长度大于容器长度,则开始滚动。window.onload=fun...

2021-06-21 174 0 0 阅读全文

原生JS实现无缝轮播图案例

运动插件functionanimove(obj,distance,speed,callback){//调用的变量目标距离速度回调函数clearInterval(obj.timer);obj.timer=setInterval(function(){letstep=(distance-obj.offs...

2021-06-21 180 0 0 阅读全文

微信小程序实现文字滚动

本文实例为大家分享了微信小程序实现文字滚动的具体代码,供大家参考,具体内容如下wxml:显示完后再显示:{{text}}出现白边后即显示:{{text}}{{text}}wxss:.example{display:block;width:100%;height:100rpx;}.box{width:...

2021-03-16 248 0 0 阅读全文

微信小程序实现多行文字滚动效果

本文实例为大家分享了微信小程序实现多行文字滚动的具体代码,供大家参考,具体内容如下wxmlwxssswiper-item{height:100%;}js//index.js//获取应用实例importapifrom"../../utils/api.js"vartoken=''co...

2021-03-16 276 0 0 阅读全文

HTML Iframe标签用法案例详解

iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站的内容,为了更好的效果,可能需要使iframe透明效果,那么就需要了解更多的iframe属性。1、iframe定义和用法 iframe元素会创建包含另外一个文档的内联框架(即行内框架)。HTML与XHTML之间的差异在HT...

2021-09-13 162 0 0 阅读全文

如何在微信小程序中使用Less详解(最优方式)

写惯了less/sass,但是现在开发小程序缺还是css,很不习惯。在网上搜的教程,要么是gulp,要么就是vscode的Easy-less的插件。传统方式我们来对比,这两种方式的优劣。Gulp前者要对于gulp有简单的了解,但是现在大道其行的webpack来说,gulp用的人也越来越少,而且具有一...

2021-03-18 291 0 0 阅读全文

微信小程序用户授权获取手机号(GetPhoneNumber)

小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码。有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触发才能调用的,比如getPhoneNumber。实现思路:1、通过wx.login获取code,从而获取到用户的openID...

2021-03-18 283 0 0 阅读全文

微信小程序开发篇之踩坑记录

最近参与开发了公司的第一款小程序,开发体验基本类似于基于webview的混合式开发,可以调用官方强大的api,但也有一些坑或者说不习惯的地方。这篇文章从实用性出发,记录了开发过程中的一些问题:1.样式优先级混乱在使用button组件时,发现在class中设置width不生效,下面贴上代码:.my-b...

2021-03-18 422 0 0 阅读全文

微信小程序里长按识别二维码的实现过程

我们都知道公众号里的二维码可以长按识别,但是小程序限制比较严格,没有办法实现二维码的长按识别,一直以来我都是这样认为的,微信的官方规则里也是这么写的,直到今天上午,我无意间发现一个小程序里的二维码居然可以长按识别,于是就好奇的去研究了一番,结果还真的可以实现小程序里长按识别二维码。不知道是官方的漏洞...

2021-03-18 217 0 0 阅读全文

Element Table HandleSpan合并单元格通用方法

element合并单元格通用方法。主要思路:对数据进行处理,写了一个getSpanData通用方法。用api中提供的span-method方法。span-method方法用法:通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列colu...

2021-07-07 379 0 0 阅读全文

不要在HTML中滥用Div

概述做前端开发的同学都知道,一个网页的基本组成部分是HTML,JavaScript和CSS。开发人员通常更关注JavaScript和CSS,实践着各种语言规范和设计模式。对于HTML的关注度则明显偏少,只要能做出设计师画的界面就万事大吉了,不怎么去关心HTML是不是规范合理。于是下面的情况随处可见:...

2021-05-08 207 0 0 阅读全文

微信小程序实现走马灯效果实例

这是关于小程序类的,小程序上手程度相对容易,生态圈也比较成熟了,基本上看官方文档api就可以满足大部分的需求了。日常开发中,我们经常会遇到文字横向循环滚动的效果,俗称走马灯,也是项目中经常会使用的一个功能。在网页web前端很常见,今天就介绍下小程序的实现方式,一种是用的css样式实现,另一种是运用小...

2021-03-17 166 0 0 阅读全文

Elementui的El-Popover修改样式不生效的解决

el-popover如何修改样式?在使用element-ui的时候,有一个常用的组件,那就是el-popover,但是element-ui官方文档中样式跟用法都比较局限,在使用时都需要改动样式但是问题来了,今天同事改着改着突然发现添加的层叠样式并不生效,只有添加内联样式才能生效,不应该呀?!且看了d...

2021-07-01 345 0 0 阅读全文

H5实现手机拍照和选择上传

1.html/js代码:/**拍照*@param{Object}c*@param{Object}d*/varupload=function(c,d){"usestrict";var$c=document.querySelector(c),$d=document.querySele...

2021-07-06 296 0 0 阅读全文

微信小程序实现根据日期和时间排序功能

一、最近接手了一个小程序的项目,有这样一个需求要对列表进行日期和时间的排序,于是小试牛刀,操作了一番,终于搞出来,在这里给大家总结分享一下经验,希望对大家有一定的帮助。二、需求分析(这是已完成的效果)这里有具体的日期时间和具体的小时时间,后端数据给我传来的是这样式的startDate:"2...

2021-09-07 131 0 0 阅读全文

Bootstrap与Pagehelper实现分页

最近做的一些小项目中,都有用到分页,需要自己去搞。就把整个分页实现整理下吧,方便自己也方便他人。前台1.引入paging.js//分页,页码导航,要求参数为一个对象functioncreatePageNav(opt){opt=opt||{};var$container=opt.$container|...

2021-06-19 134 0 0 阅读全文

微信小程序全局状态的深入讲解

在微信小程序中,可以利用App.js的globalData作为中间桥梁,在Page,Component之间,包括页面与页面,页面与组件,组件与组件之间传递需要传递的信息。但是,我们不能及时的知道globalData下的变化,在新建小程序的官方的默认事例中,获取UserInfo这一网络操作有延迟的,为...

2021-03-16 279 0 0 阅读全文

微信小程序自定义Tabbar组件

本文实例为大家分享了微信小程序自定义tabbar组件的具体代码,供大家参考,具体内容如下由于项目需求,必须自己写组件:第一步:在App.json中配置tabBar,自定也组件也必须配置,"custom":true,list里配置所有的tabbar页面。"tabBar&q...

2021-03-16 407 0 0 阅读全文

Bootstrap5的断点与容器的具体使用

1、Bootstrap5的断点1.1移动优先说到移动优先,先要提一下响应式设计,响应式界面就是设计一个页面能够适应不同的设备,响应式设计利用媒体查询等技术实现不同设备/窗口下的样式适配,也就是说它会根据你使用的不同设备展示不同的页面排版给用户。这个实现起来就是根据html5有个媒体查询技术,可以获取...

2021-07-06 307 0 0 阅读全文

HTML5 Canvas平铺的几种方法

最近在做个网站项目,用到很多canvas,有个需求是drawImage把图片画在canvas里面,图片比较小,需要平铺效果,当背景图。PS(背景图高宽10px,需要画的画布高宽200px)由于一开始是drawImage出来的,所以采用了方法onevarcanvas=document.getEleme...

2021-06-13 351 0 0 阅读全文