web前端|js教程
div,页面拖动,缩放,遮罩
web前端-js教程
二维码三合一网页源码,Ubuntu启动110错误,jdk8和tomcat6,爬虫哥的帖子,php面试技术难点交流教程,广西seo优lzw
卖东西的源码,js文件用vscode反压缩,ubuntu 静态地址,tomcat的jdk下载,爬虫实用展示,php blog系统,东光关键词seo优化价格,dedecms婚纱摄影网站模板lzw
#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{ position:absolute; background:#00F; width:3px; height:3px; z-index:6; font-size:0; }
网上商城网站主页ui源码,华硕Ubuntu系统引导,tomcat7界面怎么用,镀金的天空 爬虫,二次开发php学习外包,学seo编程lzw
#rLeftDown,#rRightUp{cursor:ne-resize;} #rRightDown,#rLeftUp{cursor:nw-resize;} #rRight,#rLeft{cursor:e-resize;} #rUp,#rDown{cursor:n-resize;}
#rLeftDown{left:-4px;bottom:-4px;} #rRightUp{right:-4px;top:-4px;} #rRightDown{right:-4px;bottom:-4px;background-color:#00F;} #rLeftUp{left:-4px;top:-4px;} #rRight{right:-4px;top:50%;margin-top:-4px;} #rLeft{left:-4px;top:50%;margin-top:-4px;} #rUp{top:-4px;left:50%;margin-left:-4px;} #rDown{bottom:-4px;left:50%;margin-left:-4px;}
<!– function createIframe(){ //mask遮罩层 var newMask=document.createElement("div"); newMask.id="mDiv"; newMask.style.position="absolute"; newMask.style.zIndex="1"; _scrollWidth=Math.max(document.body.scrollWidth,document.documentElement.scrollWidth); _scrollHeight=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); newMask.style.width=_scrollWidth+"px"; newMask.style.height=_scrollHeight+"px"; newMask.style.top="0px"; newMask.style.left="0px"; newMask.style.background = "#FFFFFF"; newMask.style.filter="alpha(opacity=10)"; newMask.style.opacity="0.10"; newMask.style.display= one; // create div var objDiv=document.createElement("div"); objDiv.id="div1"; objDiv.name="div1"; objDiv.style.width="480px"; objDiv.style.height="204px"; objDiv.style.left=(_scrollWidth-480)/2+"px"; objDiv.style.top=(_scrollHeight-204)/2+"px"; objDiv.style.position="absolute"; objDiv.style.zIndex="2"; //加了这个语句让objDiv浮在newMask之上 objDiv.style.display="none"; //让objDiv预先隐藏 objDiv.style.backgroundColor = "#55A0FF"; //添加top上面内容 var str = ""; str = str +
有关DIV 拖动、缩放、遮罩效果
‘; str = str + ‘
‘; str = str + ”; str = str + ‘
‘;//左下角div str = str + ‘
‘;//右上角div str = str + ‘
‘;//右下角div str = str + ‘
‘;//左上角div str = str + ‘
‘;//右边div str = str + ‘
‘;//左边div str = str + ‘
‘;//上边div str = str + ‘
‘;//下边div objDiv.innerHTML = str; //添加边框样式 objDiv.style.border=”solid #0033FF 3px;”; objDiv.style.borderTop = “2px solid #55A0FF”; objDiv.style.borderLeft = “2px solid #55A0FF”; objDiv.style.borderRight = “2px solid #55A0FF”; objDiv.style.borderBottom = “2px solid #55A0FF”; //create iframe var frm=document.createElement(“iframe”); frm.id=”ifrm”; frm.name=”ifrm”; frm.style.position=”absolute”; frm.style.width=”100%”; frm.style.height=180; frm.style.top=20; frm.style.display=”; frm.frameborder=0; objDiv.appendChild(frm); document.body.appendChild(newMask); document.body.appendChild(objDiv); //实现拖动效果 var objDrag=document.getElementById(“drag”); var drag=false; var dragX=0; var dragY=0; objDrag.attachEvent(“onmousedown”,startDrag); function startDrag(){ if(event.button == 1 && event.srcElement.tagName.toUpperCase() == “DIV”){ objDrag.setCapture(); objDrag.style.cursor = “move”; objDrag.style.zIndex = “1001”; drag = true; dragX = event.clientX; dragY = event.clientY; event.cancelBubble=true; event.returnValue=false; } }; objDrag.attachEvent(“onmousemove”,Drag); function Drag(){ if(drag){ var oldwin = objDrag.parentNode; oldwin.style.left = oldwin.offsetLeft + event.clientX – dragX; oldwin.style.top = oldwin.offsetTop + event.clientY – dragY; dragX = event.clientX; dragY = event.clientY; } }; objDrag.attachEvent(“onmouseup”,stopDrag); function stopDrag(){ objDrag.style.zIndex = “4”; objDrag.style.cursor = “default”; objDrag.releaseCapture(); drag=false; }; } //关闭按钮样式 function handleOut(){ var objButton = document.getElementById(“objClose”); objButton.style.backgroundColor = “#FF0000”; objButton.style.zIndex = “5”; } function handleOver(){ var objButton = document.getElementById(“objClose”); objButton.style.backgroundColor = “#FF8080”; objButton.style.zIndex = “1001”; } //添加iframe内容 function htmlEditor(){ var frm=document.getElementById(“ifrm”); var objDiv=document.getElementById(“div1”); var mDiv=document.getElementById(“mDiv”); mDiv.style.display=”; var iframeTextContent=”; iframeTextContent+=’ ‘; iframeTextContent+=’ ‘; iframeTextContent+=’ ‘; iframeTextContent+=’ ‘; iframeTextContent+=’ ‘; iframeTextContent+=’ ‘; iframeTextContent+=’ ‘; iframeTextContent+=’ ‘; iframeTextContent+=’ ‘; frm.contentWindow.document.designMode=’off’; frm.contentWindow.document.open(); frm.contentWindow.document.write(iframeTextContent); frm.contentWindow.document.close(); objDiv.style.display = “”; //显示浮动的div //点击go按钮关闭页面 var objGo=frm.contentWindow.document.getElementById(“btGo”); objGo.attachEvent(“onclick”,function (){HideIframe(mDiv,objDiv);}); } //关闭页面 function HideIframe(mDiv,objDiv){ mDiv.style.display=’none’; objDiv.style.display = “none”; //隐藏浮动的div } //实现缩放效果 var down = 0; function moveStart(obj){ var objDiv = obj.parentNode; obj.setCapture(); obj.style.zIndex = “1001”; down = 1; _styleWidth = objDiv.clientWidth; _styleHeight = objDiv.clientHeight; _styleLeft = objDiv.offsetLeft; _styleTop = objDiv.offsetTop; _sideLeft = event.clientX – _styleWidth; _sideRight = event.clientX + _styleWidth; _sideUp = event.clientY – _styleHeight; _sideDown = event.clientY + _styleHeight; _fixLeft = _styleWidth + _styleLeft; _fixTop = _styleHeight + _styleTop; event.cancelBubble = true; event.returnValue = false; } function moving(obj,num){ if(down){ var objDiv = obj.parentNode; var frm = document.getElementById(“ifrm”); switch(num){ //左上角 case 0: _styleWidth = Math.max(xx = _sideRight – event.clientX,0); objDiv.style.width = _styleWidth; objDiv.style.left = _fixLeft – _styleWidth; _styleHeight = Math.max(yy = _sideDown – event.clientY,0); objDiv.style.height = _styleHeight; objDiv.style.top = _fixTop – _styleHeight; try{ frm.style.width = (xx – 4) + “px”; frm.style.height = (yy – 24) + “px”; }catch(e){} break; //上边 case 1: _styleHeight = Math.max(yy = _sideDown – event.clientY,0); objDiv.style.height = _styleHeight; objDiv.style.top = _fixTop – _styleHeight; try{ frm.style.height = (yy – 24) + “px”; }catch(e){} break; //右上角 case 2: _styleWidth = Math.max(xx = event.clientX – _sideLeft,0); objDiv.style.width = _styleWidth; _styleHeight = Math.max(yy = _sideDown – event.clientY,0); objDiv.style.height = _styleHeight; objDiv.style.top = _fixTop – _styleHeight; try{ frm.style.width = (xx – 4) + “px”; frm.style.height = (yy – 24) + “px”; }catch(e){} break; //右边 case 3: _styleWidth = Math.max(xx = event.clientX – _sideLeft,0); objDiv.style.width = _styleWidth; try{ frm.style.width = (xx – 4) + “px”; }catch(e){} break; //右下角 case 4: _styleWidth = Math.max(xx = event.clientX – _sideLeft,0); objDiv.style.width = _styleWidth; _styleHeight = Math.max(yy = event.clientY – _sideUp,0); objDiv.style.height = _styleHeight; try{ frm.style.width = (xx – 4) + “px”; frm.style.height = (yy – 24) + “px”; }catch(e){} break; //下边 case 5: _styleHeight = Math.max(yy = event.clientY – _sideUp,0); objDiv.style.height = _styleHeight; try{ frm.style.height = (yy – 24) + “px”; }catch(e){} break; //左下角 case 6: _styleWidth = Math.max(xx = _sideRight – event.clientX,0); objDiv.style.width = _styleWidth; objDiv.style.left = _fixLeft – _styleWidth; _styleHeight = Math.max(yy = event.clientY – _sideUp,0); objDiv.style.height = _styleHeight; try{ frm.style.width = (xx – 4) + “px”; frm.style.height = (yy – 24) + “px”; }catch(e){} break; //左边 case 7: _styleWidth = Math.max(xx = _sideRight – event.clientX,0); objDiv.style.width = _styleWidth; objDiv.style.left = _fixLeft – _styleWidth; try{ frm.style.width = (xx – 4) + “px”; }catch(e){} break; }; } } function moveEnd(obj){ down = 0; obj.style.cursor = “default”; obj.style.zIndex = “6”; obj.releaseCapture(); }; // –>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
