- uniapp判定 用户 是向左滑还是向右滑
叶林染
uniapp
一个简单组件定义的该组件名称swiper-direct-com(自己可以随便命名)exportdefault{name:"swipe-direct-com",data(){return{//记录开始位置startData:{clientX:'',clientY:''},};},props:{updDistance:{//上下滑动超过多少距离触发updownDistancetype:Number,d
- 4、this指向、动画案例、封装、offset、client、scroll
@zyf哈哈哈哈
css前端javascript
一、this指向问题1、在构造函数中this指向实例化对象2、在自定义对象的函数(方法)中指向this指向当前的对象3、在普通函数中this指向window4、函数中this指向:在事件函数中this指向事件源5、在定时器函数中this指向window二、动画案例1、透明度变化:利用opacity与定时器,注意小数相减的问题##2、图片跟着鼠标走必须给图片添加定位必须写e,因为clientX是ev
- 判断鼠标不同方向进出盒子的方法
哈獭奇
默认盒子的原点在左上角,判断四个方向首先要将原点移动到盒子的中点。然后获取不同方向上的点跟中点的x,y值捕获.PNG实现的方法是:先给盒子添加鼠标移入的事件,然后获取各点距离中点的x,y值;js部分:wrapper.addEventListener('mouseenter',function(e){varx=e.offsetX-this.offsetWidth/2,//鼠标进入点相对盒子X轴的距离
- day04---DOM- 事件高级
y_1c4b
事件对象事件对象是什么?当事件触发的时候,产生的对象,该对象记录有事件相关的信息。如何获取事件对象?在事件绑定的回调函数的第一个参数就是事件对象一般命名为event、ev、e事件对象常用属性常用属性pageX/pageY:获取光标相对于页面左上角的位置key:用户按下的键盘键的值事件流什么是事件流?事件流指的是事件完整执行过程中的流动路径事件流和两个阶段说明说明:假设页面里有个div,当触发事件时
- echart图表,数据太少,不太好点
歌声缓缓
比如柱状图,数据太少,用户不好点击myChart.getZr().off('click');myChart.getZr().on('click',function(param){varpointInPixel=[param.offsetX,param.offsetY];if(myChart.containPixel('grid',pointInPixel)){//当柱状图为纵向varxIndex=
- 如何在canvas中获取鼠标位置的颜色信息
油墨风景秋卷画
canvascanvas获取颜色信息鼠标位置
往下看我们使用getImageData来获取当前位置的颜色信息getImageData拥有一个data数组,里面存放的就是我们的颜色信息varmyColor=ctx.getImageData(e.offsetX,e.offsetY,1,1)//这个方法有四个参数很显然前两个参数的鼠标的坐标,后两个参数是获取的宽高//如果只获取鼠标点击的位置颜色,1,1就可以。我们可以把这个放在任何地方(当然是和c
- JavaScript第八章 BOM
27亿光年中的小小尘埃
Windows对象全局作用域全局作用域中声明的变量,函数和方法都会变成windows的属性和方法窗口关系及框架每个框架都有自己的windows对象可通过windows.frames进行访问frames可用frameset包裹窗口位置screenLeft(screenX):窗口相对于屏幕左边screenTop(screenY):窗口相对于屏幕上边moveTo(x,y):x和y表示新位置的坐标值mov
- JS Dom Event 中的clientX、screenX、pageX、offsetX、layerX
阿敏其人
在前面的几篇文章中,我们讨论过offset、client和scroll。JSoffset系列简明教程JSclient系列简明教程JSscroll系列简明教程在这里面,我们讨论的,是DOM里面的element的属性,是window的方法。这是,关于offset、client和scroll这几个东西,还有一部分是关于Dom里Event的属性的。DomEvent中的坐标属性event.clientX/Y
- 一个可拖拽元素
AwyaW1217
javascript开发语言ecmascript
小练习:写了一个可拖拽元素,按住顶部工具条可拖动至任意位置,但不能超出浏览器边框,按照这几个步骤完成即可,并配图食用更好理解记录鼠标按下的坐标,就是⚪的坐标获取该元素的坐标,即算出矩形距离左边、顶部距离(ex,ey)鼠标按下后,监听整个屏幕的鼠标移动,可根据抬起点位坐标(e.clientX,e.clientY)计算出鼠标移动的距离移动到新位置,计算该元素至浏览器左边距离,用初始位置距离左边距离ex
- html5 draggable 随意拖动任意位置
书中自有妍如玉
前端html5前端html
functiondrag_start(event){varstyle=window.getComputedStyle(event.target,null);event.dataTransfer.setData("text/plain",(parseInt(style.getPropertyValue("left"),10)-event.clientX)+','+(parseInt(style.ge
- clientX和clientY 事件属性的使用
祈澈菇凉
需求:做项目中遇到一个这样的需求,点击属性菜单节点,出现显示框,显示框的位置随着鼠标点击的位置距离而改变。教程:clientX事件属性http://www.runoob.com/jsref/event-clientx.htmlclientY事件属性http://www.runoob.com/jsref/event-clienty.html基本定义clientX事件属性返回当事件被触发时鼠标指针向对
- JS基础学习:轮播图完善/offset系列/图片跟随鼠标
Merbng
案例:图片跟随鼠标飞img{position:absolute;}document.onmousemove=function(e){my$('im').style.left=e.clientX+"px";my$('im').style.top=e.clientY+"px";};直接通过document获取元素啊娃娃//获取的是元素---标签console.log(document.body);//
- e.clientX,e.clientY, e.pageX , e.pageY , e.offsetX , e.offsetY , e.screenX , e.screenY
这里王工头
欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~声明:参考文档你是如何理解vare=e||window.event的刚才写博客《javascript实现简单拖曳功能》的时候,用到了e.clientX这一类坐标属性,就想到把这一类相似的属性都整理一下,他们分别为e.clientX,e.clientYe.pageX,e.pageYe.offsetX,
- Vue鼠标移动跟随特效(开箱即用)
小阮的学习笔记
vuecss组件vuecss3
效果图直接在需要的页面引用该组件就行exportdefault{methods:{mouseMove(e){/*这里获取元素节点*/letoPanel=document.getElementById("panel");letoSpan=document.createElement(`span`);/*浏览器兼容*/e=e||window.Event;//letx=e.clientX;//lety=
- web前端javascript笔记——(13)事件(1)
Komorebi_9999
前端javascript笔记
一、事件对象鼠标/键盘属性altKey返回当事件被触发时,“ALT”是否被按下。button返回当事件被触发时,哪个鼠标按钮被点击clientX返回当事件被触发时,鼠标指针的水平坐标。clientY返回当事件被触发时,鼠标指针的垂直坐标。ctrlkey返回当事件被触发时,“CTRL"键是否被按下。metakey返回当事件被触发时,"meta"键是否被按下。relatedTarget返回与事件的目标
- threejs中点击物体事件
前端大颖颖
threejsjs3d前端
//定义点击事件document.addEventListener('click',event=>{//鼠标控制对象constmouse=newTHREE.Vector2();//得到鼠标相对于容器的坐标mouse.x=(event.clientX/window.innerWidth)*2-1;mouse.y=-(event.clientY/window.innerHeight)*2+1;//执行
- clientX、pageX、screenX以及offsetX区别
给贝贝赚口粮
前端前端javascripthtml
clientX、pageX、clientX以及offsetX区别client系列(不包含滚动条)clientX:鼠标相对于浏览器窗口可视区域x方向坐标clientY:鼠标相对于浏览器窗口可视区域y方向坐标page系列(包含滚动条)pageX:鼠标相对于页面x方向坐标(页面包括被滚动条卷去的部分)pageY:鼠标相对于页面y方向坐标(页面包括被滚动条卷去的部分)screen系列screenX:鼠标相
- Vue+js 给按钮增加拖动手势事件
small_Sun
给自定义图片、按钮增加手势拖动,并增加弹性效果html目录jsdata(){return{leftX:0,topY:0,startX:'',startY:'',alphaValue:'0.5',maxX:0,maxH:0}},methods:{touchStart(event){this.leftX=event.targetTouches[0].pageX-this.startX;this.max
- 获取组件位置
glenlg
onPress={(event)=>this.onClickAddShoppingCart(event.nativeEvent.pageX,event.nativeEvent.pageY)}>
- vue实现小球掉落
@tg
vue.jsjavascript前端
首先,将小球儿动画代码封装成组件,创建个文件,例如qiu.jsletcreateBall=(left,top,box)=>{//点击事件const{clientX,clienty}=evcreateBall(clientX,clienty)constball=document.createElement('div');ball.style.position='absolute';ball.styl
- RN如何获取当前元素所在位置?
风起长林时
reactnative如何获取当前组件所在位置?分为两步:一、在组件上加上ref属性{this.onPress()}}>这样子二、获取当前组件所在位置//点击事件onPress=()=>{letthat=this;this.refs.explainIcon.measure((frameX,frameY,frameWidth,frameHeight,pageX,pageY)=>{console.lo
- js获取光标坐标
计算机辅助工程
javascript前端vue.js
方法一:使用事件对象的clientX和clientY属性获取光标坐标:document.addEventListener('mousemove',function(event){varx=event.clientX;vary=event.clientY;console.log('光标位置:',x,y);});方法二:使用getBoundingClientRect()方法获取目标元素的位置信息:va
- js的clientX、pageX、screenX等方法来获取鼠标坐标详解
攻克难点
javascript前端css
一张图来解释,如图所示:在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8,FireFox,Chrome下进行测试兼容方法介绍关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:event.clientX/Yevent.pa
- vue2移动端网页图片触摸滑动改变top和left以及双指对图片进行缩放
萧寂173
vuejavascript开发语言ecmascript
代码(这个是vue2中的代码,可以稍加转换vue3也可以用)exportdefault{data(){return{store:{//图片缩放scale:1,pageX:'',pageY:'',},top:0,left:0,ot:0,ol:0,leaderboardphb:true}},methods:{//图片的移动//开始触摸startMap(e,index){console.log('e',
- 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
黄飘fighting
使用场景一般用作图形的移动,如svg画图、dom元素的拖拽。。。测试代码PageTitlebody{margin:0px;padding:0px;background:black;}.main{width:500px;height:500px;background:yellow;display:flex;margin:250px;padding:20px;}.target{box-sizing:b
- 图片跟着鼠标飞
司马皮砸瓜
//页面的鼠标移动事件document.onmousemove=function(e){//鼠标相对于页面的可视区域的横坐标//my$("im").style.left=e.clientX+"px";//鼠标相对于页面的可视区域的纵坐标//my$("im").style.top=e.clientY+"px";//因为IE8的浏览器中针对事件参数对象使用的是window.event,那么,事件处理函
- 手写视频裁剪框
眾K
VUEjavascript前端开发语言
jsstartInteraction(e){constbox=this.$refs.cropBox;constboxRect=box.getBoundingClientRect();constmouseX=e.clientX-boxRect.left;constmouseY=e.clientY-boxRect.top;if(mouseX=boxRect.width-this.resizeHandl
- firefox中offsetX和offsetY的问题
一颗脑袋
项目中遇到一个问题,滚轮缩放或鼠标移动svg的时候,当鼠标放置在svg元素上时,firefox浏览器中的offsetX和offsetY是不准确的,导致缩放和移动会产生便宜,其实问题不是firefox计算问题,比如元素下有,下面有,现在我们对进行缩放,而offsetX的计算是相对父元素的,所以计算得到的值是相对于标签的(但是google等又能正确计算)。然而不管怎么说,我们希望得到的是子元素相对于标
- 图片 移动
1263536889
exportdefault{data(){return{left:300,top:50,};},methods:{startDrag(e){let{clientX:startX,clientY:startY}=e;this._isMouseDown=true;constonMove=e=>{if(!this._isMouseDown)return;e.stopImmediatePropagatio
- 如何自定义右键弹框并实现位置自适应?
Her...
项目前端typescriptjavascriptvue.js
一、问题右键显示弹框,但是靠近浏览器边缘的部分会被隐藏,需要实现弹框位置自适应二、问题分析如果想要最终弹框的宽高不超过屏幕视口,就等于屏幕视口的总宽/高减去弹框打开时的起点坐标,剩下的部分大于等于弹框的宽/高,简单来说,可以套用以下公式:1.1屏幕视口宽(clientWidth)-鼠标点击的x轴(pageX)>=弹框宽1.2屏幕视口高(clientHeight)-鼠标点击y轴(pageY)>=弹框
- knob UI插件使用
换个号韩国红果果
JavaScriptjsonpknob
图形是用canvas绘制的
js代码
var paras = {
max:800,
min:100,
skin:'tron',//button type
thickness:.3,//button width
width:'200',//define canvas width.,canvas height
displayInput:'tr
- Android+Jquery Mobile学习系列(5)-SQLite数据库
白糖_
JQuery Mobile
目录导航
SQLite是轻量级的、嵌入式的、关系型数据库,目前已经在iPhone、Android等手机系统中使用,SQLite可移植性好,很容易使用,很小,高效而且可靠。
因为Android已经集成了SQLite,所以开发人员无需引入任何JAR包,而且Android也针对SQLite封装了专属的API,调用起来非常快捷方便。
我也是第一次接触S
- impala-2.1.2-CDH5.3.2
dayutianfei
impala
最近在整理impala编译的东西,简单记录几个要点:
根据官网的信息(https://github.com/cloudera/Impala/wiki/How-to-build-Impala):
1. 首次编译impala,推荐使用命令:
${IMPALA_HOME}/buildall.sh -skiptests -build_shared_libs -format
2.仅编译BE
${I
- 求二进制数中1的个数
周凡杨
java算法二进制
解法一:
对于一个正整数如果是偶数,该数的二进制数的最后一位是 0 ,反之若是奇数,则该数的二进制数的最后一位是 1 。因此,可以考虑利用位移、判断奇偶来实现。
public int bitCount(int x){
int count = 0;
while(x!=0){
if(x%2!=0){ /
- spring中hibernate及事务配置
g21121
Hibernate
hibernate的sessionFactory配置:
<!-- hibernate sessionFactory配置 -->
<bean id="sessionFactory"
class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">
<
- log4j.properties 使用
510888780
log4j
log4j.properties 使用
一.参数意义说明
输出级别的种类
ERROR、WARN、INFO、DEBUG
ERROR 为严重错误 主要是程序的错误
WARN 为一般警告,比如session丢失
INFO 为一般要显示的信息,比如登录登出
DEBUG 为程序的调试信息
配置日志信息输出目的地
log4j.appender.appenderName = fully.qua
- Spring mvc-jfreeChart柱图(2)
布衣凌宇
jfreechart
上一篇中生成的图是静态的,这篇将按条件进行搜索,并统计成图表,左面为统计图,右面显示搜索出的结果。
第一步:导包
第二步;配置web.xml(上一篇有代码)
建BarRenderer类用于柱子颜色
import java.awt.Color;
import java.awt.Paint;
import org.jfree.chart.renderer.category.BarR
- 我的spring学习笔记14-容器扩展点之PropertyPlaceholderConfigurer
aijuans
Spring3
PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现,也就是BeanFactoryPostProcessor接口的一个实现。关于BeanFactoryPostProcessor和BeanPostProcessor类似。我会在其他地方介绍。
PropertyPlaceholderConfigurer可以将上下文(配置文件)中的属性值放在另一个单独的标准java
- maven 之 cobertura 简单使用
antlove
maventestunitcoberturareport
1. 创建一个maven项目
2. 创建com.CoberturaStart.java
package com;
public class CoberturaStart {
public void helloEveryone(){
System.out.println("=================================================
- 程序的执行顺序
百合不是茶
JAVA执行顺序
刚在看java核心技术时发现对java的执行顺序不是很明白了,百度一下也没有找到适合自己的资料,所以就简单的回顾一下吧
代码如下;
经典的程序执行面试题
//关于程序执行的顺序
//例如:
//定义一个基类
public class A(){
public A(
- 设置session失效的几种方法
bijian1013
web.xmlsession失效监听器
在系统登录后,都会设置一个当前session失效的时间,以确保在用户长时间不与服务器交互,自动退出登录,销毁session。具体设置很简单,方法有三种:(1)在主页面或者公共页面中加入:session.setMaxInactiveInterval(900);参数900单位是秒,即在没有活动15分钟后,session将失效。这里要注意这个session设置的时间是根据服务器来计算的,而不是客户端。所
- java jvm常用命令工具
bijian1013
javajvm
一.概述
程序运行中经常会遇到各种问题,定位问题时通常需要综合各种信息,如系统日志、堆dump文件、线程dump文件、GC日志等。通过虚拟机监控和诊断工具可以帮忙我们快速获取、分析需要的数据,进而提高问题解决速度。 本文将介绍虚拟机常用监控和问题诊断命令工具的使用方法,主要包含以下工具:
&nbs
- 【Spring框架一】Spring常用注解之Autowired和Resource注解
bit1129
Spring常用注解
Spring自从2.0引入注解的方式取代XML配置的方式来做IOC之后,对Spring一些常用注解的含义行为一直处于比较模糊的状态,写几篇总结下Spring常用的注解。本篇包含的注解有如下几个:
Autowired
Resource
Component
Service
Controller
Transactional
根据它们的功能、目的,可以分为三组,Autow
- mysql 操作遇到safe update mode问题
bitray
update
我并不知道出现这个问题的实际原理,只是通过其他朋友的博客,文章得知的一个解决方案,目前先记录一个解决方法,未来要是真了解以后,还会继续补全.
在mysql5中有一个safe update mode,这个模式让sql操作更加安全,据说要求有where条件,防止全表更新操作.如果必须要进行全表操作,我们可以执行
SET
- nginx_perl试用
ronin47
nginx_perl试用
因为空闲时间比较多,所以在CPAN上乱翻,看到了nginx_perl这个项目(原名Nginx::Engine),现在托管在github.com上。地址见:https://github.com/zzzcpan/nginx-perl
这个模块的目的,是在nginx内置官方perl模块的基础上,实现一系列异步非阻塞的api。用connector/writer/reader完成类似proxy的功能(这里
- java-63-在字符串中删除特定的字符
bylijinnan
java
public class DeleteSpecificChars {
/**
* Q 63 在字符串中删除特定的字符
* 输入两个字符串,从第一字符串中删除第二个字符串中所有的字符。
* 例如,输入”They are students.”和”aeiou”,则删除之后的第一个字符串变成”Thy r stdnts.”
*/
public static voi
- EffectiveJava--创建和销毁对象
ccii
创建和销毁对象
本章内容:
1. 考虑用静态工厂方法代替构造器
2. 遇到多个构造器参数时要考虑用构建器(Builder模式)
3. 用私有构造器或者枚举类型强化Singleton属性
4. 通过私有构造器强化不可实例化的能力
5. 避免创建不必要的对象
6. 消除过期的对象引用
7. 避免使用终结方法
1. 考虑用静态工厂方法代替构造器
类可以通过
- [宇宙时代]四边形理论与光速飞行
comsci
从四边形理论来推论 为什么光子飞船必须获得星光信号才能够进行光速飞行?
一组星体组成星座 向空间辐射一组由复杂星光信号组成的辐射频带,按照四边形-频率假说 一组频率就代表一个时空的入口
那么这种由星光信号组成的辐射频带就代表由这些星体所控制的时空通道,该时空通道在三维空间的投影是一
- ubuntu server下python脚本迁移数据
cywhoyi
pythonKettlepymysqlcx_Oracleubuntu server
因为是在Ubuntu下,所以安装python、pip、pymysql等都极其方便,sudo apt-get install pymysql,
但是在安装cx_Oracle(连接oracle的模块)出现许多问题,查阅相关资料,发现这边文章能够帮我解决,希望大家少走点弯路。http://www.tbdazhe.com/archives/602
1.安装python
2.安装pip、pymysql
- Ajax正确但是请求不到值解决方案
dashuaifu
Ajaxasync
Ajax正确但是请求不到值解决方案
解决方案:1 . async: false , 2. 设置延时执行js里的ajax或者延时后台java方法!!!!!!!
例如:
$.ajax({ &
- windows安装配置php+memcached
dcj3sjt126com
PHPInstallmemcache
Windows下Memcached的安装配置方法
1、将第一个包解压放某个盘下面,比如在c:\memcached。
2、在终端(也即cmd命令界面)下输入 'c:\memcached\memcached.exe -d install' 安装。
3、再输入: 'c:\memcached\memcached.exe -d start' 启动。(需要注意的: 以后memcached将作为windo
- iOS开发学习路径的一些建议
dcj3sjt126com
ios
iOS论坛里有朋友要求回答帖子,帖子的标题是: 想学IOS开发高阶一点的东西,从何开始,然后我吧啦吧啦回答写了很多。既然敲了那么多字,我就把我写的回复也贴到博客里来分享,希望能对大家有帮助。欢迎大家也到帖子里讨论和分享,地址:http://bbs.csdn.net/topics/390920759
下面是我回复的内容:
结合自己情况聊下iOS学习建议,
- Javascript闭包概念
fanfanlovey
JavaScript闭包
1.参考资料
http://www.jb51.net/article/24101.htm
http://blog.csdn.net/yn49782026/article/details/8549462
2.内容概述
要理解闭包,首先需要理解变量作用域问题
内部函数可以饮用外面全局变量
var n=999;
functio
- yum安装mysql5.6
haisheng
mysql
1、安装http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm
2、yum install mysql
3、yum install mysql-server
4、vi /etc/my.cnf 添加character_set_server=utf8
- po/bo/vo/dao/pojo的详介
IT_zhlp80
javaBOVODAOPOJOpo
JAVA几种对象的解释
PO:persistant object持久对象,可以看成是与数据库中的表相映射的java对象。最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合。PO中应该不包含任何对数据库的操作.
VO:value object值对象。通常用于业务层之间的数据传递,和PO一样也是仅仅包含数据而已。但应是抽象出的业务对象,可
- java设计模式
kerryg
java设计模式
设计模式的分类:
一、 设计模式总体分为三大类:
1、创建型模式(5种):工厂方法模式,抽象工厂模式,单例模式,建造者模式,原型模式。
2、结构型模式(7种):适配器模式,装饰器模式,代理模式,外观模式,桥接模式,组合模式,享元模式。
3、行为型模式(11种):策略模式,模版方法模式,观察者模式,迭代子模式,责任链模式,命令模式,备忘录模式,状态模式,访问者
- [1]CXF3.1整合Spring开发webservice——helloworld篇
木头.java
springwebserviceCXF
Spring 版本3.2.10
CXF 版本3.1.1
项目采用MAVEN组织依赖jar
我这里是有parent的pom,为了简洁明了,我直接把所有的依赖都列一起了,所以都没version,反正上面已经写了版本
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht
- Google 工程师亲授:菜鸟开发者一定要投资的十大目标
qindongliang1922
工作感悟人生
身为软件开发者,有什么是一定得投资的? Google 软件工程师 Emanuel Saringan 整理了十项他认为必要的投资,第一项就是身体健康,英文与数学也都是必备能力吗?来看看他怎么说。(以下文字以作者第一人称撰写)) 你的健康 无疑地,软件开发者是世界上最久坐不动的职业之一。 每天连坐八到十六小时,休息时间只有一点点,绝对会让你的鲔鱼肚肆无忌惮的生长。肥胖容易扩大罹患其他疾病的风险,
- linux打开最大文件数量1,048,576
tianzhihehe
clinux
File descriptors are represented by the C int type. Not using a special type is often considered odd, but is, historically, the Unix way. Each Linux process has a maximum number of files th
- java语言中PO、VO、DAO、BO、POJO几种对象的解释
衞酆夼
javaVOBOPOJOpo
PO:persistant object持久对象
最形象的理解就是一个PO就是数据库中的一条记录。好处是可以把一条记录作为一个对象处理,可以方便的转为其它对象。可以看成是与数据库中的表相映射的java对象。最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合。PO中应该不包含任何对数据库的操作。
BO:business object业务对象
封装业务逻辑的java对象