本文目錄一覽：
- 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插件 如果不旋轉 可以不用插件就能實現
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/152014.html
微信掃一掃 
支付寶掃一掃 