自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(27)
  • 收藏
  • 关注

原创 微信小程序弹幕墙(祝福墙)

为了解决左右弹幕重叠问题,也是找了网上挺多案例,最后都不行,最后利用四个数组来解决这是个祝福墙,用户发送弹幕到后台审核,审核通过显示在前端<!-- 弹幕墙 --><view class="barrage" wx:if="{{IsPush}}"> <view class="barrage-a"> <view class="barrage-b"><image src="../../images/img/a-13.png"></im

2020-11-17 17:31:41 1925 4

原创 swiper结合gsap进行切换

网页滚动到mySwiper时,启用gsap,固定轮播图,当切换完后,继续进行网页滚动。// 创建动画的时间轴,使用ScrollTrigger的onUpdate。// 开启擦除效果,使滚动更加平滑。// 更新Swiper的当前幻灯片。// 根据实际情况修改。// 防止索引超出范围。

2024-07-13 16:18:58 626

原创 通过城市名,实现按照A,B,C,D...排序

【代码】通过城市名,实现按照A,B,C,D...排序。

2024-04-29 10:14:31 476

原创 天地图-坐标拾取

在网页使用高德,百度地图这些时,会因为没有购买他们的使用版权,从而出现以下水印,因此需要换一个地图-天地图天地图官方文档:http://lbs.tianditu.gov.cn/然而天地图并不像其他地图一样这么方便,比如没有可以通过地址搜索,直接可以获取坐标的,因此可以小改动一下,方便自己使用。

2024-03-26 10:40:34 2564 1

原创 canvas绘制时,画布上有一个镂空的圆形(即背景可见),然后随着动画的进行,这个圆形的边界逐渐扩大至充满整个屏幕

在不同宽高比的屏幕上,如果canvas元素没有被强制保持与窗口同样的宽高比(例如通过CSS设置其宽度和高度百分比或者响应式布局),那么即使绘制的是一个完美的圆,但由于canvas自身的拉伸或压缩,最终呈现出来的效果可能看起来像椭圆。为了确保无论屏幕尺寸如何都能看到一个真正的圆形,你需要确保canvas元素的宽高比始终是1:1,并且它的中心点与浏览器视窗的中心点对齐。// 获取canvas的宽度和高度。// 动画持续时间(毫秒)// 计算当前扩散到的半径。// 恢复默认的混合模式。// 判断是否动画完成。

2024-03-16 14:21:37 597

原创 Canvas实现新旧图片对比

canvas实现两张图合并成一张对比图

2023-12-21 09:52:51 410

原创 jszip实现批量下载mp4、psd、jpg等各种类型文件,并压缩导出

jszip实现批量下载mp4、psd、jpg等各种类型文件,并压缩导出

2023-12-14 09:31:41 1244

原创 前端模拟新闻列表ajax请求 mocky

前端使用mocky模拟ajax请求新闻列表数据

2023-12-02 16:39:25 505

原创 检验身份证(包含港澳台)

/由于不确定香港身份证号是填写C668668(9),还是C6686689,所以两个都通过了。https://tw.bmcx.com/ (便民查询网)// 对前17位数字与权值乘积求和。// 检验第18为是否与校验码相等。台湾身份证号:A204144891。香港身份证号:Q3317605。"请填写正确的身份证号码!// 计算模(固定算法)// 香港身份证校验。// 澳门身份证校验。// 台湾身份证验证。

2023-09-11 14:24:09 491

原创 腾讯地图实现点聚合,鼠标经过当前点显示项目详情,兼容移动端

腾讯地图实现点聚合,鼠标经过当前点显示项目详情,兼容移动端

2023-08-24 10:30:52 926 1

原创 实现echart中国地图 ,点击城市名称,相对应的点出现当前动画

/ symbol: iconRQ,//自定义图标。// 涟漪特效动画中波纹的最大缩放比例。//是否开启鼠标缩放和平移漫游。// 这里是接口数据!// 涟漪特效的波纹绘制方式。// 涟漪特效的动画周期。

2023-08-22 16:21:38 382 1

原创 实现echart深圳地图坐标显示

echart点击深圳区域高亮,通过坐标自动添加定位点

2023-08-21 18:04:01 851

原创 使用gsap实现网页滚动,通过滚动条播放视频

使用gsap实现第二屏通过滚动条播放视频

2023-07-06 16:37:21 544 1

原创 使用gsap实现网页滚动卡屏效果

gsap实现网页滚动卡屏效果

2023-07-06 14:22:33 602 1

原创 高德地图H5内嵌小程序遇到的跳转地图问题

高德地图H5内嵌小程序遇到的跳转地图问题

2022-12-03 11:16:36 2425 11

原创 大话主席jquery.SuperSlide电脑端支持拖拽移动端支持滑动

使用时,修改slider=$(’.ban’);改成你的class或id值,ismousedown = true要是不想使用的到时候,直接改成false就禁用了电脑端拖拽代码if(ismousedown = true){let _start=0,_end=0,slider=$('.ban');slider.on('mousedown',function(e){if(e.button==0){_start=e.clientX-slider.offset().left;}});slider.on('m

2021-09-04 17:04:10 481

原创 笔记本电脑下网页适配放大百分百比例

@media all and (-moz-min-device-pixel-ratio: 1.19) and (-moz-max-device-pixel-ratio: 1.28),(-webkit-min-device-pixel-ratio: 1.19) and (-webkit-max-device-pixel-ratio: 1.28),(min-resolution: 1.19dppx) and (max-resolution: 1.28dppx) {}@media all and (-m

2021-06-21 15:18:27 340

原创 小程序判断滚动条

//监听屏幕滚动 判断上下滚动onPageScroll: function (ev) { var _this = this; //当滚动的top值最大或者最小时,为什么要做这一步是由于在手机实测小程序的时候会发生滚动条回弹,所以为了解决回弹,设置默认最大最小值 if (ev.scrollTop <= 0) { ev.scrollTop = 0; console.log("到顶部") this.setData({ comShow: false }); } el.

2021-04-29 11:24:20 728

原创 小程序列表页面多视频播放,只允许当前视频播放

<view class="Wrapper-a"> <view wx:for="{{sideUrls}}" wx:key="hhh" class="side-a " data-index='{{index}}'> <view class="video "> <video controls="{{true}}" videoindex="{{item.id}}" show-center-play-btn="{{false}...

2021-04-23 21:04:54 3715

原创 html2canvas制作移动端分享海报功能

第一次使用html2canvas,参考了别人的案例,解决了在移动端生成的截图模糊问题,canvas动态二维码截图失败的问题海报效果图<!-- 生成的海报 --><div id="capture"> <div class="box" id="hidden_capture"> <div class="box-a"> <img class="ico-logo" src="../images/logo2.p

2021-04-02 10:12:52 697

原创 常用正则表达式

###### 正整数验证<br> ^((0?[1-9])|((1|2)[0-9])|30|31)$<br>``######2. 身份证号码验证<br>const reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;<br>``######3. 手机号码验证<br>const reg = .

2020-12-21 16:12:08 149

原创 解决百度地图,一键跳转导航遇到移动端无法触发的问题

公司移动端需要加上以下js//触摸移动时触发此事件 此时开启可以拖动。虽然刚初始化该地图不可以拖动,但是可以触发拖动事件。map.addEventListener(“touchmove”, function (e) {map.enableDragging();});//触摸结束时触发次此事件 此时开启禁止拖动map.addEventListener(“touchend”, function (e) {map.disableDragging();});map.disableDragging

2020-12-01 11:43:45 667

原创 微信小程序版本更新提示

最好在第一版本加上onLaunch () { if (!wx.canIUse("getUpdateManager")) return; let updateManager = wx.getUpdateManager(); // 获取全局唯一的版本更新管理器,用于管理小程序更新 updateManager.onCheckForUpdate(function(res) { // 监听向微信后台请求检查更新结果事件 if (res.hasUpdate) { upda

2020-11-17 17:20:03 928

原创 微信小程序分享好友功能

微信小程序分享功能 onShareAppMessage: function () { console.log(app.globalData.openPages) console.log("gegeg") var that = this; that.setData({ actionSheetHidden: !that.data.actionSheetHidden }) return {

2020-11-05 17:18:25 722

原创 解决ios手机端软键盘呼出,影响底部固定定位导航问题

在ios手机端中,软键盘呼出会影响手机端固定定位导航的位置,所以让它在软键盘呼出时隐藏

2019-08-06 16:22:21 789

原创 “返回顶部代码”滑动效果 jQuery写法

KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲TOP').click(fun…(‘html,body’).animate({scrollTop: ‘0px’}, 800);return false;});发现用html(添加超链接#top)的添加方法,有点生硬,所以考虑用 jQuery(只需要输入这行代码,就可以添加...

2019-06-09 11:12:32 160

原创 css3实现一个动画效果,鼠标移入画面向上移动

鼠标移入画面向上移动#今天老板去香港谈项目了,我也是刚刚进来公司不久,最近完成了个项目,就随手写一些东西来(本人实习生,还没毕业,经验不足之处,希望大家提出)网页初始状态(附图):网页最后状态(附图):下面是css代码:.a{width: 300px;height: 300px;overflow: hidden;position: relative;background-c...

2019-05-31 18:07:25 10053

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除