vue移动端 滚动 鼠标按下效果
- <div class="item" :id="item.RowID" @touchstart="touchstart(item.RowID)" @touchend="touchend(item.RowID)" v-for="(item,index) in dataList" :key="item.RowID" @click.stop="onview(item.RowID)">
- ***
- </div>
- touchstart(id){
- document.getElementById(id).classList.add('item-touch');
- // console.log('touchstart');
- },
- touchend(id){
- // console.log('touchend');
- document.getElementById(id).classList.remove('item-touch');
- },
- .item {
- margin: 5px;
- border-radius: 10px;
- background: white;
- border-style: ridge;
- border-width: 2px;
- border-color: white;
- border-left-style: none;
- border-right-style: none;
- &.item-touch{
- background: #eeeeee;
- }
- }
//添加点击效果
function FunDJXG(o) {
o.on("touchstart", function () {
$(this).addClass("clickResponse");
});
o.on("touchend", function () {
$(this).removeClass("clickResponse");
});
},
js调用:
//添加点击效果
var clickResp = $(".jia,.jian,.Car_Area,.History");
FunDJXG(clickResp);
样式css:
.clickResponse { background-color: #227dc3; opacity: 0.5; }
vue移动端 滚动 鼠标按下效果的更多相关文章
- 模拟鼠标向下滚动 http://bbs.2ccc.com/topic.asp?topicid=461769
我想模拟鼠标滚轮,下面的代码能向上滚动,怎么样下向滚动啊 mouse_event( MOUSEEVENTF_WHEEL,0,0,WHEEL_DELTA,0); 我把参数设置为mouse_event( ...
- JS判断鼠标向上滚动还是向下滚动
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...
- 利用伪元素和css3实现鼠标移入下划线向两边展开效果
一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的. 二.实现: 1.首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设 ...
- 转帖 利用伪元素和css3实现鼠标移入下划线向两边展开效果
原帖地址 https://www.cnblogs.com/yangjunfei/p/6739683.html 感谢分享 一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度 ...
- Vue项目移动端滚动穿透问题
概述 今天在做 Vue 移动端项目的时候遇到了滚动穿透问题,在网上查资料后,选取了我觉得最好的方法,记录下来供以后开发时参考,相信对其他人也有用. 上层无需滚动 如果上层无需滚动的话,直接屏蔽上层的 ...
- 基于jquery鼠标或者移动端滚动加载数据
基于jquery鼠标或者移动端滚动加载数据 var stop = true; // 防止重复请求数据 $(window).scroll(function () { totalheight = pars ...
- [vue] vue服务端渲染nuxt.js
初始化 使用脚手架工具 create-nuxt-app 快速创建 npx create-nuxt-app <项目名> npx create-nuxt-app 执行一些选择 在集成的服务器端 ...
- 【JS】341- 移动端滚动穿透的6种解决方案
前言 相信能看到这篇文章的你,已经是遇到了这个问题.我就不gif展示问题效果了. 鉴于此问题是面试的常客,故特地针对滚动穿透这个疑难杂症,整理了六个解决方案. 各方法操作难易不同,分别针对弹层和bod ...
- 很全的vue插件汇总,赶紧收藏下(转)
Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...
随机推荐
- java语言中public、private、protected三个关键字的用法,重写和重载的区别。
java语言中public.private.protected三个关键字的用法,重写和重载的区别. 解答: 作用域 当前类 同包 子类 其它 public √ √ √ √ protected √ √ ...
- HSV和HSI区别
HSV (色相hue, 饱和度saturation, 明度value), 也称HSB (B指brightness) 是艺术家们常用的,因为与加法减法混色的术语相比,使用色相,饱和度等概念描述色彩更自然 ...
- Innodb间隙锁,细节讲解(转)
关于innodb间隙锁,网上有很多资料,在此不做赘述,我们讲解一下关于innodb的间隙锁什么情况下会产生的问题. 网上有些资料说innodb的间隙锁是为了防止幻读,这个论点真的是误人子弟.了解inn ...
- Integer自动装拆箱
public static void main(String[] args) { Integer a1 = 1; Integer a2 = 1; Integer b1 = 127; Integer b ...
- [LintCode] A + B 问题
Bit-by-Bit summation: class Solution { public: /* * @param a: The first integer * @param b: The seco ...
- ASP.Net请求处理机制初步探索之旅 - Part 2 核心(转)
开篇:上一篇我们了解了一个请求从客户端发出到服务端接收并转到ASP.Net处理入口的过程,这篇我们开始探索ASP.Net的核心处理部分,借助强大的反编译工具,我们会看到几个熟悉又陌生的名词(类):Ht ...
- 使用ServiceStack缓存技术
ServiceStack 是一个高性能的 .NET Web 服务框架,简化了开发 XML.JSON.JSV 和 WCP SOAP Web 服务.它定义了符合 Martin Fowlers 数据传输对象 ...
- android 反汇编一些资料
Android软件安全与逆向分析 http://book.2cto.com/201212/12432.html Smali--Dalvik虚拟机指令语言 http://blog.csdn.net/ ...
- Cutoff frequency
Cutoff frequency - Wikipedia https://en.wikipedia.org/wiki/Cutoff_frequency In physics and electrica ...
- 以K个为一组反转单链表,最后不足K个节点的部分也反转
package StackMin.ReverseList_offer16; public class ReverseKgroup_extend_offer16 { /** * 分组反转单链表,最后不足 ...