xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > javascript多物体运动实现方法分析,javascript匀速运

javascript多物体运动实现方法分析,javascript匀速运

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-07-14 03:12

本章节介绍一下一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等,

本文实例讲述了javascript匀速运动实现方法。分享给大家供大家参考,具体如下:

本文实例讲述了javascript多物体运动实现方法。分享给大家供大家参考,具体如下:

我们先来看个演示图

匀速运动步骤:

这里需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用。

图片 1

  1. 清除定时器
  2. 开启定时器
  3. 运动是否完成:a、运动完成,清除定时器;b、运动未完成继续

运行效果截图如下:

下面是代码实例:

匀速运动停止条件:距离足够近  Math.abs(当然距离-目标距离) < 最小运动距离

图片 2

<link rel="stylesheet" href="../css/common.css" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="../js/jquery.imagePreview.1.0.js"></script>
<script type="text/javascript">
$(function(){
 $("a.preview").preview();  
});
</script>
<style type="text/css">
html{overflow-y:scroll;}
a.preview,a.preview:hover{text-decoration:none;}
a.preview img{margin:20px 10px;}
</style>
</head>

<body>
<div class="zxx_out_box">
 <div class="zxx_in_box">
  <h3 class="zxx_title">图片放大显示的jQuery插件演示页面</h3>
  <div class="zxx_main_con">
   <div class="zxx_test_list">
    <a class="preview" href="http://image.jb51.net/image/study/s/s256/mm1.jpg" title="张含韵">
     <img src="http://image.jb51.net/image/study/s/s128/mm1.jpg" />
    </a>
    <a class="preview" href="http://image.jb51.net/image/study/s/s256/mm2.jpg" title="某不知名美女">
     <img src="http://image.jb51.net/image/study/s/s128/mm2.jpg" />
    </a>
    <a class="preview" href="http://image.jb51.net/image/study/s/s256/mm3.jpg" title="某不知名美女">
     <img src="http://image.jb51.net/image/study/s/s128/mm3.jpg" />
    </a>
    <a class="preview" href="http://image.jb51.net/image/study/s/s256/mm4.jpg" title="某不知名美女">
     <img src="http://image.jb51.net/image/study/s/s128/mm4.jpg" />
    </a>
    <a class="preview" href="http://image.jb51.net/image/study/s/s256/mm5.jpg" title="某不知名美女">
     <img src="http://image.jb51.net/image/study/s/s128/mm5.jpg" />
    </a>
   </div>   
  </div>

 </div>
</div>
</body>
</html>

运行效果截图如下:

例子:

以上代码实现了我们的要求,小伙伴们觉着怎么样呢

图片 3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多物体运动</title>
<style>
div{ width:100px; height:100px; background:red; float:left; margin:10px; border:1px solid black; opacity:0.3; filter:alpha(opacity=30);}
</style>
<script>
window.onload = function()
{
 var aDiv = document.getElementsByTagName('div');
 aDiv[0].onmouseover = function()
 {
  startMove(this, 'width', 300);
 };
 aDiv[0].onmouseout = function()
 {
  startMove(this, 'width', 100);
 };
 aDiv[1].onmouseover = function()
 {
  startMove(this, 'height', 300);
 };
 aDiv[1].onmouseout = function()
 {
  startMove(this, 'height', 100);
 };
 aDiv[2].onmouseover = function()
 {
  startMove(this, 'opacity', 100);
 };
 aDiv[2].onmouseout = function()
 {
  startMove(this, 'opacity', 30);
 };
 aDiv[3].onmouseover = function()
 {
  startMove(this, 'borderWidth', 20);
 };
 aDiv[3].onmouseout = function()
 {
  startMove(this, 'borderWidth', 1);
 };
};
function getStyle(obj, attr)
{
 if(obj.currentStyle){
  return obj.currentStyle[attr];
 }else{
  return getComputedStyle(obj, false)[attr];
 }
}
function startMove(obj, attr, iTarget)
{
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
  var iCur = 0;
  if(attr == 'opacity'){
   iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);   
  }else{
   iCur = parseInt(getStyle(obj, attr));
  }
  var iSpeed = (iTarget - iCur) / 8;
  iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  if(iCur == iTarget){
   clearInterval(obj.timer);
  }else{
   if(attr == 'opacity'){
    obj.style.filter = 'alpha(opacity='  (iCur iSpeed)  ')';
    obj.style.opacity = (iCur iSpeed)/100;
   }else{
    obj.style[attr] = iCur   iSpeed   'px';
   }
  }
 }, 30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

接下来我们看看使用方法简要说明:

div的匀速运动(简单运动)示例:

更多关于JavaScript运动效果相关内容可查看本站专题:《JavaScript运动效果与技巧汇总》

1.需要借助a标签的href属性,此jQuery插件的原理是当鼠标移至缩略图(或链接文字时),会加载一段含有href指向路径的大图html片段,该片段根据鼠标的位置绝对定位。于是产生了鼠标移到缩略图上显示大图的效果。大图的地址就是a标签的href属性的内容。例如:<a href=”xx.jpg”>缩略图</a> 如果此a标签含有显示大图的方法,则页面就会显示href所指向的“xx.jpg”这个图片。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript匀速运动</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:500px;}
span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}
</style>
<script>
window.onload = function()
{
 var oBtn = document.getElementById('btn1');
 var oDiv = document.getElementById('div1');
 oBtn.onclick = function()
 {
  startMove(oDiv, 300);
 };
};
var timer = null;
function startMove(obj, iTarget)
{
 clearInterval(timer);
 timer = setInterval(function(){
  var iSpeed = 0;
  if(obj.offsetLeft < iTarget)
  {
   iSpeed = 7;
  }
  else
  {
   iSpeed = -7;
  }
  if( Math.abs( obj.offsetLeft - iTarget ) < 7 )
  {
   clearInterval(timer);
   obj.style.left = iTarget   'px';
  }
  else
  {
   obj.style.left = obj.offsetLeft   iSpeed   'px';
  }
 }, 30);
}
</script>
</head>
<body>
<button id="btn1">移动</button>
<div id="div1"></div>

</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

2.使用的方法是:目标选择器.preview();例如上面的<a href=”xx.jpg”>缩略图</a>就可以使用$(“a”).preview();这段代码实现鼠标移到“缩略图”这个文字链接上显示xx.jpg这张图片的效果。

更多关于JavaScript运动效果相关内容可查看本站专题:《JavaScript运动效果与技巧汇总》

您可能感兴趣的文章:

  • Javascript 多物体运动的实现
  • JS实现多物体缓冲运动实例代码
  • JS多物体 任意值 链式 缓冲运动
  • JS多物体实现缓冲运动效果示例
  • JavaScript运动框架 多物体任意值运动(三)
  • JS运动改变单物体透明度的方法分析
  • JS实现物体带缓冲的间歇运动效果示例
  • JS实现多物体运动的方法详解

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:javascript多物体运动实现方法分析,javascript匀速运

关键词: mg娱乐场