js基础之动画(三)
一、链式运动
首先,要改进运动框架
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,attr,iTarget,fn){//多div运动
//var obj = document.getElementsByClassName('menu');
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var iCur=0;
if(attr=='opacity'){
var iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
}else{
var iCur=parseInt(getStyle(obj,attr));
}
var iSpeed=(iTarget-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);console.log(iSpeed+'/'+iCur);
if(iCur==iTarget){
clearInterval(obj.timer);
if(fn){fn()};
}else{
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}else{
obj.style[attr]=iCur+iSpeed+'px';console.log(obj.style.attr);
}
}
},30);
}
然后引用即可
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onmouseover=function(){
startMove(oDiv,'width',300,function(){
startMove(oDiv,'height',333,function(){
startMove(oDiv,'opacity',100);
});
});
}
oBtn.onmouseout=function(){
startMove(oDiv,'opacity',50,function(){
startMove(oDiv,'height',20,function(){
startMove(oDiv,'width',0);
});
});
}
二、用json打造完美框架
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){
//1.取当前的位置
var iCur=0;
if(attr=='opacity'){
var iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
}else{
var iCur=parseInt(getStyle(obj,attr));
}
//2.算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);//console.log(iSpeed+'/'+iCur);
//3.检测停止
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);
}
三、照片墙——多图展开、收缩
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
var oImg = document.getElementsByClassName('img1');
//js布局
var minIndex=2;//设置层级初始值
var i=0;
for(i=0;i<aLi.length;i++){
//aLi[i].innerHTML='left:'+aLi[i].offsetLeft+',top:'+aLi[i].offsetTop;
aLi[i].style.left=aLi[i].offsetLeft+'px';
aLi[i].style.top=aLi[i].offsetTop+'px';
}
for(i=0;i<aLi.length;i++){
aLi[i].style.position='absolute';
}
//加事件
for(i=0;i<aLi.length;i++){
aLi[i].onmouseover=function(){
this.style.zIndex=minIndex++;//console.log(this.style.zIndex);确保当前图片的层级为最高
startMove(this,{width:200,height:200,margin:-50});
}
aLi[i].onmouseout=function(){
startMove(this,{width:100,height:100,margin:10});
}
}
for(i=0;i<oImg.length;i++){
oImg[i].onmouseover=function(){
startMove(this,{width:300,height:200,margin:0});
}
oImg[i].onmouseout=function(){
startMove(this,{width:100,height:100,margin:0});
}
}
四、新浪微博之大家正在说
var oTxt = document.getElementById('txt1');
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ul1');
oBtn.onclick=function(){
var oLi = document.createElement('div');//这里要用div替换li,否则IE7的移动效果会卡
var aLi = oUl.getElementsByTagName('div');//这里要用div替换li,否则IE7的移动效果会卡
oLi.innerHTML=oTxt.value;
oTxt.value='';
if(aLi.length){
oUl.insertBefore(oLi,aLi[0]);
}else{
oUl.appendChild(oLi);
}
var iHeight=oLi.offsetHeight;
oLi.style.height=0;
startMove(oLi,{height:iHeight},function(){
startMove(oLi,{opacity:100});//alert();
});
}
布局的时候也要用div套div代替ul套li
五、无缝滚动
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var oLi = oUl.getElementsByTagName('li');
var aA = document.getElementsByTagName('a');
var timer=null;
var iSpeed=-3;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=oLi.length*oLi[0].offsetWidth+'px';
function fnMove(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left=0;
}else if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+iSpeed+'px';
}
timer=setInterval(fnMove,30);
aA[0].onclick=function(){
iSpeed=-3;
};
aA[1].onclick=function(){
iSpeed=3;
};
oDiv.onmouseover=function(){
clearInterval(timer);
}
oDiv.onmouseout=function(){
timer=setInterval(fnMove,30);
}
js基础之动画(三)的更多相关文章
- GSAP JS基础教程--动画的控制及事件
好多天没有写无博文啦,今天无聊就再写一下! 今天要讲的是TweenLite的一些事件以及,TweenLite动画的控制,TweenMax类似,请自行参考官方文档:http://api.greensoc ...
- JS基础速成(三)- DOM(文件对象模型)
.t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.DOM树的基本结构 DOM节点分为三大类:元素节点(标签节点),属性节 ...
- Vue.js基础语法(三)
vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 1过滤器filte ...
- js基础之动画(二)
一.多物体同时运动 栗子一:多个Div,鼠标移入变高,动态下拉菜单 function startMove(obj,iTarget){ clearInterval(obj.timer); obj.ti ...
- js基础之动画(一)
一.让div动起来 var oBtn = document.getElementById('btn1'); var timer='';//设置定时器 oBtn.onclick=function st ...
- 前端新人学习笔记-------html/css/js基础知识点(三)
这断时间家里有点事,上班也有点任务,所以几天没看视频没来更新了.今天来更新一下了. 一:默认样式重置 但凡是浏览默认的样式,都不要使用. body,p,h1,h2,h3,h4,h5,h6,dl,dd{ ...
- JS基础语法---创建对象---三种方式创建对象:调用系统的构造函数;自定义构造函数;字面量的方式
创建对象三种方式: 调用系统的构造函数创建对象 自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象) 字面量的方式创建对象 第一种:调用系统的构造函数创建对象 //小苏举例子: //实例化对 ...
- JS基础_if练习三
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JS——基础知识(三)
1.select (1)它的选择事件是onchange (2)他的选项索引可以通过value获取,比tab选项卡要方便一点. 2.数组常用方法 (1)添加元素 push():可以向一个数组末尾添加一个 ...
随机推荐
- Build Up Your Own Lightweight Workspace
写一段简单的批处理(.bat)放在自己建的workspace下. @set path=C:/Program Files/Java/jdk1.8.0_101/bin;%PATH%; //jdk的路径 @ ...
- hdu4570Multi-bit Trie
链接 13年长沙邀请赛的题,神题意~ 题意:摘自http://blog.csdn.net/libin56842/article/details/9703457 这题题意确实有点难懂,起码对于我这个英语 ...
- hibernate.properties与hibernate.cfg.xml 区别
Hibernate的数据库连接信息是从配置文件中加载的. Hibernate的配置文件有两种形式:一种是XML格式的文件,一种是properties属性文件. 一)hibernate.cfg.xml ...
- JavaWeb学习总结(十一)--JDBC之批处理
一.批处理的介绍 在实际的项目开发中,有时候需要向数据库发送一批SQL语句执行,这时应避免向数据库一条条的发送执行,而应采用JDBC的批处理机制,以提升执行效率.批处理只针对更新(增.删.改)语句,批 ...
- git使用技巧
git使用技巧 转载自:http://172.17.144.8/iceway.zhang/shares/201604/201604_git_tips.md.html 我们在工作中几乎每天都会用到git ...
- 【摘抄】meta系列用法总结【持续更新中】
meta标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). ★页面描述信息NAME变量 name是描述网页的,对应于Content(网页内容),以便于搜索引擎机器人 ...
- dede如何新建一个ajax服务端输出文件
<?phprequire_once(dirname(__FILE__)."/include/common.inc.php");AjaxHead(); $dsql-> ...
- ogre入门笔记
ogre作为一款开源的非商业渲染引擎, 除去效率不谈, 其设计结构十分优雅, 值得游戏从业者拥有和学习.本篇笔记基于ogre v1.9. 1.代码模块 ogre的核心代码分布如下图: ogreMain ...
- 如何精确地测量java对象的大小-底层instrument API
转载: 如何精确地测量java对象的大小-底层instrument API 关于java对象的大小测量,网上有很多例子,大多数是申请一个对象后开始做GC,后对比前后的大小,不过这样,虽然说这样测量对象 ...
- IE9以上 CSS文件因Mime类型不匹配而被忽略 其他浏览器及IE8以下显示正常
什么是Mime类型? MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名 ...