JavaScript简单实现鼠标移动切换图片的方法,拖动
分类:关于美高梅

您也许感兴趣的稿子:

  • JavaScript达成鼠标滑过处生成气泡的法子
  • javascript落到实处图片跟随鼠标移动作效果果的主意
  • JavaScript贯彻鼠标点击后层进行效果的章程
  • 最精简的JavaScript落成鼠标拖动作效果果的不二法门
  • javascript实时收获鼠标坐标值并出示的法子
  • javascript贯彻鼠标拖动改动层大小的点子
  • 美高梅网址 ,JavaScript完成鼠标滑过图片转换效果的议程
  • javascript落到实处简单的鼠标拖动作效果果实例
  • javascript获得当前鼠标坐标的方法
  • JavaScript中获得鼠标地点相关属性计算
  • JavaScript检查实验鼠标移动方向的诀要

上面先写贰个差十分的少的能够完毕鼠标拖动的成效。

firefox下完成可拖动层代码

你可能感兴趣的篇章:

  • javascript DIV跟随鼠标移动
  • js图片跟随鼠标移动代码
  • JavaScript检测鼠标移动方向的措施
  • javascript贯彻图片跟随鼠标移动效果的格局
  • js达成文字跟随鼠标移动而活动的办法
  • JavaScript获取鼠标移动时的坐标(包容IE8、chome谷歌(Google)、Firefox)
  • js+html+css达成鼠标移动div实例
  • js鼠标点击开关切换图片-图片自动切换-点击左右开关切换特效代码
  • js完结利用鼠标拖拽切换图片的办法
  • js动态切换图片的主意
  • JS鼠标滑过图片时切换图片达成思路

本文实例汇报了JavaScript轻便完结鼠标移动切换图片的不二等秘书诀。分享给大家供大家参照他事他说加以考察...

<!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>Untitled 1</title> 
<style type="text/css"> 
.style1 { 
  font-size: x-small; 
} 
</style> 
<script type="text/javascript"> 
/**
  画点
*/  
function makedot(x, y){ 
 pointDiv = "<div style='height:1px;position:absolute;left:" + x +
   "px;top:" + y + "px;width:1px;background:#f00;overflow:hidden'></div>"; 
 return pointDiv;
} 
/** 
 根据两点坐标画直线。 
*/ 

function line(x1,y1,x2,y2){ 
 var slope; //斜率
 var direction;//坐标运动方向
 var tx = x2 - x1;
 var ty = y2 - y1;
 if(tx == 0 && ty == 0)return;
 var points = "";
 var axis;//坐标轴上的坐标
 if(Math.abs(tx) >= Math.abs(ty)){//在x轴上移动
   direction = tx > 0 ? 1 : -1;
   tx = Math.abs(tx);
   slope = ty / tx;
   axis = x1;
   for(i = 0; i < tx; i ++){
     points += makedot(axis, y1 + i * slope);
     axis += direction;
   }

 }else{//在y轴上移动
   direction = ty > 0 ? 1 : -1;
   ty = Math.abs(ty);
   slope = tx / ty; 
   axis = y1;  
   for(i = 0; i < ty; i ++){
     points += makedot(x1 + i * slope, axis);
     axis += direction;
   }
 }
 var container = document.getElementById("container");
 container.innerHTML += points; 
} 
var oldPoint = null;
//获取鼠标位置
function mousePosition(ev){
  ev = ev || window.event;
  if(ev.pageX || ev.pageY){
    return {x:ev.pageX, y:ev.pageY};
  }
  var doc = document.documentElement, body = document.body;
  var pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
  var pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);    
  return {x:pageX, y:pageY};
}

function recordPoint(ev){

  var point = mousePosition(ev);
  if(oldPoint != null){
    line(oldPoint.x, oldPoint.y, point.x, point.y);
  }
  oldPoint = point;
}
</script>
</head> 

<body> 
<div id="container" style="width: 1000px; height: 600px; border:1px #bfbfbf solid;" onclick="recordPoint(event);">

</div>
<script type="text/javascript"> 
  //line(19,19,22,300); 
</script>
</body> 
</html>

你或然感兴趣的篇章:

  • javascript跟随鼠标x,y坐标移动的字效果
  • javascript跟随鼠标的文字带滚动作效果应
  • javascript表格隔行变色加鼠标移入移出及点击效果的不二诀要
  • javascript兑现淡驼灰的鼠标拖动选用框实例
  • JavaScript落成鼠标点击后层实行效果的主意
  • javascript落到实处图片跟随鼠标移动作效果果的议程
  • JavaScript兑现鼠标滑过处生成气泡的不二等秘书诀
  • JavaScript完成文字跟随鼠标特效

offsetX 设置或获得鼠标指针地点相对于触发事件的(this)对象的 x 坐标。

JavaScript简单达成鼠标移动切换图片的措施,javascript切换

本文实例叙述了JavaScript轻巧达成鼠标移动切换图片的方法。分享给我们供大家仿效,具体如下:

<title>JavaScript切换图片</title>
<script>
function showDaTu(src){
document.getElementById("defaultImg").src=src;
}
</script>
<img src="images/wall1.jpg" id="defaultImg">
<br><br><br>
<img src='images/wall_s1.jpg' onmouseover="showDaTu('images/wall1.jpg')">
<img src='images/wall_s2.jpg' onmouseover="showDaTu('images/wall2.jpg')">
<img src='images/wall_s3.jpg' onmouseover="showDaTu('images/wall3.jpg')">
<img src='images/wall_s4.jpg' onmouseover="showDaTu('images/wall4.jpg')">
<br>因图片较大,请等待图片加载完成……然后鼠标放小图上就会切换了。

越来越多关于JavaScript相关内容感兴趣的读者可查阅本站专项论题:《JavaScript查找算法工夫总括》、《JavaScript动画特效与本领汇总》、《JavaScript错误与调整能力计算》、《JavaScript数据结构与算法技艺计算》、《JavaScript遍历算法与技能总计》及《JavaScript数学生运动算用法总计》

期望本文所述对大家JavaScript程序设计具备协助。

好了,上代码:

正文首要给我们介绍了有关firefox下js达成拖动层效果的格局,下边话相当的少说了,来一块看看详细的牵线吧。

要点一:如下,假使成分的侧边地点小于0时,给它赋值为0,倘诺超越可视窗大小减去成分本人的上涨的幅度的,给它赋值为 可视窗大小减成分本人宽度的差值。

你可能感兴趣的稿子:

  • js完结可拖动DIV的办法
  • js拖动div 当鼠标移动时整个div也相应的移动
  • JavaScript落实可拖拽的拖动层Div实例
  • 利用javascript移动div层-javascript 拖动层
  • html+javascript实现可拖动可提交的弹出层对话框效果
  • js之完全包容ie与firefox的拖动层代码[测量检验好用]
  • js完毕完美拖拽效果可拖动层与重放拖动规迹并体现拖动距离参数
  • javascript落成拖动层效果代码(符合规范且包容IE,chrome,firefox)
  • 二个很酷的拖动层的js类,包容IE及Firefox
  • JavaScript拖动层Div代码

要点二:

前言

用鼠标拖动五个要素,放到网页的轻便三个职分上,那是很分布的,举个例子比比较多博客模板版块地点能够友善拖动到对应岗位。

y 设置或获得鼠标指针地方相对于父文书档案的 y 像素坐标。

指望本文所述对我们的javascript程序设计有着支持。

以上便是那篇小说的全体内容了,希望本文的剧情对大家的上学或然干活有所自然的参阅学习价值,假如有疑难我们能够留言交换,多谢我们对剧本之家的支撑。

要点一:

screenY 设置或得到鼠标指针地方相对于顾客显示屏的 y 坐标。

要规定拖动的时候鼠标点在要素的地点,便是鼠标地点减去成分的左手距离。

screenX 设置或得到获取鼠标指针地方绝对于顾客显示屏的 x 坐标。

disx = oevent.clientX - box.offsetLeft;

如图:图片来源互连网

box.style.left = oevent.clientX - disx + "px";

美高梅网址 1

再改良一下,上边的鼠标拖动没有界定范围,一时会拖动窗口外面看不见了。上面就限制下范围

总结

拖动时元素的职位,鼠标的脚下岗位减去前边刚总结的值。

clientY 设置或得到鼠标指针地方相对于窗口顾客区域的 y 坐标,其中型客车户区域不富含窗口自个儿的控件和滚动条。

正文实例陈述了javascript完成轻巧的鼠标拖动效果。分享给大家供大家参谋。具体分析如下:

clientX 设置或获得鼠标指针地点相对于窗口客商区域的 x 坐标,在那之中型客车户区域不满含窗口本人的控件和滚动条。

当鼠标按下的时候,记录鼠标当前岗位和要素侧面距离的差值。
当鼠标移动的时候,给成分的职位赋值,就是鼠标的地方,减去刚才的差值。
当鼠标松手的时候,给鼠标移动和鼠标放手赋值null,让它们实际不是再有另外动作。

x 设置或获得鼠标指针地方相对于父文书档案的 x 像素坐标。

var boxl = oevent.clientX - disx;
if(boxl < 0){
  boxl =0;
  }else if(boxl > vieww - box.offsetWidth){
  boxl = vieww - box.offsetWidth;
  }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0;}
#box{width:100px;
height:100px;
background:#06c;
position:absolute;
}
</style>
<script>
window.onload = function(){
 var box = document.getElementById("box");
 var disx =0;
 var disy = 0;
 box.onmousedown = function(evt){
 var oevent = evt || window.event;
 disx = oevent.clientX - box.offsetLeft;
 disy = oevent.clientY - box.offsetTop;
 document.onmousemove = function(evt){
  var oevent = evt || window.event;
  var boxl = oevent.clientX - disx;
  var boxt = oevent.clientY - disy
  var vieww = document.documentElement.clientWidth || document.body.clientWidth;
  var viewh = document.documentElement.clientHeight || document.body.clientHeight;
  if(boxl < 0){
  boxl =0;
  }else if(boxl > vieww - box.offsetWidth){
  boxl = vieww - box.offsetWidth;
  }
  if(boxt < 0){
  boxt =0;
  }else if(boxt > viewh - box.offsetHeight){
  boxt = viewh- box.offsetHeight;
  }
  box.style.left = boxl + "px";
  box.style.top = boxt + "px";
 }
 document.onmouseup = function(){
  document.onmousemove = null;
  document.onmouseup = null;
 }
 return false;
 }
}
</script>
</head>
<body>
<h1>鼠标拖动</h1>
<div id="box"></div>
</body>
</html>

JavaScript 中部分定义精晓:clientX、clientY、offsetX、offsetY、screenX、screenY

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0; height:1500px;}
#box{width:100px; height:100px; background:#06c; position:absolute;}
</style>
<script>
window.onload = function(){
 var box = document.getElementById("box");
 var disx =0;
 var disy = 0;
 box.onmousedown = function(evt){
 var oevent = evt || window.event;
 disx = oevent.clientX - box.offsetLeft;
 disy = oevent.clientY - box.offsetTop;
 document.onmousemove = function(evt){
  var oevent = evt || window.event;
  box.style.left = oevent.clientX - disx + "px";
  box.style.top = oevent.clientY - disy + "px";
 }
 document.onmouseup = function(){
  document.onmousemove = null;
  document.onmouseup = null;
 }
 return false;
 }
}
</script>
</head>
<body>
<h1>鼠标拖动</h1>
<div id="box"></div>
</body>
</html>

offsetY 设置或得到鼠标指针位置相对于触发事件的(this)对象的 y 坐标。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>www.jb51.net 拖动层效果代码</title> 
<script> 
 var obj=0; 
 var x=0; 
 var y=0; 
 var ie = (navigator.appVersion.indexOf("MSIE")!=-1);//IE 
 var ff = (navigator.userAgent.indexOf("Firefox")!=-1);//Firefox 
 function find(evt,objDiv){ 
 obj = objDiv 
 if (ff){ 
  x = document.documentElement.scrollLeft + evt.layerX; 
  y = document.documentElement.scrollTop + evt.layerY; 

  if (document.documentElement.scrollTop > 0){ 
   y = evt.layerY - document.documentElement.scrollTop; 
  } 

  if (document.documentElement.scrollLeft > 0){ 
   x = evt.layerX - document.documentElement.scrollLeft; 
  } 
  } 
 if (ie){ 
  x = document.documentElement.scrollLeft + evt.offsetX; 
  y = document.documentElement.scrollTop + evt.offsetY; 

  if (document.documentElement.scrollTop > 0){ 
   y = evt.offsetY - document.documentElement.scrollTop; 
  } 

  if (document.documentElement.scrollLeft > 0){ 
   x = evt.offsetX - document.documentElement.scrollLeft; 
  } 
  } 
 } 
 function dragit(evt){ 
 if(obj == 0){ 
  return false 
 } 
 else{ 
  obj.style.left = evt.clientX - x + "px"; 
  obj.style.top = evt.clientY - y + "px"; 
 } 
 } 
</script> 
</head> 
<body style="margin:0" onmousemove="dragit(event)" onmouseup="obj = 0"> 

<div id="aaa" style="background-color:red;width:200pt;height:200pt;position:absolute"> 
<div id="aa" style="width:200pt;height:20pt;background:blue;position:absolute" onmousedown="find(event,document.getElementById('aaa'))"></div> 
</div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> 
</body> 
</html> 

本文由美高梅网址发布于关于美高梅,转载请注明出处:JavaScript简单实现鼠标移动切换图片的方法,拖动

上一篇:js遍历子节点子元素附属性及方法,节点操作 下一篇:没有了
猜你喜欢
热门排行
精彩图文