vue实现跑马灯效果案例

vue实现跑马灯效果案例

本文我们利用 v-on 来实现一个简单的跑马灯效果,就是如下这种效果:Vue跑马灯效果1 分析点击"加油"按钮绑定一个点击事件,使用v-on或者缩写:"@"在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 msg 字符串,然后 调用 字符串的 substring 来进行字符串的截取操作,把 第一个字符截取出来,放到最后一个位置即可;为了实现点击下按钮,自动截取的
浏览:154 标签: vue 跑马灯 时间: 2019-08-21 9:41
vue封装Swiper实现图片轮播

vue封装Swiper实现图片轮播

一、Swiper在实现封装之前,先介绍一下Swiper。(1) Swiper是纯Javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。(2) Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。(3) Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择。(4) Swiper的应用场景广泛,实现效果很好,下面
浏览:136 标签: vue swiper 轮播 时间: 2019-08-21 9:30
js生成唯一的id(标识符)

js生成唯一的id(标识符)

需求:js生成不重复标识符 id。方式一var uuid = formatDateTime() +Math.random().toString(36).substr(2);functionformatDateTime(){var date =newDate();var y = date.getFullYear();var m = date.getMonth() +1;
浏览:877 标签: id 标识符 js 时间: 2019-02-12 14:12
vue实现红包雨效果,复制代码就能用

vue实现红包雨效果,复制代码就能用

代码部分<template><divclass="rainBox"><divclass="countDown"v-if="secondMask"><imgclass="second":src="'https://img.51fanbei.com/h5/app/activity/redRain_0'+second+'.png'" ></div><divv-if="!seco
浏览:1119 标签: vue 红包雨 时间: 2019-01-31 11:33
使用clipboard.min.js实现一键复制内容,且支持移动端

使用clipboard.min.js实现一键复制内容,且支持移动端

1、clipboard.min.js文件CND地址:    https://www.bootcdn.cn/clipboard.js/2、clipboard.js 官网:    https://clipboardjs.com/3、利用clipboard.js实现复制几种方式(1)方式一:target<!DOCTYPE html><htmllang="en"><head>
浏览:965 标签: clipboard 复制 时间: 2018-12-18 13:14
js字符串按固定长度分割(substr)

js字符串按固定长度分割(substr)

今日有个小需求:实现银行卡号每个四位加一个空格。实现代码:// number:传入的字符串// grap:间隔的位数changeNumber(number,grap){    let arr = [];    let count =0;    for(let i=0,len=number.length/grap;i<len;i++) {        let s
浏览:866 标签: substr 字符串 js 时间: 2018-12-12 17:56
js判断ios系统/iphoneX/安卓系统

js判断ios系统/iphoneX/安卓系统

判断手机设备是ios系统,还是安卓(android)系统,或者是iphone。functiongetMobileSystem(){var u = navigator.userAgent;var isAndroid = u.indexOf('Android') >-1 || u.indexOf('Adr') >-1;//android系统var isiOS = !!u.match
浏览:891 标签: iphoneX ios 安卓 时间: 2018-11-20 14:30
vue中使用html2canvas及解决html2canvas截屏图片模糊问题

vue中使用html2canvas及解决html2canvas截屏图片模糊问题

最近在项目中用到了html2canvas插件,发现将html代码生成img图片后,特别模糊。于是查了很多资料,发现有一个直接修改html2canvas源码能达到要求。html2canvas  官方网站http://html2canvas.hertzen.com/index.html。这是一个js截屏插件,在前台利用h5的canvas  将html的内容显示在canvas上,
浏览:1755 标签: html2canvas 时间: 2018-10-26 19:00
js canvas实现将html页面或div生成图片

js canvas实现将html页面或div生成图片

参考文章:js实现截图并保存图片在本地(html转canvas、canvas转image)html2canvas.js和canvas2image.js的下载地址:    html2canvas.js: http://html2canvas.hertzen.com/dist/html2canvas.min.js    canvas2image.js: https://git
浏览:1477 标签: canvas js 时间: 2018-10-24 11:27
使用canvas将图片转换成base64格式

使用canvas将图片转换成base64格式

注意:canvas绘制图片,由于浏览器的安全考虑,如果在使用canvas绘图的过程中,使用到了外域的图片资源,那么在toDataURL()时会抛出安全异常:Uncaught SecurityError: Failed to execute'toDataURL' on'HTMLCanvasElement': Tainted canvases may not be exported
浏览:810 标签: canvas base64 时间: 2018-10-24 11:19
css实现背景图片充满整个屏幕

css实现背景图片充满整个屏幕

css代码html{height:100%;}body{width:100%;height:100%;background:url("https://f.51fanbei.com/h5/app/activity/2018/07/buy_bg.png") center center no-repeat;background-attachment: fixed;backgroun
浏览:794 标签: css 时间: 2018-10-24 10:35
js/jq代码实现鼠标点击文字有趣特效

js/jq代码实现鼠标点击文字有趣特效

效果展示JQuery代码部分<script type="text/javascript">/* 鼠标特效 */var a_idx =0;jQuery(document).ready(function($){ $("body").click(function(e){var a =newArray("富强","民主","文明","和谐","自由","平等","公正" ,"
浏览:827 标签: 文字 时间: 2018-10-10 10:12

邮箱快速注册

忘记密码