本文目录一览：
- 1、js实现图片向左向右轮播的动画效果的代码
- 2、用JS实现动画效果,当从左到右实现后,怎么完成从右到左
- 3、请教大神帮我写一个关于分页的js动画，效果如下：
- 4、怎么判断js是否处于动画啊，求这代码…记住不要jquery不要jquery方法
- 5、js实现匀速下落动画怎么实现
- 6、要使用js或者css3做一个网页动画，代码怎么打？
js实现图片向左向右轮播的动画效果的代码
!DOCTYPE html
html
head lang="en"
meta charset="UTF-8"
title/title
style
*{
margin: 0;
padding:0;
}
.show{
border:5px solid #c1c1c1;
margin:100px auto;
width:500px;
height: 200px;
overflow: hidden;
}
.box{
width:400%;
position: relative;
cursor: pointer;;
}
ul{
list-style-type: none;;
}
.box ul li{
float:left;
display: block;
}
/style
script
window.onload=function(){
function $(id){
return document.getElementById(id);
}
var num=0;
function autoplay(){
num--;
$("box").style.left=num+"px";
if(num==-1200){
num=0;
}
}
var int=setInterval(autoplay,30);
$("box").onmouseover=function(){
clearInterval(int);
}
$("box").onmouseout=function(){
int=setInterval(autoplay,30);
}
}
/script
/head
body
div class="show"
div class="box" id="box"
ul
liimg src="image/01.jpg" alt=""//li
liimg src="image/02.jpg" alt=""//li
liimg src="image/03.jpg" alt=""//li
liimg src="image/04.jpg" alt=""//li
liimg src="image/01.jpg" alt=""//li
liimg src="image/02.jpg" alt=""//li
/ul
/div
/div
/body
/html
用JS实现动画效果,当从左到右实现后,怎么完成从右到左
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head runat="server"
title无标题页/title
/head
body
form id="form1" runat="server"
input id="Button1" type="button" value="button" onclick="Move()" /
div id="effect1" style=" position:absolute; background-color:Red; width:100px; height:50px;"/div
div id="effect2" style=" position:absolute; background-color:Blue; width:100px; height:50px;"/div
script type="text/javascript"
var startNum=8;
var endNum=800;
var startNum0=31;
var endNum0=300;
function Effect(element,prop,start,end,seconds,stop)
{
stop=stop||this;
var e =document.getElementById(element);
var fps=30;
var step=0;
var cur=start;
var sid;
function m()
{
step=(end-start)/(seconds*fps);
cur+=step;
e.style[prop]=cur;
if(endstart)
{if(prop=='left')
{if(e.offsetLeftend)
{alert(stop)
stop();
clearInterval(sid);
}}
else{
if(e.offsetTopend)
{alert(stop)
stop();
clearInterval(sid);
}
}
}
else{
if(prop=='left')
{if(e.offsetLeft=end)
{alert(stop)
stop();
clearInterval(sid);
}}
else{
if(e.offsetTop=end)
{
stop();
clearInterval(sid);
}
}
}
}
this.Start = function ()
{
sid = setInterval(m,1000/fps);
}
}
function OnStop()
{
//document.bgColor="red"
var eff2 = new Effect("effect2","top",startNum0,endNum0,3);
eff2.Start();
var t;
t=startNum0;
startNum0=endNum0;
endNum0=t;
}
function Move()
{
var eff1 = new Effect("effect1","left",startNum,endNum,1,OnStop);
eff1.Start();
var t;
t=startNum;
startNum=endNum;
endNum=t;
}
/script
div
/div
/form
/body
/html
在IE8下能运行，虽然还有些许JS错误，但问题不大！！！
你看这样行吗？
请教大神帮我写一个关于分页的js动画，效果如下：
这应该是最简单的实现方式了。你看一下吧，不懂的再回复。
style
*{margin:0px; padding:0px;}
div {width:150px; height:20px; overflow:hidden; position:relative; display:inline-block; margin-top:5px;}
ul {display:inline-block; height:20px; position:absolute; top:0px; left:0px;}
li {width:20px; height:16px; line-height:16px; text-align:center; border:1px solid #ccc; margin-left:3px; float:left; list-style:none;}
.clearfix {both:clear; content:''; display:block;}
.ciearfix {zoom:1;}
/style
body
input type="button" value="←" id="leftBtn" /
div
ul id="ul" class="clearfix"
li1/lili2/lili3/lili4/lili5/lili6/li
li7/lili8/lili9/lili10/lili11/lili12/li
li13/lili14/lili15/lili16/lili17/lili18/li
/ul
/div
input type="button" value="→" id="rightBtn" /
/body
script
var leftBtn = document.getElementById('leftBtn');
var rightBtn = document.getElementById('rightBtn');
var oUl = document.getElementById('ul');
var moveWidth = 150;
leftBtn.onclick=function(){
if(oUl.offsetLeft == -300)return;
oUl.style.left = oUl.offsetLeft - moveWidth + 'px';
};
rightBtn.onclick=function(){
if(oUl.offsetLeft == 0)return;
oUl.style.left = oUl.offsetLeft + moveWidth + 'px';
};
/script
怎么判断js是否处于动画啊，求这代码…记住不要jquery不要jquery方法
判断元素是否处于动画状态
在使用animate()方法的时候，要避免动画积累而导致的动画与用户的行为不一致。当用户快速在某个元素执行animate()动画时，就会出现动画积累。解决方法足判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。代码如下：
if($(element).is(":animated")){ //判断元素是否正处于动画状态
//如果当前没有进行动画，则添加新动画
}
这个判断方法在animate()动画中经常被用到，需要特别注意。
js实现匀速下落动画怎么实现
/*
data:2022-11-17
author:lfp
move运动函数
dom--需要运动的对象
json--{width:100,height:100,left:100,top:100}
callback--回调函数 可调用自己 实现异步动画效果
*/
//主函数
function move(dom,json,callback){
//让每一次动画都是新的开始，防止出现动画一直不停的运行
if(dom.timer)clearInterval(dom.timer);
var i=0;
var start=0;
//在对象中增加timer 便于控制他停止
dom.timer=setInterval(function(){
i++;
//循环每一个目标属性添加动画方法
for(var attr in json){
//获取当前attr的属性值 已经去除了px 还有 如果初始值是auto 用零代替
var cur=getStyle(dom,attr);
if(i==1)start=cur;
//拿到该属性的目标值
var target=json[attr];
//设置分成10次增加增量 你可以根据需要修改
var speed=(target-start)/10;
console.log(speed+"====="+cur)
//如果没有达到目标值就一直加
if(Math.abs(cur-target)1){
dom.style[attr]=cur+speed+"px";
}else{
//达到目标值了就停止或者其他情况也停止
clearInterval(dom.timer);
//等停止了动画再回调函数进行另外的操作
if(callback)callback.call(dom);
};
};
},45);
};
//配套函数
function getStyle(dom,attr){
var value="";
if(window.getComputedStyle){
value=window.getComputedStyle(dom,false)[attr];
}else{
value=dom.currentStyle[attr];
};
value=parseInt(value);
return value || 0;//如果你再样式中没有设置初始的值就会出现NaN 所以要用0来补充
};
function $(id){
//return document.getElementById(id);
return document.querySelector("#"+id);
};
要使用js或者css3做一个网页动画，代码怎么打？
这个可以用 js 实现 但是需要旋转的js插件 如果不旋转 可以不用插件就能实现
