教程集 > 脚本编程 > javascript > 正文视觉享受的鼠标圈选效果

视觉享受的鼠标圈选效果

发布时间：2023-04-29 编辑：jiaochengji.com

教程集为您提供视觉享受的鼠标圈选效果等资源，欢迎您收藏本站，我们将为您提供最新的视觉享受的鼠标圈选效果资源

提示：您可以先修改部分代码再运行

<html>  <style>  body{margin:0;font-size:10pt;background:#666666;padding:100px}  #mousewindow{position:absolute;font-size:0;border:1px dashed #ff6600;display:none;background:#ffffcc;opacity: 0.50;filter:alpha(opacity=50)}  #nofocus{border:0;width:0;height:0;font-size:0;background:none;overflow:hidden;}  </style>  <body onload=myctrl()>  <div id=mousewindow><input id=nofocus></div>  <script>  //var x,y,ox,oy,osl,ost,sl,st,cw,ch,xy=false,chk,imgurl,ctrlable=false  function myctrl(){  var x,y,ox,oy,osl,ost,sl,st,cw,ch,xy=false,chk  document.onmousedown=function(evt)	{  evt=evt||window.event  //alert(evt.srcElement.tagName)  ox=evt.clientX;oy=evt.clientY  osl=document.body.scrollLeft;ost=document.body.scrollTop  cw=document.body.clientWidth;ch=document.body.clientHeight  //if(evt.srcElement.tagName=="BODY"&&ox<=cw&&oy<=ch)  if(ox<=cw&&oy<=ch)  {  xy=true;  mousewindow.style.left=ox osl "px";mousewindow.style.top=oy ost "px"  chk=document.all.tags("input")  for(i=0;i<chk.length;i  ){  if(chk[i].type=="checkbox"){chk[i].chkctrl=0}  			 }  }  					}  document.onmousemove=function(evt)	{  evt=evt||window.event  if(xy==true)	{  //nofocus.focus()  x=evt.clientX;y=evt.clientY  sl=document.body.scrollLeft;st=document.body.scrollTop  mousewindow.style.display="block"  nofocus.focus()  mousewindow.style.width=Math.abs(x-ox sl-osl) "px"  mousewindow.style.height=Math.abs(y-oy st-ost) "px"  if(x>ox){mousewindow.style.left=ox osl "px"}  if(x<ox){mousewindow.style.left=x sl "px"}  if(y>oy){mousewindow.style.top=oy ost "px"}  if(y<oy){mousewindow.style.top=y st "px"}  minx=parseInt(mousewindow.style.left "px")  maxx=minx parseInt(mousewindow.style.width)  miny=parseInt(mousewindow.style.top)  maxy=miny parseInt(mousewindow.style.height)  ctrl(minx,maxx,miny,maxy)  		}  					 }  document.onmouseup=function()	{  xy=false  mousewindow.style.display="none"  mousewindow.style.width=0  mousewindow.style.height=0  				}  }  function ctrl(minx,maxx,miny,maxy){  chk=document.all.tags("input")  for(i=0;i<chk.length;i  ){  var obj=chk[i]  var mmx=obj.offsetLeft,mmy=obj.offsetTop  while(obj=obj.offsetParent)  {mmx =obj.offsetLeft;mmy =obj.offsetTop;}  if(mmx>=minx&&mmx<=maxx&&mmy>=miny&&mmy<=maxy)  {  if(chk[i].chkctrl=="0"&&chk[i].checked==false){chk[i].checked=true;chk[i].chkctrl=1}  if(chk[i].chkctrl=="0"&&chk[i].checked==true){chk[i].checked=false;chk[i].chkctrl=-1}  }  else	{  if(chk[i].checked==true&&chk[i].chkctrl!=0){chk[i].checked=false;chk[i].chkctrl=0}  if(chk[i].checked==false&&chk[i].chkctrl!=0){chk[i].checked=true;chk[i].chkctrl=0}  	}                          }  				 }  </script>  <div align=center style="width:100%;height:100%">  <input type=checkbox><input type=checkbox><input type=checkbox><input type=checkbox><input   type=checkbox><br>  <input type=checkbox><input type=checkbox><input type=checkbox><input type=checkbox><input   type=checkbox><br>  <input type=checkbox><input type=checkbox><input type=checkbox><input type=checkbox><input   type=checkbox><br>  <input type=checkbox><input type=checkbox><input type=checkbox><input type=checkbox><input   type=checkbox><br>  <input type=checkbox><input type=checkbox><input type=checkbox><input type=checkbox><input   type=checkbox><br>  </div>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jQuery对话框插件 jBox
优酷视频分享到朋友圈的方法
 Windows7系统鼠标刷新率125Hz锁定之破解的办法
 photoshop制作冲光视觉效果教程
 Illustrator创建漂亮的无缝几何图案制作教程
 photoshop快速去黑眼圈和调整不均肤色后期处理教程
 ThinkPad Helix：鼠标光标停留在触摸屏并且周围有小方块或者虚幻的圆圈
 Illustrator绘制色彩丰富的卡通猫头鹰教程分享
 鼠标的滚轮失灵怎么办？
photoshop设计冲光视觉效果制作教程

上一篇：DOM创建和删除层下一篇：51job效果

[关闭]

视觉享受的鼠标圈选效果

最近更新

浏览排行