鼠標點擊後，全部div掉下來

時間 2019-11-11

標籤鼠標點擊全部 div 掉下欄目 CSS 简体版

原文原文鏈接

鼠標點擊後，全部div掉下來javascript

<!DOCTYPE html>css

<html>html

<head>前端

<title></title>web

div{學習

position: absolute;orm

transform: rotateZ(360deg);htm

}

</style>

</head>

<body>

</body>

var div = document.getElementsByTagName("div");

var len = 20;

var num = 0;

var timer = null;

var str = '';

for (var i = 0; i < len; i++) {

str +='<div style="width:50px;height:50px;background:purple;position:absolute;left:'+i*60+'px;top:10px"></div>'

}

document.body.innerHTML = str;

document.onclick = function(){

timer = setInterval(function(){

move(div[num],{top:200},500,'linear')

num++;

if(num>=len){

clearInterval(timer);

num=0;

}

},200)

};

////////////////////下面不用看，是調用的框架///////////////////

* 調用：

* move(obj, {left:10,top:20,opacity:0.8}, duration, fx, callback)

* 第二個參數裏用鍵值對的形式，值沒有單位，opacity的值爲0-1

須要web前端學習資料的同窗，加羣434623999

function move(obj, attrs, duration, fx, callback) {

clearInterval(obj.timer);

var startTime = new Date().getTime();

var j = {};

for (var attr in attrs) {

j[attr] = {}

j[attr].b = parseFloat(getComputedStyle(obj)[attr]);

j[attr].c = attrs[attr] - j[attr].b;

}

var d = duration;

obj.timer = setInterval(function() {

var t = new Date().getTime() - startTime;

if ( t >= d ) {

t = d;

}

for (var attr in attrs) {

var b = j[attr].b;

var c = j[attr].c;

var value = Tween[fx](t, b, c, d);

if ( attr == 'opacity' ) {

obj.style[attr] = value;

} else {

obj.style[attr] = value + 'px';

}

if ( t == d ) {

clearInterval(obj.timer);

if (typeof callback == 'function') {

callback.call(obj);

}

}, 16);

}

* t : time 已過期間

* b : begin 起始值

* c : count 總的運動值

* d : duration 持續時間

* */

//Tween.linear();

var Tween = {

linear: function (t, b, c, d){ //勻速

return c*t/d + b;

easeIn: function(t, b, c, d){ //加速曲線

return c*(t/=d)*t + b;

easeOut: function(t, b, c, d){ //減速曲線

return -c *(t/=d)*(t-2) + b;

easeBoth: function(t, b, c, d){ //加速減速曲線

if ((t/=d/2) < 1) {

return c/2*t*t + b;

}

return -c/2 * ((--t)*(t-2) - 1) + b;

easeInStrong: function(t, b, c, d){ //加加速曲線

return c*(t/=d)*t*t*t + b;

easeOutStrong: function(t, b, c, d){ //減減速曲線

return -c * ((t=t/d-1)*t*t*t - 1) + b;

easeBothStrong: function(t, b, c, d){ //加加速減減速曲線

if ((t/=d/2) < 1) {

return c/2*t*t*t*t + b;

}

return -c/2 * ((t-=2)*t*t*t - 2) + b;

elasticIn: function(t, b, c, d, a, p){ //正弦衰減曲線（彈動漸入）

if (t === 0) {

return b;

}

if ( (t /= d) == 1 ) {

return b+c;

}

if (!p) {

p=d*0.3;

}

if (!a || a < Math.abs(c)) {

a = c;

var s = p/4;

} else {

var s = p/(2*Math.PI) * Math.asin (c/a);

}

return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

elasticOut: function(t, b, c, d, a, p){ //正弦加強曲線（彈動漸出）

if (t === 0) {

return b;

}

if ( (t /= d) == 1 ) {

return b+c;

}

if (!p) {

p=d*0.3;

}

if (!a || a < Math.abs(c)) {

a = c;

var s = p / 4;

} else {

var s = p/(2*Math.PI) * Math.asin (c/a);

}

return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;

elasticBoth: function(t, b, c, d, a, p){

if (t === 0) {

return b;

}

if ( (t /= d/2) == 2 ) {

return b+c;

}

if (!p) {

p = d*(0.3*1.5);

}

if ( !a || a < Math.abs(c) ) {

a = c;

var s = p/4;

}

else {

var s = p/(2*Math.PI) * Math.asin (c/a);

}

if (t < 1) {

return - 0.5*(a*Math.pow(2,10*(t-=1)) *

Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

}

return a*Math.pow(2,-10*(t-=1)) *

Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;

backIn: function(t, b, c, d, s){ //回退加速（回退漸入）

if (typeof s == 'undefined') {

s = 1.70158;

}

return c*(t/=d)*t*((s+1)*t - s) + b;

backOut: function(t, b, c, d, s){

if (typeof s == 'undefined') {

s = 3.70158; //回縮的距離

}

return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;

backBoth: function(t, b, c, d, s){

if (typeof s == 'undefined') {

s = 1.70158;

}

if ((t /= d/2 ) < 1) {

return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;

}

return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;

bounceIn: function(t, b, c, d){ //彈球減振（彈球漸出）

return c - Tween['bounceOut'](d-t, 0, c, d) + b;

bounceOut: function(t, b, c, d){

if ((t/=d) < (1/2.75)) {

return c*(7.5625*t*t) + b;

} else if (t < (2/2.75)) {

return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;

} else if (t < (2.5/2.75)) {

return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;

}

return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;

bounceBoth: function(t, b, c, d){

if (t < d/2) {

return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;

}

return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;

}

////

</script>

</html> 更多web前端源碼資源，就在QQ羣434623999

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。