宅男噜噜噜66网站,中文久久乱码一区二区

首頁免費課 JS動畫效果筆記

JS動畫效果

最熱最新

貝殼殼
1. 定時器
2. onmouseover 鼠標移入
3. onmouseout鼠標移除
4. odiv.offsetLeft? odiv的當前l(fā)eft值
5. 在兩個代碼很相似的情況下，可以把不同的地方挑出來作為參數(shù)傳進去（如鼠標移入與鼠標移除的函數(shù)）
查看全部

1 采集收起來源：JS速度動畫
2018-04-12
貝殼殼 03:28

思路

查看全部

0 采集收起來源：JS動畫效果課程介紹
2018-04-12
騎士先生 03:35

運動框架實現(xiàn)思路

查看全部

0 采集收起來源：JS動畫效果課程介紹
2018-04-12
刀不磨要生銹

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>緩沖運動</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#div1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span{
width: 20px;
height: 50px;
background-color: blue;
position:absolute;
left: 200px;
top: 75px;
}
</style>

<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");//oDiv是局部變量，只在此函數(shù)內(nèi)有效
//鼠標移入事件
oDiv.onmouseover=function(){
starMove(0);
}
//鼠標移出事件
oDiv.onmouseout=function(){
starMove(-200);
}

var timer = null;
function starMove(target){
clearInterval(timer);//解決“speed”的疊加問題
var oDiv=document.getElementById("div1");
//創(chuàng)建一個定時器timer
timer=setInterval(function(){

var speed =(target - oDiv.offsetLeft)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);

if(oDiv.offsetLeft==target){
clearIntral(timer);//符合條件運動停止
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
}
</script>

</head>
<body>
<div id = div1>
<span>分享</span>
</div>
</body>
</html>

查看全部

3 采集收起來源：JS緩沖動畫
2018-04-10
刀不磨要生銹

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分享</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#div1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span{
width: 20px;
height: 50px;
background-color: blue;
position:absolute;
left: 200px;
top: 75px;
}
</style>

<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");//oDiv是局部變量，只在此函數(shù)內(nèi)有效
//鼠標移入事件
oDiv.onmouseover=function(){
starMove(0);
}
//鼠標移出事件
oDiv.onmouseout=function(){
starMove(-200);
}

var timer = null;
function starMove(target){
clearInterval(timer);//解決“speed”的疊加問題
var oDiv=document.getElementById("div1");
//創(chuàng)建一個定時器timer
timer=setInterval(function(){

var speed =0;
if(oDiv.offsetLeft > target){
speed = -10;
}else{
speed = 10;
}

if(oDiv.offsetLeft==target){
clearIntral(timer);//符合條件運動停止
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
}
</script>

</head>
<body>
<div id = div1>
<span>分享</span>
</div>
</body>
</html>

查看全部

5 采集收起來源：JS速度動畫
2018-04-10
刀不磨要生銹

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>改變透明度</title>
<style type="text/css">
#div1{
width:160px;
height:160px;
background-color:red;
filter: alpha(opacity:30);
opacity:0.3;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("div1");

oDiv.onmouseover = function(){
startMove(100);
}
oDiv.onmouseout = function(){
startMove(30);
}

var timer = null;
var alpha = 30;

function startMove(target){
var oDiv = document.getElementById("div1");
clearInterval(timer);
timer = setInterval(function(){

var speed = 0;
if(alpha > target){
speed = -10;
}else{
speed = 10;
}

if(alpha == target){
claerInterval(timer);
}else{
alpha+=speed;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;
}
},30);
}
}
</script>
</head>

<body>
<div id=div1></div>
</body>
</html>

查看全部

1 采集收起來源：JS透明度動畫
2018-04-10
刀不磨要生銹

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多物體改變透明度</title>
<style type="text/css">
div{
width:160px;
height:160px;
background-color:red;
float:left;
margin:10px;
filter: alpha(opacity:30);
opacity:0.3;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementsByTagName("div");

for(var i=0;i<oDiv.length;i++){
oDiv[i].alpha = null;
oDiv[i].onmouseover = function(){
startMove(this,100);
}
oDiv[i].onmouseout = function(){
startMove(this,30);
}
}

// var timer = null;
// var alpha = 30;

function startMove(obj,target){
// var oDiv = document.getElementById("div");
clearInterval(obj.timer);
obj.timer = setInterval(function(){

var speed = 0;
if(obj.alpha > target){
speed = -10;
}else{
speed = 10;
}

if(obj.alpha == target){
claerInterval(obj.timer);
}else{
obj.alpha+=speed;
obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
obj.style.opacity = obj.alpha/100;
}
},30);
}
}
</script>
</head>

<body>
<div id=div1></div>
<div id=div2></div>
<div id=div3></div>
<div id=div4></div>
</body>
</html>

查看全部

1 采集收起來源：JS多物體動畫
2018-04-10
刀不磨要生銹

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多物體運動</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul,li{
list-style: none;
}
ul li{
width:200px;
height:100px;
background-color: chartreuse;
margin-bottom:20px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementsByTagName('li');

for(var i = 0;i < oDiv.length;i++){
oDiv[i].timer = null;//在對象上定義一個單獨的屬性值
oDiv[i].onmouseover = function(){
startMove(this,400);//this來指定所選擇的當前元素
}
oDiv[i].onmouseout = function(){
startMove(this,200);
}
}

//var timer = null;
function startMove(obj,target){
clearInterval(obj.timer);

obj.timer = setInterval(function(){
var speed = (target - obj.offsetWidth)/8;
speed = speed >0?Math.ceil(speed):Math.floor(speed);

if(obj.offsetWidth == target){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth+speed+'px';
}
},30);
}

}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

查看全部

1 采集收起來源：JS多物體動畫
2018-04-10
慕絲4089693 09:37

getStyle()

查看全部

1 采集收起來源：獲取樣式
2018-04-09
半世煙云落

查看全部

1 采集收起來源：獲取樣式
2018-04-03
GYNexus

JSON格式：var json = {key : value , key1 : value1};
遍歷：for(var i : json) {
????????? i;(key值)
????????? json[i];(value值)
}

查看全部

0 采集收起來源：完美運動框架
2018-03-23
GYNexus

鏈式動畫，在startMove(obj,attr,iTarget,fn)再加一個fn參數(shù)，并在清除動畫之后，加入fn方法：if(fn){fn();} 在主頁中，在三個參數(shù)之后再加入一個參數(shù) startMove(Li,'width',400,function(){ startMove(Li,'height',200,function(){ startMove(Li,'opacity',100); }) })

查看全部

0 采集收起來源：JS鏈式動畫
2018-03-23
GYNexus

1、獲取當前透明度不用parseInt<br> 2、設置透明度要考慮兼容<br> obj.style.filter='alpha(opacity:'+(當前透明度+變化速度)+')';<br> obj.style.opacity=(當前透明度+變化速度)/100;<br>針對chrome和火狐瀏覽器 3、透明度不加“px”<br> 在使用parseInt()時處理透明度小數(shù)時,會有影響單位設置<br> 相應位置進行判斷 IE/FireFox<br> 取相應值 Math.round()四舍五入取整數(shù)值<br> Math.round(parseFloat(getStyle(obj,attr))*100)

查看全部

0 采集收起來源：任意屬性值（二）
2018-03-23
GYNexus

1、dom.style.xxx 這種寫法只能獲取行內(nèi)樣式例如 <div ></div> div.style.width能獲取到是200px，但是沒有出現(xiàn)在引號中的樣式是獲取不到的 2、萬能方法。 getComputedStyle(div,null).xxx 這個是標準方法，需要做一下兼容 currentStyle 是IE的 3、友情贈送獲取任何樣式的代碼 function getStyle(obj,style){//引用時style要帶引號 if(obj.currentStyle){ return obj.currentStyle[style]; }else{ return getComputedStyle(obj,null)[style]; } }
設置width的style寫在div里和寫在文檔開頭的<style></style>里，獲取的div元素的oDiv.style.width不一樣（后者會把border padding等的寬度也加上）
parseInt（）是獲取整數(shù)

查看全部

1 采集收起來源：獲取樣式
2018-03-23
GYNexus

多物體運動 for循環(huán)來為每一個TagNameList[i]添加事件并添加屬性來區(qū)分各自的定時器(用于取消) 利用參數(shù)中的this來指定所選擇的當前元素多物體不要共用一個值,在對象上定義一個單獨的屬性保持值存在多項共用一個值，并且這個值會發(fā)生改變時，最好單獨給賦值，避免出現(xiàn)爭用的情況。 <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ // 給每一個li設置一個timer，才不會致使他們?nèi)宼imer aLi[i].timer=null; aLi[i].onmouseover=function(){ startMove(this,400); }; aLi[i].onmouseout=function(){ startMove(this,200) } } var oDivLi=document.getElementsByTagName('div'); for(var j=0;j<oDivLi.length;j++){ oDivLi[j].timer=null; oDivLi[j].alpha=30; oDivLi[j].onmouseover=function(){ startMove1(this,100); }; oDivLi[j].onmouseout=function(){ startMove1(this,30); } } };

查看全部

0 采集收起來源：JS多物體動畫
2018-03-23