教程集 > jQuery > jquery 教程 > 正文 js滑动效果

js滑动效果

发布时间：2023-12-23 编辑：jiaochengji.com

教程集为您提供js滑动效果等资源，欢迎您收藏本站，我们将为您提供最新的js滑动效果资源

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

<!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=gb2312" />  <title>js滑动效果</title>  </head>    <body>    <div style=" position:relative; border:1px solid #000000; width:550px; height:50px;">  <div id="aa" style="width:50px; height:50px; background:#930; position:absolute;"></div>  </div>  <div style=" position:relative; border:1px solid #000000; width:550px; height:50px;">  <div id="bb" style="width:50px; height:50px; background:#930; position:absolute;"></div>  </div>  <div id="x"></div>    <script>  var $ = function (id) {  	return "string" == typeof id ? document.getElementById(id) : id;  };    var ss = 0;  var s = 250;  var tt = 50;  var a = 2*s/(tt*tt);  var o = $("aa");  var i = 0;  var t = 0;    function run(){  	t  ;  	i = parseInt(.5 * a * (t*t));  	if(i>=s){ o.style.left = ss   s   "px";i = 0;t=0;ss=s;run2(); return; }  	o.style.left = ss   i   "px";  	setTimeout(run, 1);  }    function run2(){  	t  ;  	i = parseInt((a*tt)*t - .5 * a * (t*t));  	if(i>=s){ o.style.left = ss   s   "px"; return; }  	o.style.left = ss   i   "px";  	setTimeout(run2, 1);  }    run();    var s3=500;  var n3=0;  var b=0;  var o3 = $("bb");    function run3(){  	b =5;  	  	if(b>s3){ o3.style.left = s3   "px"; return; }  	  	o3.style.left = b   "px";  	setTimeout(run3, 10);  }    run3();  </script>    www.111cn.net  </body>  </html>

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

您可能感兴趣的文章：
jQuery 滑动方法slideDown向下滑动元素
 40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
 jQuery幻灯片放映插件 CrossSlide
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
 Jquery 滑入滑出效果实现代码
 jquery弹性滑动导航菜单
 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
 对css滑动门技术的一些总结和归纳
 【多图】时间序列预测算法-三次指数平滑法(Holt-Winters)
jQuery AnythingSlider滑动效果插件

上一篇：js 图片放大效果下一篇：文本框内容换行

[关闭]

js滑动效果

最近更新

浏览排行