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入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
vue实现搜索功能
May 28 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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/04/28 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
canvas绘制七巧板
2017/02/03 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
简单的通用表达式求10乘阶示例
2014/03/03 Python
Python微信库:itchat的用法详解
2017/08/14 Python
神经网络python源码分享
2017/12/15 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
django缓存配置的几种方法详解
2018/07/16 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python使用udp实现聊天器功能
2018/12/10 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
Django choices下拉列表绑定实例
2020/03/13 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
Python urllib2运行过程原理解析
2020/06/04 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
物业公司的岗位任命书
2014/06/06 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
大学生求职信怎么写
2015/03/19 职场文书