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 相关文章推荐
JQuery 选择器 xpath 语法应用
May 13 Javascript
JS 控件事件小结
Oct 31 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
老生常谈的跨域处理
Jan 11 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
小程序云开发初探(小结)
Oct 24 Javascript
fastadmin中调用js的方法
May 14 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 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中用正则表达式清除字符串的空白
2011/01/17 PHP
PHP安全配置详细说明
2011/09/26 PHP
php数组去重的函数代码
2013/02/03 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
Laravel下生成验证码的类
2017/11/15 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
python实现画图工具
2020/08/27 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
办公室文员自荐书
2014/02/03 职场文书
学习决心书范文
2014/03/11 职场文书
生日庆典策划方案
2014/06/02 职场文书
珍惜资源的建议书
2014/08/26 职场文书
农业生产宣传标语
2014/10/08 职场文书
民主生活会发言材料
2014/10/20 职场文书
2014年手术室工作总结
2014/11/26 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
行政二审代理词
2015/05/25 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers