clientX为0clientY为0

2024-08-31

JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别

首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性. 之前也一直对这些属性搞的稀里糊涂,看文档上说的也是不太理解,反正看完一头雾水,所以自己动手亲自测试了一下:说一下自己的理解:clientX,clientY,screenX,screenY,offsetX,offsetY 这几个属性是“鼠标事件对象”下的属性,所以必然是“鼠标事件”发生时候才会有意义: clientX:当鼠标事件发生时(不管是onclick,还是

简单的转盘抽奖——CSS动画优化

前言前两天去一家公司面试,被问到一些小游戏的东西.面试官提到了刷红包还有抽奖这些怎么实现,当时简单说了下思路,回来之后想想还是说的太轻描淡写了,干说不做就是耍流氓,所以就做了一个(Demo & 源码).启动方式:手指在转盘上滑动,转盘转动.这里没有像一般的抽奖程序一样在后台指定抽奖结果,结果完全由你的手速决定的(老板哭了...) 界面界面很简单,网上搜个图片或者直接搜个 demo 就有了,当然自适应也是必须的.这里用了 Rem 来实现自适应,所有尺寸单位均用 rem,改变 html 节点的

用Canvas+Javascript FileAPI 实现一个跨平台的图片剪切、滤镜处理、上传下载工具

直接上代码,其中上传功能需要自己配置允许跨域的文件服务器地址~ 或者将html文件贴到您的站点下同源上传也OK. 支持: 不同尺寸图片获取. 原图缩小放大. 原图移动. 选择框大小改变. 下载选中的区域. 上传选中的区域. 几种简单的滤镜(自己添加滤镜函数即可添加滤镜效果) 移动端适配要点: ① 替换事件名称 if(/^.*(Android|iPad|iPhone){1}.*$/.test(navigator.userAgent)){ eventName={down:"touchstart&qu

基于WebGL的三维地形渲染

1.生成WebMap页面 #!/usr/bin/env python # -*- coding: utf-8 -*- import subprocess from jinja2 import Environment, FileSystemLoader # Create our DEM #将DEM数据转化为ENVI的bin格式(一个头文件xml与一个数据文件bin) # use gdal_translate command to create an image to store elevation

javascript学习之带滚动条的图片

之前找了好久没有找到,就自已动手写了一个: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0; padding: 0;} .div1{position: relative; height: 150px; width: 680px

贪吃蛇，JavaScript，效果，鼠标事件

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>鼠标跟随一串效果</title> <style type="text/css"> div{ width: 30px; height: 30px; background: #008000; position: absolute; left: 10px; top: 10p

浅谈原生javaScript&&react 实现全局触摸按钮（附带对addeventlistener的了解）

1.采用原生javaACript 实现全局触摸按钮首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位置,通过改变样式来改变按钮任意移动位置.所以就那了changedTouches里面的值.touches里面放的是touchstart的开始位置.用react的时候,touch事件会和click起冲突,导致链接点击有bug,所以需要那touchstart的值在touchend的时候做判断是点击事件还是

javascript 手势缩放旋转拖动支持：hammer.js

原文: https://cdn.rawgit.com/hammerjs/hammer.js/master/tests/manual/visual.html /*! Hammer.JS - v2.0.4 - 2014-09-28 * http://hammerjs.github.io/ * * Copyright (c) 2014 Jorik Tangelder; * Licensed under the MIT license */ (function(window, document, exp

js封装、简单实例源码记录

1.运动封装:doMove ( obj, attr, dir, target, endFn ) 加入回调.&&.||用法注释 <script> var oBtn1 = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn1.onclick = function () { // doMove ( oDiv, 'width', 34, 600 ); doMove ( oD

自定义滚动条——控制div的大小和透明度

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 } p.p4 {

js实现一个可以兼容PC端和移动端的div拖动效果

前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouseup在移动端都不起任何作用.毕竟移动端是没有鼠标的,查资料后发现,在移动端与之相对应的分别是:touchstart.touchmove.touchend事件.还有一点要注意的是在PC端获取当前鼠标的坐标是:event.clientX和event.clientY,在移动端获取坐标位置则是:event.

毫无保留开源我写的：IOS Android Ipad 多点触摸通用js 库

毫无保留开源我写的:IOS Android Ipad 多点触摸通用js 库在线演示地址: http://m.yunxunmi.com/ 支持 IOS Android Ipad 等不同操作系统的手持或平板设备代码如下:一.index.html<html><title>手指触摸事件</title><head> <style type="text/css"> #touchable { height: 75px; width: 1

Sping mvc 环境下使用kaptcha 生成验证码

一.kaptcha 的简介 kaptcha 是一个非常实用的验证码生成工具.有了它,你可以生成各种样式的验证码,因为它是可配置的.kaptcha工作的原理是调用 com.google.code.kaptcha.servlet.KaptchaServlet,生成一个图片. 同时将生成的验证码字符串放到 HttpSession中. 使用kaptcha可以方便的配置: 验证码的字体验证码字体的大小验证码字体的字体颜色验证码内容的范围(数字,字母,中文汉字!) 验证码图片的大小,边框,边框粗细,边

原生JS、CSS实现的转盘效果（目前仅支持webkit）

这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码,预计会抽空优化,让它在手机上也能运行:另外,如果看代码的时候有什么问题,请留言... <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/

第二十六课：jQuery对事件对象的修复

因为原生的event对象,在不同浏览器下,有不同的属性和方法,因此需要用jQuery进行兼容. jQuery在这里分两步走,首先创建一个伪事件类jQuery.Event(jQuery里面自定义的事件类),这个事件类会统一处理事件对象的兼容性问题,比如:stopPropagation,preventDefault方法.然后通过jQuery.event.fix方法,针对不同的事件类型修复特定的属性.比如:mousewheel,keydown等事件类型. jQuery.Event = function

手机端js实现滑块推动

代码编写:(写的格式有点差,凑合看吧,但是功能是实现了的) <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题</title> <script type="text/javascript" src="./jquery-1.8.0.min.j

移动端拖拽（模块化开发，触摸事件，webpack）

通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). 这个demo实现的功能是:可以拖拽的元素(在这里是图片)位于列表中,这些元素可以被拖到指定区域,到达指定区域(控制台)后,元素被插入控制台后,原来的拖动元素返回原位置,新的元素依然可以在控制台中拖动,也能拖出控制台. 在这个demo中一个用三个模块,分别为ajax模块,drag模块,position

ios中，长按Webview中的图片

我们所要解决的问题如题目所示:ios中,长按Webview中的图片,将图片保存到本地相册. 解决方案:对load的html网页,执行js注入,通过在webview中执行js代码,来响应点击事件,通过js代码来模拟长按事件.发现图片的位置,获得图片的url链接,通过此链接获得图片,将此图片保存到本地相册. js注入代码: static NSString* const kTouchJavaScriptString=@"document.ontouchstart=function(event){\x=

dom div重合提示

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ height:100px; width:100px; position:absolute; background:red; top:200px; left:400px; } #div2{ height:100px; width:

chrom浏览器避免弹出“确定要离开此面吗？”提示框

一.避免弹出提示框在网上搜了很多,答案大都是设置window.onbeforeunload=null ,但是试用之后无效. 这个问题放了两天之后返回来再次想,终于找到了答案,在此和大家分享一下: 解除jquery离开页面弹出提(1) 先解除绑定在设置弹出内容为null. $(function(){ $(window).unbind('beforeunload'); window.onbeforeunload = null; }) 二.其他相关[摘要] (1)window的onunload和on

用JS给浏览器的关闭按钮添加事件

以下是指在js中实现,而非 <body onunload="close()"> 这种方法! 因为这样是在unload掉body的时候触发,而无论任何浏览器,都会在关闭的时候unload掉body的! 模型1:function close(){ alert("sdfsdfsdf");} window.onbeforeunload=close; 模型2:function close(){ if(document.body.clientWidth-event.

clientX为0clientY为0

热门专题