javascript运动效果实例总结(放大缩小、滑动淡入、滚动)


Posted in Javascript onJanuary 08, 2016

本文实例总结了javascript运动效果实现与用法。分享给大家供大家参考,具体如下:

一、图片放大缩小效果:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片放大缩小</title>
<style>
*{ margin:0; padding:0; list-style:none;}
#ulList{ margin:50px;}
#ulList li{ margin:10px; width:100px; height:100px; float:left; background:#ddd; border:1px solid black;}
</style>
<script>
window.onload = function()
{
 var oUl = document.getElementById('ulList');
 var aLi = oUl.getElementsByTagName('li');
 var zIndex = 2;
 //布局转换
 for(var i=0;i<aLi.length;i++){
  aLi[i].style.left = aLi[i].offsetLeft + 'px';
  aLi[i].style.top = aLi[i].offsetTop + 'px';
 }
 for(var i=0;i<aLi.length;i++){
  aLi[i].style.position = 'absolute';
  aLi[i].style.margin = '0';
 }
 for(var i=0;i<aLi.length;i++){
  aLi[i].onmouseover = function()
  {
   this.style.zIndex = zIndex++;
   startMove(this, {width:200, height:200, marginLeft:-50, marginTop:-50});
  };
  aLi[i].onmouseout = function()
  {
   startMove(this, {width:100, height:100, marginLeft:0, marginTop:0});
  };
 }
};
function getStyle(obj, attr)
{
 if(obj.currentStyle){
  return obj.currentStyle[attr];
 }else{
  return getComputedStyle(obj, false)[attr];
 }
}
function startMove(obj, json, fn)
{
 clearInterval(obj.timer);
 obj.timer=setInterval(function (){
  var bStop=true;
  for(var attr in json)
  {
   var iCur=0;
   if(attr=='opacity')
   {
    iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
   }
   else
   {
    iCur=parseInt(getStyle(obj, attr));
   }
   var iSpeed=(json[attr]-iCur)/8;
   iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
   if(iCur!=json[attr])
   {
    bStop=false;
   }
   if(attr=='opacity')
   {
    obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
    obj.style.opacity=(iCur+iSpeed)/100;
   }
   else
   {
    obj.style[attr]=iCur+iSpeed+'px';
   }
  }
  if(bStop)
  {
   clearInterval(obj.timer);
   if(fn)
   {
    fn();
   }
  }
 }, 30)
}
</script>
</head>
<body>
<ul id="ulList">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>
</body>
</html>

二、信息滑动淡入加载显示效果:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#msgBox{ width:500px; margin:0 auto; padding:5px;}
.msgList{ filter:alpha(opacity=0); opacity:0; font-size:12px; line-height:1.6; border-bottom:1px solid #ddd;}
.box{ float:left;}
</style>
<script>
window.onload = function()
{
 var oTxt = document.getElementById('txt1');
 var oBtn = document.getElementById('btn1');
 var oBox = document.getElementById('msgBox');
 oBtn.onclick = function()
 {
  var oMsg = document.createElement('div');
  var aDiv = oBox.getElementsByTagName('div');
  oMsg.className = 'msgList';
  oMsg.innerHTML = oTxt.value;
  oTxt.value = '';
  if(aDiv.length==0){
   oBox.appendChild(oMsg);
  }else{
   oBox.insertBefore(oMsg, aDiv[0]);
  }
  var iH = oMsg.offsetHeight;
  oMsg.style.height = 0;
  startMove(oMsg, {height:iH}, function(){
   startMove(oMsg, {opacity:100});
  });
 };
};
function getStyle(obj, attr)
{
 if(obj.currentStyle){
  return obj.currentStyle;
 }else{
  return getComputedStyle(obj, false)[attr];
 }
}
function startMove(obj, json, fn)
{
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
  var bStop = true;
  for(var attr in json){
   var iCur = 0;
   if(attr == 'opacity'){
    iCur = Math.round((parseFloat(getStyle(obj, attr))*100));
   }else{
    iCur = parseInt(getStyle(obj, attr));
   }
   var iSpeed = (json[attr] - iCur) / 8;
   iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
   if(iCur != json[attr]){
    bStop = false;
   }
   if(attr == 'opacity'){
    obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed)+')';
    obj.style.opacity = (iCur + iSpeed) / 100;
   }else{
    obj.style[attr] = iCur + iSpeed + 'px';
   }
  }
  if(bStop){
   clearInterval(obj.timer);
   if(fn){
    fn();
   }
  }
 }, 30);
}
</script>
</head>
<body>
<div class="box">
 <textarea id="txt1" cols="40" rows="10"></textarea><br />
 <input id="btn1" type="button" value="提交信息" />
</div>
<div id="msgBox">
</div>
</body>
</html>

三、无缝滚动效果:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0; list-style:none;}
#div1{ width:480px; height:120px; margin:50px auto; border:1px solid black; position:relative; overflow:hidden;}
#div1 li{ float:left; padding:10px;}
#div1 li img{ display:block;}
#div1 ul{ position:absolute;}
</style>
<script>
window.onload = function()
{
 var oDiv = document.getElementById('div1');
 var oUl = oDiv.getElementsByTagName('ul')[0];
 var aLi = oUl.getElementsByTagName('li');
 var aBtn = document.getElementsByTagName('input');
 var iSpeed = -3;
 var timer = null;
 oUl.innerHTML += oUl.innerHTML;
 oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
 timer = setInterval(move, 30);
 aBtn[0].onclick = function()
 {
  iSpeed = -3;
 };
 aBtn[1].onclick = function()
 {
  iSpeed = 3;
 };
 oDiv.onmouseover = function()
 {
  clearInterval(timer);
 };
 oDiv.onmouseout = function()
 {
  timer = setInterval(move, 30);
 };
 function move(){
  if(oUl.offsetLeft<-oUl.offsetWidth/2){
   oUl.style.left = '0px';
  }else if(oUl.offsetLeft>0){
   oUl.style.left = -oUl.offsetWidth/2 + 'px';
  }
  oUl.style.left = oUl.offsetLeft + iSpeed + 'px';
 }
};
</script>
</head>
<body>
<input type="button" value="向左" />
<input type="button" value="向右" />
<div id="div1">
 <ul>
  <li><img src="images/1.jpg" width="100" height="100" /></li>
  <li><img src="images/2.jpg" width="100" height="100" /></li>
  <li><img src="images/3.jpg" width="100" height="100" /></li>
  <li><img src="images/4.jpg" width="100" height="100" /></li>
 </ul>
</div>
</body>
</html>

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

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

Javascript 相关文章推荐
js window.event对象详尽解析
Feb 17 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
JS实现鼠标按下拖拽效果
Jul 23 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 #Javascript
jquery实现简单的遮罩层
Jan 08 #Javascript
javascript多物体运动实现方法分析
Jan 08 #Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 #Javascript
javascript匀速运动实现方法分析
Jan 08 #Javascript
js如何改变文章的字体大小
Jan 08 #Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 #Javascript
You might like
那些年一起学习的PHP(二)
2012/03/21 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
如何手工释放资源
2013/12/15 面试题
财政局长自荐信范文
2013/12/22 职场文书
机械设计职业生涯规划书
2013/12/27 职场文书
培训演讲稿范文
2014/01/12 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
人代会标语
2014/06/30 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
兴趣班停课通知
2015/04/24 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
2022漫威和DC电影上映作品
2022/04/05 欧美动漫