关于微信小程序的pageX的问题 5C

我在用微信小程序写一个滑动获取区间的功能,是根据PageX获取位移的,但是移动的
不是很准确!从0开始滑动,上面数值改变,再往回滑,有时候会变零,有时不会,请教大神啊图片说明

2个回答

这种关于位移的一般都不是很准,你可以用算出来的位移缩小一定比例作为要处理的参数,比如0.8倍。

我不会你的问题,但是我建议你进行更清楚的描述,我感觉你这么问应该没什么人能给你答案

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
为什么我这里的e.pageX - login.offsetLeft是负值
## 问题我直接上图了 --- > > ![图片说明](https://img-ask.csdn.net/upload/201912/14/1576255129_927733.png) > # **按照逻辑来说,应该是正的值才对** ## 代码是这样写的,应该没什么问题 ``` title.addEventListener('mousedown', function(e) { var x = e.pageX - login.offsetLeft var y = e.pageY - login.offsetTop console.log('e.pageX的坐标是' + e.pageX); console.log('login.offsetLeft的坐标是' + login.offsetLeft); console.log('鼠标在盒子内部的坐标是:' + x); }) ```
如何禁止微信移动端左右滑动而不影响上下滑动的效果
如题所示,怎样禁止微信移动端左右滑动事件?通过监听touchmove事件嘛?通过pageX?然后e.preventDefault()?这样不会把上下滑动的事件禁止了嘛?仅仅只是禁止左右滑动事件的话怎么做的啊?各位大神求教!
d3选取元素并在元素添加mouseup事件监听但是不能触发监听函数执行?
代码取自 https://github.com/mjf1310/workflow_web.git 的代码片段。 如下: ``` _this.drawStart = function(eleM,x,y,r){ var svg; if(eleM&&eleM.length>0){ svg = d3.select(eleM); }else{ return false; } var startDataObj = _DrawDataObjFactory.createDrawDataObj("startCircle",x,y,x+r,y+r,r,0,0,0,0,0,0); _DrawDataObjFactory.saveDataNode(startDataObj); var g = svg.append("g"); var startObj = g.append("circle"); startObj.attr("id",startDataObj.id) .attr("name",startDataObj.name) .attr("cx", x+r) .attr("cy", y+r) .attr("r", r) .attr("opacity","0.5") .attr("fill","#F0E68C") .attr('stroke','blue') .attr('stroke-width',1); startObj.on("mouseup",function(e){ _this.graphMouseUp(e); }); startObj.on("mousedown",function(e){ _this.graphMouseDown(e); }); _this.dynamicCreateContextMenu(startDataObj.id); var startTextDataObj = _DrawDataObjFactory.createDrawDataObj("startText",x+r/2,y+r,x,y,r,0,0,0,0,0,0); g.append("text") .attr("id",startTextDataObj.id) .attr("name",startTextDataObj.name) .attr("x",x+r/2) .attr("y",y+r) .attr("font-family","STSong") .attr("font-size","30") .attr("fill","blue") .attr("stroke","black") .text("开始") .call(_this.dragText()); return g.node(); }; ``` 以下为事件监听代码,但是mouseup事件的代码不能触发执行。 ``` startObj.on("mouseup",function(e){ _this.graphMouseUp(e); }); startObj.on("mousedown",function(e){ _this.graphMouseDown(e); }); ``` 以下为事件监听函数 ``` _this.graphMouseDown = function(e){ if (d3.event.button != 0 && d3.event.buttons!=1){ return false; } /** * mouseup事件失效的解决方案 */ _this.d3PauseEvent(e); var drawId = _this.param.drawId; /**var self = $(e.currentTarget);**/ var self = d3.select(d3.event.currentTarget); var id = self.attr("id"); if(drawId && drawId.length>0){ /**var offsetX = e.offsetX; var offsetY = e.offsetY; var x = e.pageX; var y = e.pageY;**/ var e1 = d3.event; var offsetX = e1.offsetX; var offsetY = e1.offsetY; var x = e1.x; var y = e1.y; var drawDataObj; if('arrow'==drawId){ drawDataObj = _DrawDataObjFactory.createDrawDataObj("arrow",x,y,x+50,y+45,0,w,h,x+50,y+10,x+50,y+80); }else if('horitionalArrow'==drawId){ drawDataObj = _DrawDataObjFactory.createDrawDataObj("horitionalArrow",x,y,x+50,y+45,0,w,h,x+50,y+10,x+85,y+85); }else if('verticalArrow'==drawId){ drawDataObj = _DrawDataObjFactory.createDrawDataObj("verticalArrow",x,y,x+50,y+45,0,w,h,x+50,y+10,x+85,y+80); }else{ return; } var drawDataObjVal = _DrawDataObjFactory.getDrawDataObjById(id); if(drawDataObjVal && typeof(drawDataObjVal)=="object"){ drawDataObj.preId = drawDataObjVal.id; drawDataObj.preObj = drawDataObjVal; drawDataObjVal.nextId = drawDataObj.id; drawDataObjVal.nextObj = drawDataObj; _this.edge.prefObj = drawDataObjVal; } _this.edge.drawDataObj = drawDataObj; _this.edge.currentObj = drawDataObj; _this.edge.pathData = []; var data = []; data.push(x); data.push(y); _this.edge.pathData.push(data); var path = d3.path(); path.moveTo(x,y); _this.edge.path = path; } }; _this.graphMouseUp = function(e){ if (d3.event.button != 0 && d3.event.buttons!=1){ return false; } /**var self = $(e.currentTarget);**/ var self = d3.select(d3.event.currentTarget); var id = self.attr("id"); var drawId = _this.param.drawId; if(drawId && drawId.length>0){ var svg = d3.select("#drawMainDiv svg[id=draw_bg_svg]"); if('arrow'==drawId){ var g = svg.append("g"); var pathObj = g.append("path"); _this.edge.path.closePath(); pathObj.attr("id",_this.edge.drawDataObj.id) .attr("name",_this.edge.drawDataObj.name) .attr("d", _this.edge.path) .attr("fill","none") .attr("stroke","#00FF00") .attr("stroke-width",3) //.call(_this.addZoomTransform()) .call(_this.dragPath()); pathObj.on("mousedown",function(e){ _this.addClick(e); }); _this.edge.drawDataObj.path = _this.edge.path; var drawDataObjVal = _DrawDataObjFactory.getDrawDataObjById(id); if(drawDataObjVal && typeof(drawDataObjVal)=="object"){ _DrawDataObjFactory.updateDrawDataObj(_this.edge.prefObj); _DrawDataObjFactory.updateDataNode(_this.edge.prefObj); _this.edge.nextObj = drawDataObjVal; _this.edge.drawDataObj.nextId = drawDataObjVal.id; _this.edge.drawDataObj.nextObj = drawDataObjVal; _DrawDataObjFactory.updateDrawDataObj(_this.edge.drawDataObj); drawDataObjVal.preId = _this.edge.drawDataObj.id; drawDataObjVal.preObj = _this.edge.drawDataObj; _DrawDataObjFactory.updateDrawDataObj(drawDataObjVal); _DrawDataObjFactory.updateDataNode(drawDataObjVal); } _DrawDataObjFactory.saveDataLine(_this.edge.drawDataObj); //pathObj.call(_this.addZoomTransform()); return g.node(); } if('horitionalArrow'==drawId){ var g = svg.append("g"); var pathObj = g.append("path"); _this.edge.path.closePath(); pathObj.attr("id",_this.edge.drawDataObj.id) .attr("name",_this.edge.drawDataObj.name) .attr("d", _this.edge.path) .attr("fill","none") .attr("stroke","#00FF00") .attr("stroke-width",3) //.call(_this.addZoomTransform()) .call(_this.dragPath()); pathObj.on("mousedown",function(e){ _this.addClick(e); }); var drawDataObjVal = _DrawDataObjFactory.getDrawDataObjById(id); if(drawDataObjVal && typeof(drawDataObjVal)=="object"){ _DrawDataObjFactory.updateDrawDataObj(_this.edge.prefObj); _DrawDataObjFactory.updateDataNode(_this.edge.prefObj); _this.edge.nextObj = drawDataObjVal; _this.edge.drawDataObj.nextId = drawDataObjVal.id; _this.edge.drawDataObj.nextObj = drawDataObjVal; _DrawDataObjFactory.updateDrawDataObj(_this.edge.drawDataObj); drawDataObjVal.preId = _this.edge.drawDataObj.id; drawDataObjVal.preObj = _this.edge.drawDataObj; _DrawDataObjFactory.updateDrawDataObj(drawDataObjVal); _DrawDataObjFactory.updateDataNode(drawDataObjVal); } _this.edge.drawDataObj.path = _this.edge.path; _DrawDataObjFactory.saveDataLine(_this.edge.drawDataObj); //pathObj.call(_this.addZoomTransform()); return g.node(); } if('verticalArrow'==drawId){ var g = svg.append("g"); var pathObj = g.append("path"); _this.edge.path.closePath(); pathObj.attr("id",_this.edge.drawDataObj.id) .attr("name",_this.edge.drawDataObj.name) .attr("d", _this.edge.path) .attr("fill","none") .attr("stroke","#00FF00") .attr("stroke-width",3) //.call(_this.addZoomTransform()) .call(_this.dragPath()); pathObj.on("mousedown",function(e){ _this.addClick(e); }); var drawDataObjVal = _DrawDataObjFactory.getDrawDataObjById(id); if(drawDataObjVal && typeof(drawDataObjVal)=="object"){ _DrawDataObjFactory.updateDrawDataObj(_this.edge.prefObj); _DrawDataObjFactory.updateDataNode(_this.edge.prefObj); _this.edge.nextObj = drawDataObjVal; _this.edge.drawDataObj.nextId = drawDataObjVal.id; _this.edge.drawDataObj.nextObj = drawDataObjVal; _DrawDataObjFactory.updateDrawDataObj(_this.edge.drawDataObj); drawDataObjVal.preId = _this.edge.drawDataObj.id; drawDataObjVal.preObj = _this.edge.drawDataObj; _DrawDataObjFactory.updateDrawDataObj(drawDataObjVal); _DrawDataObjFactory.updateDataNode(drawDataObjVal); } _this.edge.drawDataObj.path = _this.edge.path; _DrawDataObjFactory.saveDataLine(_this.edge.drawDataObj); //pathObj.call(_this.addZoomTransform()); return g.node(); } } }; ``` mouseup事件监听出问题了。
求助,手机qq内置浏览器,javascript问题
function touchMove(event) { if(event.touches.length > 1 || event.scale && event.scale !== 1 ) return; var touch = event.targetTouches[0]; endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y}; isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; clearInterval(auto); if(isScrolling === 0){ clearTimeout(timeOutEvent); event.preventDefault(); oUl.style.left = iLeft + endPos.x + 'px'; } } function touchEnd(event) { if(window.endPos) { if( endPos.x < -30 ) { oBtnNext.onclick(); } else if( endPos.x > 30 ) { oBtnPrev.onclick(); } endPos.x = 0; } auto = setInterval(oBtnNext.onclick,5000); clearTimeout(timeOutEvent); oUl.removeEventListener("touchmove", touchMove, false); document.removeEventListener("touchend", touchEnd, false); } function longPress(){ timeOutEvent = 0; return true; } } //自动播放 var auto = setInterval(oBtnNext.onclick, 5000); oPPager.onmouseover = oBtnPrev.onmouseover = oBtnNext.onmouseover = oUl.onmouseover = function(){ clearInterval(auto); } oBtnPrev.onmouseout = oBtnNext.onmouseout = oUl.onmouseout = function() { auto = setInterval(oBtnNext.onclick, 5000); } 做了一个移动端跟PC通用的幻灯片效果,别的浏览器都没问题,但是QQ内置浏览器和微信内置浏览器(平板上这个2个内置浏览器又正常...),手指划快一点后,自动播放就会变的飞快,如果拿掉最后的oUl.onmouseout = function() {auto = setInterval(oBtnNext.onclick, 5000);}问题又不会出现,所以我想是不是onmouseout对touchend有影响,请问一下大家,这个该怎么解决。
前后端数据一致性的问题
前端页面有easyui-tree,后端返回List< EasyUITreeNode> 当后端EasyUITreeNode节点中,属性定义为public String state的时候,前端可以正常展开树。当public String status的时候,前端不能展开树。但是因为后端是自己敲的,前端是拷贝的,以为命名变量只要自己知道意义就好,不知道原来还有这个注意点。那么问题来了。怎样从前端页面分析出后端的变量到底应该叫什么呢??以下是前端代码 ![图片说明](https://img-ask.csdn.net/upload/201902/18/1550458458_917136.png) ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <div> <ul id="contentCategory" class="easyui-tree"> </ul> </div> <div id="contentCategoryMenu" class="easyui-menu" style="width:120px;" data-options="onClick:menuHandler"> <div data-options="iconCls:'icon-add',name:'add'">添加</div> <div data-options="iconCls:'icon-remove',name:'rename'">重命名</div> <div class="menu-sep"></div> <div data-options="iconCls:'icon-remove',name:'delete'">删除</div> </div> <script type="text/javascript"> //文档加载后处理以下的逻辑 $(function(){ //在#contentCategory 所在的标签中创建一颗树 $("#contentCategory").tree({ url : '/content/category/list', animate: true, method : "GET", //右击鼠标触发 onContextMenu: function(e,node){ //关闭原来的鼠标的默认事件 e.preventDefault(); //选中 右击鼠标的节点 $(this).tree('select',node.target); //展示菜单栏 $('#contentCategoryMenu').menu('show',{ left: e.pageX,//在鼠标的位置显示 top: e.pageY//在鼠标的位置显示 }); }, //在选中的节点被编辑之后触发 onAfterEdit : function(node){ //获取树本身 var _tree = $(this); //表示的是新增的节点 新增 if(node.id == 0){ // 新增节点 //parentId:node.parentId,name:node.text //parentId:就是新增节点的父节点的Id //name:新增节点的文本 $.post("/content/category/create",{parentId:node.parentId,name:node.text},function(data){ if(data.status == 200){ //更新节点 _tree.tree("update",{ target : node.target,//更新哪一个节点 id : data.data.id//更新新增节点的id }); }else{ $.messager.alert('提示','创建'+node.text+' 分类失败!'); } }); }else{ $.post("/content/category/update",{id:node.id,name:node.text}); } } }); }); //处理点击菜单的事件 function menuHandler(item){ //获取树 var tree = $("#contentCategory"); //获取被选中的节点 就是右击鼠标时的所在的节点 var node = tree.tree("getSelected"); //判断选择的是添加还是重命名还是删除 // == 1==1 true 1=="1" true; // === 1===1 true 1==="1" false //点击“添加” if(item.name === "add"){ //在被点击的节点下追加一个子节点 tree.tree('append', { parent: (node?node.target:null), //被添加的子节点的父 // data: [{ text: '新建分类123',//节点的内容 id : 0,//节点的id parentId : node.id//新建的节点的父节点的id }] }); //找到id为0的节点 添加的节点 var _node = tree.tree('find',0); //选中id为0的节点 添加的节点 开启编辑 tree.tree("select",_node.target).tree('beginEdit',_node.target); }else if(item.name === "rename"){ tree.tree('beginEdit',node.target); }else if(item.name === "delete"){ $.messager.confirm('确认','确定删除名为 '+node.text+' 的分类吗?',function(r){ if(r){//如果是true 表示要执行以下的逻辑 $.post("/content/category/delete/",{id:node.id},function(){ //后台删除成功后,删除前端的节点 tree.tree("remove",node.target); }); } }); } } </script> ```
hammer.js 的pinch事件
``` 这里的pinch事件 alert(evt.type)可以alert出来,但是 进不到 onUIMessage(evt) 方法的 if (evt.type == 'pinchstart' || evt.type == 'pinchend' || evt.type == 'pinchmove') {}里边,但是却能进else if (evt.type == 'pan' || evt.type == 'panstart' || evt.type == 'panend' || evt.type == 'panmove') {} 里,有没有大神指导怎么回事啊 // 触摸按下 thisHammer.on("panstart panmove panend", function (evt) { onUIMessage(evt); console.log(evt.type); }); //Pinch thisHammer.add(new Hammer.Pinch()); thisHammer.on("pinchstart pinchmove pinchend", function (evt) { alert(evt.type); onUIMessage(evt); }); /* * UI Message */ function onUIMessage(evt) { evt.preventDefault(); //通知浏览器不要执行与事件关联的默认动作。 var msgType = this.getMsgType(evt); // 事件消息类型 if (msgType == "") { return; } var eventMsg = { name: msgType }; /* eventMsg.pageX = evt.pageX; eventMsg.pageY = evt.pageY; eventMsg.clientX = evt.clientX; eventMsg.clientY = evt.clientY; eventMsg.ctrlKey = evt.ctrlKey; eventMsg.altKey = evt.altKey; eventMsg.shiftKey = evt.shiftKey; eventMsg.scale = evt.scale;*/ if (evt.type == 'mousewheel') { var delta = (evt.originalEvent.wheelDelta && (evt.originalEvent.wheelDelta > 0 ? 1 : -1)); if (delta > 0) { // 向上滚 console.log("wheelup"); } else if (delta < 0) { // 向下滚 console.log("wheeldown"); } eventMsg.wheelDelta = delta; console.log(eventMsg.wheelDelta ); } if (evt.type == 'keydown') { eventMsg.keyCode = evt.keyCode; console.log(eventMsg.keyCode); } alert('out'); eventMsg.annoName = this._currAnnoName; if (evt.type == 'pinchstart' || evt.type == 'pinchend' || evt.type == 'pinchmove') { alert('come in'); if (evt.pointers.length == 2) { var offsetX = evt.pointers[1].clientX - evt.pointers[0].clientX; var offsetY = evt.pointers[1].clientY - evt.pointers[0].clientY; eventMsg.twoFingerDistance = Math.sqrt(offsetX * offsetX + offsetY * offsetY); eventMsg.clientX = evt.center.x; eventMsg.clientY = evt.center.y; eventMsg.x = evt.center.x; eventMsg.y = evt.center.y; alert(eventMsg.name+ offsetX +offsetY+eventMsg.twoFingerDistance+eventMsg.x +eventMsg.clientX ); } eventMsg.annoName = "imageZoom"; } else if (evt.type == 'pan' || evt.type == 'panstart' || evt.type == 'panend' || evt.type == 'panmove') { if (evt.srcEvent != null && evt.srcEvent != undefined) { if (evt.pointerType == "mouse") { eventMsg.x = evt.srcEvent.x; eventMsg.y = evt.srcEvent.y; eventMsg.pageX = evt.srcEvent.pageX; eventMsg.pageY = evt.srcEvent.pageY; eventMsg.clientX = evt.srcEvent.clientX; eventMsg.clientY = evt.srcEvent.clientY; } else { if (evt.srcEvent.changedTouches != undefined) { eventMsg.x = evt.srcEvent.changedTouches[0].screenX; eventMsg.y = evt.srcEvent.changedTouches[0].screenY; eventMsg.pageX = evt.srcEvent.changedTouches[0].pageX; eventMsg.pageY = evt.srcEvent.changedTouches[0].pageY; eventMsg.clientX = evt.srcEvent.changedTouches[0].clientX; eventMsg.clientY = evt.srcEvent.changedTouches[0].clientY; } eventMsg.ctrlKey = evt.srcEvent.ctrlKey; eventMsg.altKey = evt.srcEvent.altKey; eventMsg.shiftKey = evt.srcEvent.shiftKey; alert(eventMsg.name+eventMsg.x+eventMsg.y+eventMsg.pageX+eventMsg.pageY +eventMsg.clientX ); } } } ```
jQuery触摸事件在ios中无效
在ios中使用jQuery的问题: $(document).ready(function(){ var iX = 0,iY = 0,fX = 0,fY = 0; document.addEventListener('touchstart', function(e) { var touch = e.touches[0]; iX = touch.pageX; iY = touch.pageY; }, false); document.addEventListener('touchmove', function(e) { var touch = e.touches[0]; fX = touch.pageX; fY = touch.pageY; }, false); document.addEventListener('touchcancel', function() { var dX = fX - iX; var dY = fY - iY; var tg = dY/dX; if(tg < 0) tg = -tg; if(tg <= 0.5 && fX > iX) rightSwipe() else if(tg <= 0.5 && fX < iX) leftSwipe() }, false); function rightSwipe(){ $("#body").removeClass("bg2"); $("#body").addClass("bg"); } function leftSwipe(){ $("#body").removeClass("bg"); $("#body").addClass("bg2"); } }); 这个代码实现的功能是记录手指触摸方向,在android4.1.2中chrome浏览器运行正常,但是在ios中用safari就不运行了。
Html5 Canvas通过鼠标移动画圆,一下为Javascript画圆部分函数 有什么问题?
var canvas=document.getElementById("demo"); var cxt=canvas.getContext("2d"); function circle() { canvas.onmousedown=function(evt) { cxt.lineWidth=1; evt=window.event||evt; var startX=evt.pageX-this.offsetLeft; var startY=evt.pageY-this.offsetTop; } canvas.onmousemove=function(evt) { var x=evt.pageX-this.offsetLeft; var y=evt.pageY-this.offsetTop; cxt.strokeStyle="rgb(180,0,0)"; cxt.beginPath(); var radii=Math.sqrt((startX-x)*(startX-x)+(startY-y)*(startY-y)); cxt.arc(startX,startY,radii,0,Math.PI*2,false); cxt.stroke(); cxt.closePath(); } }
线程类中可以用静态代码块做初始化静态变量么?这些静态变量会不会有并发问题呢?
public class SalesConfirmationUploadThread extends Thread { private boolean result = false; private final SalesConfirmationPipedInputStream input; private long orderId; private String pin; private JingdongStorageService jss; private static final String CONTENTTYPE = "application/pdf"; private boolean sealFlag = false; private final FileOutputStream fos; private String pdfFile; private static String PFXFILE; private static String PFXPASS; private static String SEALIMAGE; private static int PAGENO; private static int PAGEX; private static int PAGEY; private static final Logger log = LoggerFactory.getLogger(SalesConfirmationUploadThread.class); //初始化电子印章类所用参数 static { Properties properties = new Properties(); try { URL sealPfx = SalesConfirmationUploadThread.class.getResource("/test.pfx"); URL sealGif = SalesConfirmationUploadThread.class.getResource("/sealjdpic.gif"); if(sealPfx!=null){ PFXFILE = sealPfx.getPath(); } if(sealPfx!=null){ SEALIMAGE = sealGif.getPath(); } properties.load(SalesConfirmationUploadThread.class.getResourceAsStream("/project.properties")); String retPfxPass = properties.getProperty("pxf.pass"); String pageNo = properties.getProperty("pageno"); String pageX = properties.getProperty("pagex"); String pageY = properties.getProperty("pagey"); if (StringUtils.isNotBlank(retPfxPass)) { PFXPASS = retPfxPass; } if(StringUtils.isNotBlank(pageNo)){ PAGENO = Integer.parseInt(pageNo); } if(StringUtils.isNotBlank(pageX)){ PAGEX = Integer.parseInt(pageX); } if(StringUtils.isNotBlank(pageY)){ PAGEY = Integer.parseInt(pageY); } } catch (Exception e) { log.error("init seal param error is [{}] ",e); } finally { log.error("pfxPass={"+PFXPASS+"},sealPfx={"+PFXFILE+"},sealGif={"+SEALIMAGE+"},pageNo={"+PAGENO+"},pageX={"+PAGEX+"},pageY={"+PAGEY+"}"); } } public SalesConfirmationUploadThread(final SalesConfirmationPipedInputStream input,final FileOutputStream fos,final String pdfFile,long orderId, String pin, JingdongStorageService jss){ this.pdfFile =pdfFile; this.fos = fos; this.input = input; this.orderId = orderId; this.pin = pin; this.jss = jss; } @Override public void run() { CallerInfo callerInfo = Profiler.registerInfo("com.jd.auctionplat.soa.threads.SalesConfirmationUploadThread", true, true); if(input == null || input.getLength() <= 0){ log.error("根据订单号:" + orderId + "和用户pin:" + pin + "上传成交确认书时获取的管道输入流为空"); return; } log.error("-----开始上传根据订单号:" + orderId + "和用户pin:" + pin + "生成的成交确认书,长度为:" + input.getLength() + "----" ); if(jss == null){ log.error("----上传成交确认书时jss为空----"); } //将成交确认书读入到服务器 File file = null; try{ byte[] buffer = new byte[2*1024]; int len=0; while((len=input.read(buffer))!=-1){ fos.write(buffer,0,len); } }catch(Exception e){ log.error("根据订单号:" + orderId + "和用户pin:" + pin + "上传成交确认书到服务器时出错", e); }finally { try{ if(null != fos){ fos.close(); } }catch (IOException e){ log.error("关闭文件输出流时出错", e); } try { if(null != input){ input.close(); } } catch (IOException e) { log.error("关闭管道输入流时出错", e); } } //调用工具类加盖印章 try{ UTCSeal s = new UTCSeal(); sealFlag = s.DoSealWithPfx(pdfFile,PAGENO,PAGEX,PAGEY,PFXFILE,PFXPASS,SEALIMAGE); }catch (Exception e){ log.error("调用电子签章失败!",e); } try { //盖章成功,上传云存储 if(sealFlag){ file = new File(pdfFile); jss.bucket(SalesConfirmationBucketUtils.getBucket()). object(SalesConfirmationBucketUtils.getSalesConfirmationPath(orderId, pin)). entity(file).contentType(CONTENTTYPE).put(); result = true; String url = SalesConfirmationBucketUtils.getSalesConfirmationPath(orderId, pin); log.error("生成成交确认书的url :" +url); } } catch (Exception e) { log.error("根据订单号:" + orderId + "和用户pin:" + pin + "上传成交确认书到云存储时出错", e); }finally{ try { //删除服务器中成交确认书 if(null!=file && file.exists()){ file.delete(); } } catch (Exception e) { log.error("根据订单号:" + orderId + "和用户pin:" + pin + "上传成交确认书时关闭管道输入流出错", e); } } log.error("-----成交确认书上传完成,订单号为:" + orderId + ",用户pin为:" + pin + "----" ); Profiler.registerInfoEnd(callerInfo); } public boolean isResult() { return result; } }
canvas(html5)放大缩小 点击事件
已实现点击事件。和移动鼠标,以鼠标为原点的放大缩小。可是经过放大和缩小后,点击就失效了。 请问在这种放大缩小的情况下还能怎样去实现点击呢?求思路! 例如: 给定的点击区域,当鼠标点击这区域是会打印提示 ``` x:1386, y:50, width: 120, height: 40 ``` 放大缩小 ``` canvas.addEventListener('mousemove',function(evt){ lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft); lastY = evt.offsetY || (evt.pageY - canvas.offsetTop); dragged = true; if (dragStart){ var pt = context.transformedPoint(lastX,lastY); context.translate(pt.x-dragStart.x,pt.y-dragStart.y); redraw(); } },false); 、、、、、、 var zoom = function(clicks){ var pt = context.transformedPoint(lastX,lastY); context.translate(pt.x,pt.y); var factor = Math.pow(scaleFactor,clicks); zoomSize = factor; context.scale(factor,factor); context.translate(-pt.x,-pt.y); redraw(); } ``` 可是,经过放大缩小后,位于原本区域的图片,移动到其他地方,图形也扩大或缩小了,这时候的点击就等于失效了
一个拖动拼图游戏的代码小问题想不通
html代码: <!doctype html> <html> <head> <title>Sliding Puzzle</title> <style> .picture { border: 1px solid black; } </style> </head> <body> <div id="title"> <h2>Sliding Puzzle</h2> </div> <div id="slider"> <form> <label>Easy</label> <input type="range" id="scale" value="4" min="3" max="5" step="1"> <label>Hard</label> </form> <br/> </div> <div id="main" class="main"> <canvas id="puzzle" width="480px" height="480px"></canvas> </div> <script src="test04.js"></script> </body> </html> js代码:var context = document.getElementById('puzzle').getContext('2d'); var img = new Image(); img.src = './img/dimetrodon.jpg'; img.addEventListener('load', drawTiles, false); var boardSize = document.getElementById('puzzle').width; var tileCount = document.getElementById('scale').value; var tileSize = boardSize / tileCount; var clickLoc = new Object; clickLoc.x = 0; clickLoc.y = 0; var emptyLoc = new Object; emptyLoc.x = 0; emptyLoc.y = 0; var solved = false; var boardParts = new Object; setBoard(); document.getElementById('scale').onchange = function() { tileCount = this.value; tileSize = boardSize / tileCount; setBoard(); drawTiles(); }; document.getElementById('puzzle').onmousemove = function(e) { clickLoc.x = Math.floor((e.pageX - this.offsetLeft) / tileSize); clickLoc.y = Math.floor((e.pageY - this.offsetTop) / tileSize); }; document.getElementById('puzzle').onclick = function() { if (distance(clickLoc.x, clickLoc.y, emptyLoc.x, emptyLoc.y) == 1) { slideTile(emptyLoc, clickLoc); drawTiles(); } if (solved) { setTimeout(function() {alert("You solved it!");}, 500); } }; function setBoard() { boardParts = new Array(tileCount); for (var i = 0; i < tileCount; ++i) { boardParts[i] = new Array(tileCount); for (var j = 0; j < tileCount; ++j) { boardParts[i][j] = new Object; boardParts[i][j].x = (tileCount - 1) - i; boardParts[i][j].y = (tileCount - 1) - j; } } emptyLoc.x = boardParts[tileCount - 1][tileCount - 1].x; emptyLoc.y = boardParts[tileCount - 1][tileCount - 1].y; solved = false; } function drawTiles() { context.clearRect ( 0 , 0 , boardSize , boardSize ); for (var i = 0; i < tileCount; ++i) { for (var j = 0; j < tileCount; ++j) { var x = boardParts[i][j].x; var y = boardParts[i][j].y; if(i != emptyLoc.x || j != emptyLoc.y || solved == true) { context.drawImage(img, x * tileSize, y * tileSize, tileSize, tileSize, i * tileSize, j * tileSize, tileSize, tileSize); } } } } function distance(x1, y1, x2, y2) { return Math.abs(x1 - x2) + Math.abs(y1 - y2); } function slideTile(toLoc, fromLoc) { if (!solved) { boardParts[toLoc.x][toLoc.y].x = boardParts[fromLoc.x][fromLoc.y].x; boardParts[toLoc.x][toLoc.y].y = boardParts[fromLoc.x][fromLoc.y].y; boardParts[fromLoc.x][fromLoc.y].x = tileCount - 1; boardParts[fromLoc.x][fromLoc.y].y = tileCount - 1; // var a = toLoc.x; // var b = toLoc.y; toLoc.x = fromLoc.x; toLoc.y = fromLoc.y; // fromLoc.x = a; // fromLoc.y = b;//这边为什么不用给emptyLoc改变坐标? checkSolved(); } } function checkSolved() { var flag = true; for (var i = 0; i < tileCount; ++i) { for (var j = 0; j < tileCount; ++j) { if (boardParts[i][j].x != i || boardParts[i][j].y != j) { flag = false; } } } solved = flag; } 请问为什么js中的emptyLoc的x和y不需要更新,或者他的x和y是怎么更新的,他代码里面emptyLoc.x和emptyLoc.y的值貌似都是2,没有变化,不更新的话没办法继续判断距离distance==1啊,为什么它程序可以正确运行,还是我理解错了?
zepto.fullpage.js想禁用手指上下滑屏的事件,只保留点击全屏滑动的事件的话该怎么做呢?
有了解zepto.fullpage.js的么?我如果想禁用手指上下滑屏的事件,只保留点击全屏滑动的事件的话该怎么做呢? ``` *{ margin: 0; padding: 0; } html,body{ height: 100%; } #banner { height: 100%; overflow: hidden; } .section{ height: 100%; } .section1{ background: aquamarine; } .section2{ background: #990000; } .section3{ background: chartreuse; } .section4{ background: cadetblue; } .section5{ background: darkolivegreen; } .btn{ position: absolute; top: 500px; left: 100px; } ``` ``` <div id="banner"> <div class="section section1"></div> <div class="section section2"></div> <div class="section section3"></div> <div class="section section4"></div> <div class="section section5"></div> <input class="btn" type="button" value="下一页"/> </div> ``` ``` (function($, window, undefined) { if (typeof $ === 'undefined') { throw new Error('zepto.fullpage\'s script requires Zepto'); } $(document).on('touchmove', function(e) { e.preventDefault(); }); var fullpage = null; var d = { page: '.page', start: 0, duration: 500, loop: false, drag: false, dir: 'v', change: function(data) {}, beforeChange: function(data) {}, afterChange: function(data) {}, orientationchange: function(orientation) {} }; function fix(cur, pagesLength, loop) { if (cur < 0) { return !!loop ? pagesLength - 1 : 0; } if (cur >= pagesLength) { return !!loop ? 0 : pagesLength - 1; } return cur; } function move($ele, dir, dist) { var translate = dir === 'v' ? 'translateY' : 'translateX'; $ele.css('-webkit-transform', translate + '(' + dist + 'px)') .css('transform', translate + '(' + dist + 'px)'); } function init(option) { var o = $.extend(true, {}, d, option); var that = this; that.curIndex = -1; that.o = o; that.startY = 0; that.movingFlag = false; that.$this.addClass('fullPage-wp'); that.$parent = that.$this.parent(); that.$pages = that.$this.find(o.page).addClass('fullPage-page fullPage-dir-' + o.dir); that.pagesLength = that.$pages.length; that.update(); that.initEvent(); that.status = 1; } function Fullpage($this, option) { this.$this = $this; init.call(this, option); } $.extend(Fullpage.prototype, { update: function() { if (this.o.dir === 'h') { this.width = this.$parent.width(); this.$pages.width(this.width); this.$this.width(this.width * this.pagesLength); } this.height = this.$parent.height(); this.$pages.height(this.height); this.moveTo(this.curIndex < 0 ? this.o.start : this.curIndex); }, initEvent: function() { var that = this; var $this = that.$this; $this.on('touchstart', function(e) { if (!that.status) {return 1;} e.preventDefault(); if (that.movingFlag) { return 0; } that.startX = e.targetTouches[0].pageX; that.startY = e.targetTouches[0].pageY; }); $this.on('touchend', function(e) { if (!that.status) {return 1;} e.preventDefault(); if (that.movingFlag) { return 0; } var sub = that.o.dir === 'v' ? e.changedTouches[0].pageY - that.startY : e.changedTouches[0].pageX - that.startX; var der = (sub > 30 || sub < -30) ? sub > 0 ? -1 : 1 : 0; that.moveTo(that.curIndex + der, true); }); if (that.o.drag) { $this.on('touchmove', function(e) { if (!that.status) {return 1;} e.preventDefault(); if (that.movingFlag) { return 0; } var y = e.changedTouches[0].pageY - that.startY; var x = e.changedTouches[0].pageX - that.startX; var dist = -that.curIndex * (that.o.dir === 'v' ? (that.height + y) : (that.width + x)); $this.removeClass('anim'); move($this, that.o.dir, dist); }); } // 翻转屏幕提示 // ============================== window.addEventListener("orientationchange", function() { if (window.orientation === 180 || window.orientation === 0) { that.o.orientationchange('portrait'); } if (window.orientation === 90 || window.orientation === -90) { that.o.orientationchange('landscape'); } }, false); window.addEventListener("resize", function() { that.update(); }, false); }, start: function() { this.status = 1; }, stop: function() { this.status = 0; }, moveTo: function(next, anim) { var that = this; var $this = that.$this; var cur = that.curIndex; next = fix(next, that.pagesLength, that.o.loop); if (anim) { $this.addClass('anim'); } else { $this.removeClass('anim'); } if (next !== cur) { that.o.beforeChange({ next: next, cur: cur }); } that.movingFlag = true; that.curIndex = next; move($this, that.o.dir, -next * (that.o.dir === 'v' ? that.height : that.width)); if (next !== cur) { that.o.change({ next: next, cur: cur }); } window.setTimeout(function() { that.movingFlag = false; if (next !== cur) { that.o.afterChange({ next: next, cur: cur }); that.$pages.removeClass('cur').eq(next).addClass('cur'); } }, that.o.duration); }, movePrev: function(anim) { this.moveTo(this.curIndex - 1, anim); }, moveNext: function(anim) { this.moveTo(this.curIndex + 1, anim); } }); $.fn.fullpage = function(option) { if (!fullpage) { fullpage = new Fullpage($(this), option); } return this; }; //暴漏方法 $.each(['update', 'moveTo', 'moveNext', 'movePrev', 'start', 'stop'], function(key, val) { $.fn.fullpage[val] = function() { if (!fullpage) { return 0; } fullpage[val].apply(fullpage, [].slice.call(arguments, 0)); }; }); }(Zepto, window)); ```
求助关于jquery给图片标记的定位问题
现在可以实现给图片做标记了,但是定位存在问题,就是当图片很大的时候,拖动滚动条后点击鼠标做的标记位置不对了。可能是代码里用来获取位置的方法不对,但是对定位这块不太熟,特地注册来请教大神。我贴上代码,请大神帮忙看看如何解决。谢谢! 图片和js我引用的外部地址,代码应该可以直接运行。 ``` <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>无标题 2</title> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { var bodyheight = $(window).height(); var bodywidth = $(window).width()-200; $(".imgmakerright>div").css("width",bodywidth); $(".imgmakerright>div").css("height",bodyheight); $(".dtreebox").css("height", bodyheight); }); </script> <style type="text/css"> html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow:hidden; text-align: center; } .imgmakerright { position: relative; } button { display: inline-block; border: 0; } button.red-ball { position: absolute; background-color: #000; padding: 5px; border-radius: 5px; transition: .4s; color: #fff; box-shadow: 0 0 20px rgba(60,140,255,.5); } button.red-ball:after { font:normal normal normal 24px/1 FontAwesome; content:"\f124"; position:absolute; left:-6px; top:-8px; color:#3b8cff; text-shadow:0 0 20px rgba(60,140,255,.5); transform:rotate(-90deg) } button.red-ball > i { font-weight: normal; background-color: rgba(0,0,0,.3); border-radius: 50%; color: #fff; box-shadow: 0 0 5px rgba(0,0,0,.2); text-align: left; display: inline-block; box-sizing: border-box; padding-left: 3px; width: 16px; line-height: 16px; height: 16px; font-size: 12px; font-style: normal; vertical-align: middle; margin-top: -4px; margin-left: 3px; cursor: pointer; transition: all .3s; } button.red-ball > i:hover { background-color: #e71111; } .imgmakerleft button { display: inline-block; border-radius: 3px; margin: auto; height: 30px; width: 80px; background-color: #eee; margin-top: 5px; } .imgmakerleft button.active { background-color: #3b8cff; color: #fff; } .imgmaker { display: table; width: 100%; table-layout: fixed; } .imgmaker > div { display: table-cell; vertical-align: top; } .imgmakerleft { width: 200px; font-size: 0; text-align: center; } .imgmakerleft button { font-size: 14px; } * { outline: none; font-family: 微软雅黑; } .imgmakerright > div { overflow: auto; position: relative; } .imgmakerright > div > img { position: absolute; left: 0; top: 0; } .dtreebox { overflow:auto } </style> <script type="text/javascript"> $(function () { $(".imgmakerleft>button").click( function aa() { $(".imgmakerleft>button").removeClass("active"); $(this).addClass("active") } ); function setRedBall(r) { var $wrap = $('.imgmakerright>div'); var radius = r; var x, y, offset; return function (e) { var mytxt=$("button.active").text(); offset = $(this).offset(); x = e.pageX - offset.left; y = e.pageY - offset.top; $('<button class="red-ball"></button>').text(mytxt).append("<i class='close'>×</i>").css({ left: x - radius, top: y - radius, }).appendTo(this); $(".red-ball").click(function(event){ event.stopPropagation(); }); $(".close").click(function(event){ event.stopPropagation(); $(this).parent().hide(); }); } } $('.imgmakerright>div').on('click', setRedBall(0)); }) </script> </head> <body> <div class="imgmaker"> <div class="imgmakerleft"> <button name="Abutton1">优秀</button> <button class="active" name="Abutton1">良好</button> <button name="Abutton1">一般</button><button name="Abutton1">很差</button> </div> <div class="imgmakerright"> <div><img alt="" src="http://img18.3lian.com/d/file/201709/23/f7c0def8f522af91da820bcef38584c9.jpg" ></div> </div> </div> </body> </html> ```
怎么处理表单提交到后台的对象数组?
//保存所有区块 $('#btn_save').click(function(){ var data = []; $('.box').each(function(){ var box = {}; box['id'] = $(this).attr('dataId'); box['text'] = $(this).find('.content').text(); box['color'] = $(this).find('.bg').css('background-color'); box['height'] = $(this).height(); box['width'] = $(this).width(); box['pageX'] = $(this).position().left; box['pageY'] = $(this).position().top; console.dir(box); data.push(box); }); $("passdata").val(data); $("form").submit(); }); 我将data赋值到表单隐藏域passdata,然后提交表单,servlet页面也怎么处理这个对象,获取到数值。 下面是data对象的值。 var loadData = [{id : 1001,text : "C16\n16.5\nasdf",color : "rgb(255, 0, 0)",height : 20,width : 77,pageX : 627,pageY : 364}, {id : 1008,text : "C23\n16.08",color : "rgb(255, 165, 0)",height : 70,width : 77,pageX : 789,pageY : 439}];
jquery怎么知道调用当前方法的元素是哪个
怎么获取调用这个方法的元素 现在这样是错的 另外,多个元素的mousedown事件需要调用这个方法,mousedown事件的参数是怎么传递 下面这样吗 ``` $("#_this").children("span").mousedown(function(event){ mouseDown(event) }) function mouseDown(event){ var spaParentDiv=$(this).parent() var offsetDiv=spaParentDiv.offset() $("<div></div>").attr('id','change').css({'border':'1px solid black ','width':'201px','height':'201px','left':offsetDiv.left,'top':offsetDiv.top,'position':'absolute'}).appendTo('body') window.offsetChange={ x:event.pageX-$(this).parent().attr('offsetLeft'), y:event.pageY-$(this).parent().attr('offsetTop') } $(window).mouseup(function(event){ if(!$('#change')) return; var finalyPageX=event.pageX; var finalyPageY=event.pageY; finalyLeft=finalyPageX-offsetChange.x; finalyTop=finalyPageY-offsetChange.Y; spaParentDiv.attr({'left':finalyLeft,'top':finalyTop}) $('#change').remove() $('#change')=null ``` 。。。。。。。。。。。。。。。
div拖动效果,拖动缓慢鼠标无法离开div
后台主页,布局如下图 ![图片说明](https://img-ask.csdn.net/upload/201612/23/1482497558_79238.jpg) 拖动栏是个div,我要的功能是单击拖动栏后鼠标向右移动,左侧面积变大,右侧面积变小,向左移动反之。但我实现的效果是拖动栏移动缓慢,且拖动时鼠标无法离开div离开后就拖不动,gif图如下![图片说明](https://img-ask.csdn.net/upload/201612/23/1482497751_120985.gif) 想请教下各路大神,有没有什么好的方案能快速拖动,js代码如下 var mousex = 0; var divLeft; $('.move-div').mousedown(function (e) { var offset = $(this).offset(); divLeft = parseInt(offset.left, 10); mousex = e.pageX; $(this).bind('mousemove', dragElement); }); function dragElement(event) { var left = divLeft + (event.pageX - mousex); var thirdMarginLeft = $(this).width() + left; //前2个div的宽度 var thirdWidth = screen.width - $(this).width() - left; //第3个div的宽度 $(this).css({ 'left': left + 'px', 'position': 'absolute' }); $(this).prev(".folding-div").css({ 'width': left+"px" }); $(this).next(".iframe-div").css({ "margin-left": thirdMarginLeft +"px", "width": thirdWidth + "px","position":"absolute"}); return false; } $(document).mouseup(function () { $('.move-div').unbind('mousemove'); });
关于jQuery拖拽问题。
如何给div限定移动边界呢,设置了_move=false但是当往回拖div的时候拖不动,谢谢。 ``` <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8"> <title> New Document </title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <style type="text/css"> /*模块拖拽*/ .drag{position:absolute; width:100px; height:100px; border:1px solid #ddd; background:#FBF2BD; text-align:center; line-height:100px; padding:5px; top:100px; left:390px; cursor:move; } .box{ width:900px; height:500px; background:#AAA; position:absolute; top:36px; left:50px; } </style> <script type="text/javascript"> // 模块拖拽 $(function(){ var _move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(".drag").each(function(index) { $(this).text("机柜"+(index+1))//机柜编号 $(this).mousedown(function(e){ _move=true; _x=e.pageX-parseInt($(this).css("left")); _y=e.pageY-parseInt($(this).css("top")); $(this).fadeTo(20, 0.5); //点击后开始拖动并透明显示 }).mousemove(function(e){ if(_move){ var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置 var y=e.pageY-_y; var left=$(this).position().left; var top=$(this).position().top; var _left=$(".box").position().left; var _top=$(".box").position().top; $(this).css({top:y,left:x});//新位置 if(left<=_left){ _move=false//限定边界 } } }).mouseup(function(){ _move=false; $(this).fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明 }); }) }); </script> </head> <body> <div class="box"> <div class="drag"></div> <div class="drag"></div> <div class="drag"></div> <div class="drag"></div> <div class="drag"></div> <div class="drag"></div> </div> </body> </html> ```
如果实现HTML5在手机上的图片划动效果
![图片说明](https://img-ask.csdn.net/upload/201601/06/1452057289_21065.jpg) 比如像京东的页面这样,这些图片在手机上是可以左右滑动,但是页面上不会有滑动条显示的,我有的思路大概是这样 ``` <div style="overflow: hidden;background: #000;overflow-x: auto;z-index: 1;margin-top: 10px;" > <div style="width: 600px;"> <div style="display: inline-block; width: 100px;height: 100px;background:#fff; "></div> <div style="display: inline-block; width: 100px;height: 100px;background:blue; "></div> <div style="display: inline-block; width: 100px;height: 100px;background:green; "></div> <div style="display: inline-block; width: 100px;height: 100px;background:red; "></div> <div style="display: inline-block; width: 100px;height: 100px;background:yellow; "></div> </div> </div> ``` 但是这样的话会出现一个滑动条, 还有一种就是写touchStart,这种事件的方法,但是写这种事件我只能做到手指划动多少,图片移动多远距离,做不出来向京东展示商品那样那种很顺畅的感觉,这一块要怎么实现, 有没有大神给些代码或是给点思路,或是提供一下第三方插件也行 我所能实现的代码如下, 但是都不太理想: ``` <!DOCTYPE html> <html> <head> <title>商品查询</title> <meta name="author" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection" content="telephone=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> <script type="text/javascript"> var startX = 0,moveX = 0;c = 0; var isFirst = 0; $(function() { function touchStart(e){ isFirst ++; startX = e.touches[0].pageX; } function touchMove(e){ moveX = e.touches[0].pageX; if(isFirst == 1) c = moveX - startX; else{ c = c + (moveX - startX); startX = moveX; } $('#spText').html('移动' + (moveX - startX) + '总偏'+c); $('#abc')[0].style.webkitTransform = 'translate(' + c + 'px)'; } $('#abc')[0].addEventListener("touchstart",touchStart,false); $('#abc')[0].addEventListener("touchmove",touchMove,false); }) </script> </head> <body id="body"> <div style="overflow: hidden;background: #000;" > <div style="width: 600px;" id="abc"> <div style="display: inline-block; width: 100px;height: 100px;background:#fff; "></div> <div style="display: inline-block; width: 100px;height: 100px;background:blue; "></div> <div style="display: inline-block; width: 100px;height: 100px;background:green; "></div> <div style="display: inline-block; width: 100px;height: 100px;background:red; "></div> <div style="display: inline-block; width: 100px;height: 100px;background:yellow; "></div> </div> </div> <div style="overflow: hidden;background: #000;overflow-x: auto;z-index: 1;margin-top: 10px;" > <div style="width: 600px;"> <div style="display: inline-block; width: 100px;height: 100px;background:#fff; "></div> <div style="display: inline-block; width: 100px;height: 100px;background:blue; "></div> <div style="display: inline-block; width: 100px;height: 100px;background:green; "></div> <div style="display: inline-block; width: 100px;height: 100px;background:red; "></div> <div style="display: inline-block; width: 100px;height: 100px;background:yellow; "></div> </div> </div> <span id="spText">X轴移动大小:0</span> </body> </html> ```
js 代码功能是按下左键拖动div,并且拖动时,div不动,产生一个新的div
接在题目后:新的div被拖动,放开左键,新的div消失,原div出现在要拖动到的位置 原来是一开始创建一个新的div,隐藏他,按下左键时,显示他。 我现在想在按下左键时才创建新的div,松开时,去除他。 ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div>不是获取我</div> <div id="_this"> <span> 来获取我的内容 </span> </div> <div id="_that"> <span> 第三个div </span> </div> </body> <script> var a = false; var offset; var offset2; //第二个div var b=document.getElementById('_this'); b.style.width='200px'; b.style.height='200px'; b.style.position='absolute'; b.style.backgroundColor="#666"; b.style.cssFloat='left'; //第二个div中的span var spa=b.getElementsByTagName('span'); var spa0=spa.item(0); spa0.style.width='200px'; spa0.style.height='30px'; spa0.style.backgroundColor="red"; spa0.style.display='inline-block'; //第三个div var div3=document.getElementById('_that'); div3.style.width='200px'; div3.style.height='200px'; div3.style.position='absolute'; div3.style.backgroundColor="#666"; div3.style.cssFloat='left'; div3.style.left='500px'; //第三个div中的span var div3_spa=div3.getElementsByTagName('span'); var div3_spa0=div3_spa.item(0); div3_spa0.style.width='200px'; div3_spa0.style.height='30px'; div3_spa0.style.backgroundColor="red"; div3_spa0.style.display='inline-block'; //接收虚框 var ChangeAll; window.divChange=document.createElement('div'); divChange.setAttribute('id','Change'); divChange.style.border='1px black solid'; divChange.style.width='200px'; divChange.style.height='200px'; divChange.style.position='absolute'; document.body.appendChild(divChange); ChangeAll=document.getElementById('Change'); ChangeAll.style.display='none'; div3_spa0.onmousedown=mouseDown; spa0.onmousedown=mouseDown; function mouseDown(event){ //虚框 ChangeAll.style.display='inline-block'; a = true; window.id=this.parentElement; offset = { x:event.pageX-id.offsetLeft, y:event.pageY-id.offsetTop } ChangeAll.onmousedown=function mouseDown2(event){ offset2={ x:event.pageX-Change.offsetLeft, y:event.pageY-Change.offsetTop } } } ChangeAll.onmouseup=function(event){ a=false; var d= event.pageX; var e=event.pageY; id.style.left=(d-offset.x)+"px"; id.style.top=(e-offset.y)+"px"; ChangeAll.style.display='none'; } window.onmousemove=function(event){ if (!a) return; var d= event.pageX; var e=event.pageY; Change.style.left=(d-offset.x)+"px"; Change.style.top=(e-offset.y)+"px"; } </script> </html> ```
爬虫福利二 之 妹子图网MM批量下载
爬虫福利一:27报网MM批量下载    点击 看了本文,相信大家对爬虫一定会产生强烈的兴趣,激励自己去学习爬虫,在这里提前祝:大家学有所成! 目标网站:妹子图网 环境:Python3.x 相关第三方模块:requests、beautifulsoup4 Re:各位在测试时只需要将代码里的变量 path 指定为你当前系统要保存的路径,使用 python xxx.py 或IDE运行即可。
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、PDF搜索网站推荐 对于大部
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 顺便拉下票,我在参加csdn博客之星竞选,欢迎投票支持,每个QQ或者微信每天都可以投5票,扫二维码即可,http://m234140.nofollow.ax.
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入  假设现有4个人
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发
网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 欢迎 改进 留言。 演示地点跳到演示地点 html代码如下`&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;music&lt;/title&gt; &lt;meta charset="utf-8"&gt
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。 1. for - else 什么?不是 if 和 else 才
数据库优化 - SQL优化
前面一篇文章从实例的角度进行数据库优化,通过配置一些参数让数据库性能达到最优。但是一些“不好”的SQL也会导致数据库查询变慢,影响业务流程。本文从SQL角度进行数据库优化,提升SQL运行效率。 判断问题SQL 判断SQL是否有问题时可以通过两个表象进行判断: 系统级别表象 CPU消耗严重 IO等待严重 页面响应时间过长
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 c/c++ 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7
通俗易懂地给女朋友讲:线程池的内部原理
餐厅的约会 餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”我楞了一下,心里想女朋友今天是怎么了,怎么突然问出这么专业的问题,但做为一个专业人士在女朋友面前也不能露怯啊,想了一下便说:“我先给你讲讲我前同事老王的故事吧!” 大龄程序员老王 老王是一个已经北漂十多年的程序员,岁数大了,加班加不动了,升迁也无望,于是拿着手里
经典算法(5)杨辉三角
写在前面: 我是 扬帆向海,这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。 这博客是对自己学习的一点点总结及记录,如果您对 Java、算法 感兴趣,可以关注我的动态,我们一起学习。 用知识改变命运,让我们的家人过上更好的生活。 目录一、杨辉三角的介绍二、杨辉三角的算法思想三、代码实现1.第一种写法2.第二种写法 一、杨辉三角的介绍 百度
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹
面试官:你连RESTful都不知道我怎么敢要你?
面试官:了解RESTful吗? 我:听说过。 面试官:那什么是RESTful? 我:就是用起来很规范,挺好的 面试官:是RESTful挺好的,还是自我感觉挺好的 我:都挺好的。 面试官:… 把门关上。 我:… 要干嘛?先关上再说。 面试官:我说出去把门关上。 我:what ?,夺门而去 文章目录01 前言02 RESTful的来源03 RESTful6大原则1. C-S架构2. 无状态3.统一的接
为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?
关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。 声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看
SQL-小白最佳入门sql查询一
一 说明 如果是初学者,建议去网上寻找安装Mysql的文章安装,以及使用navicat连接数据库,以后的示例基本是使用mysql数据库管理系统; 二 准备前提 需要建立一张学生表,列分别是id,名称,年龄,学生信息;本示例中文章篇幅原因SQL注释略; 建表语句: CREATE TABLE `student` ( `id` int(11) NOT NULL AUTO_INCREMENT, `
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // dosho
【图解经典算法题】如何用一行代码解决约瑟夫环问题
约瑟夫环问题算是很经典的题了,估计大家都听说过,然后我就在一次笔试中遇到了,下面我就用 3 种方法来详细讲解一下这道题,最后一种方法学了之后保证让你可以让你装逼。 问题描述:编号为 1-N 的 N 个士兵围坐在一起形成一个圆圈,从编号为 1 的士兵开始依次报数(1,2,3…这样依次报),数到 m 的 士兵会被杀死出列,之后的士兵再从 1 开始报数。直到最后剩下一士兵,求这个士兵的编号。 1、方
致 Python 初学者
文章目录1. 前言2. 明确学习目标,不急于求成,不好高骛远3. 在开始学习 Python 之前,你需要做一些准备2.1 Python 的各种发行版2.2 安装 Python2.3 选择一款趁手的开发工具3. 习惯使用IDLE,这是学习python最好的方式4. 严格遵从编码规范5. 代码的运行、调试5. 模块管理5.1 同时安装了py2/py35.2 使用Anaconda,或者通过IDE来安装模
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,
程序员:我终于知道post和get的区别
IT界知名的程序员曾说:对于那些月薪三万以下,自称IT工程师的码农们,其实我们从来没有把他们归为我们IT工程师的队伍。他们虽然总是以IT工程师自居,但只是他们一厢情愿罢了。 此话一出,不知激起了多少(码农)程序员的愤怒,却又无可奈何,于是码农问程序员。 码农:你知道get和post请求到底有什么区别? 程序员:你看这篇就知道了。 码农:你月薪三万了? 程序员:嗯。 码农:你是怎么做到的? 程序员:
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
      11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1
程序员把地府后台管理系统做出来了,还有3.0版本!12月7号最新消息:已在开发中有github地址
第一幕:缘起 听说阎王爷要做个生死簿后台管理系统,我们派去了一个程序员…… 996程序员做的梦: 第一场:团队招募 为了应对地府管理危机,阎王打算找“人”开发一套地府后台管理系统,于是就在地府总经办群中发了项目需求。 话说还是中国电信的信号好,地府都是满格,哈哈!!! 经常会有外行朋友问:看某网站做的不错,功能也简单,你帮忙做一下? 而这次,面对这样的需求,这个程序员
网易云6亿用户音乐推荐算法
网易云音乐是音乐爱好者的集聚地,云音乐推荐系统致力于通过 AI 算法的落地,实现用户千人千面的个性化推荐,为用户带来不一样的听歌体验。 本次分享重点介绍 AI 算法在音乐推荐中的应用实践,以及在算法落地过程中遇到的挑战和解决方案。 将从如下两个部分展开: AI 算法在音乐推荐中的应用 音乐场景下的 AI 思考 从 2013 年 4 月正式上线至今,网易云音乐平台持续提供着:乐屏社区、UGC
【技巧总结】位运算装逼指南
位算法的效率有多快我就不说,不信你可以去用 10 亿个数据模拟一下,今天给大家讲一讲位运算的一些经典例子。不过,最重要的不是看懂了这些例子就好,而是要在以后多去运用位运算这些技巧,当然,采用位运算,也是可以装逼的,不信,你往下看。我会从最简单的讲起,一道比一道难度递增,不过居然是讲技巧,那么也不会太难,相信你分分钟看懂。 判断奇偶数 判断一个数是基于还是偶数,相信很多人都做过,一般的做法的代码如下
日均350000亿接入量,腾讯TubeMQ性能超过Kafka
整理 | 夕颜出品 | AI科技大本营(ID:rgznai100) 【导读】近日,腾讯开源动作不断,相继开源了分布式消息中间件TubeMQ,基于最主流的 OpenJDK8开发的
8年经验面试官详解 Java 面试秘诀
    作者 | 胡书敏 责编 | 刘静 出品 | CSDN(ID:CSDNnews) 本人目前在一家知名外企担任架构师,而且最近八年来,在多家外企和互联网公司担任Java技术面试官,前后累计面试了有两三百位候选人。在本文里,就将结合本人的面试经验,针对Java初学者、Java初级开发和Java开发,给出若干准备简历和准备面试的建议。   Java程序员准备和投递简历的实
面试官如何考察你的思维方式?
1.两种思维方式在求职面试中,经常会考察这种问题:北京有多少量特斯拉汽车? 某胡同口的煎饼摊一年能卖出多少个煎饼? 深圳有多少个产品经理? 一辆公交车里能装下多少个乒乓球? 一
相关热词 c# 二进制截断字符串 c#实现窗体设计器 c#检测是否为微信 c# plc s1200 c#里氏转换原则 c# 主界面 c# do loop c#存为组套 模板 c# 停掉协程 c# rgb 读取图片
立即提问