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 相关文章推荐
javaScript同意等待代码实现心得
Jan 01 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
初识Node.js
Mar 20 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
js生成随机数的方法实例
Oct 16 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
前端js中的事件循环eventloop机制详解
May 15 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
js下函数般调用正则的方法附代码
2008/06/22 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
jQuery select控制插件
2009/08/17 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
vue组件的写法汇总
2018/04/12 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
python调用百度语音识别api
2018/08/30 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
Django 路由层URLconf的实现
2019/12/30 Python
python实现tail -f 功能
2020/01/17 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
写给保洁员表扬信
2014/01/08 职场文书
财务会计求职信范文
2015/03/20 职场文书
大学团日活动总结书
2015/05/11 职场文书
Java实现聊天机器人完善版
2021/07/04 Java/Android