文章编号：171 / 更新时间：2024-12-29 13:13:30 / 浏览：次

1.图片淡入淡出

代码：

function fadeIn(element) {element.style.opacity = 0;var last = +new Date();var tick = function() {element.style.opacity =+element.style.opacity + (new Date() - last) / 400;last = +new Date();if (+element.style.opacity < 1) {(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);}};tick();
}function fadeOut(element) {element.style.opacity = 1;var last = +new Date();var tick = function() {element.style.opacity = +element.style.opacity - (new Date() - last) / 400;last = +new Date();if (+element.style.opacity > 0) {(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);}};tick();
}

2. 图片旋转

代码：

function rotate(element) {element.style.transform = 'rotate(0deg)';var last = +new Date();var tick = function() {element.style.transform = 'rotate(' + (+element.style.transform.replace(/[^0-9]/g, '') + (new Date() - last) / 10) % 360 + 'deg)';last = +new Date();(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);};tick();
}

3. 图片缩放

代码：

functionscale(element) {element.style.transform = 'scale(1)';var last = +new Date();var tick = function() {element.style.transform = 'scale(' + (+element.style.transform.replace(/[^0-9.]/g, '') + (new Date() - last) / 1000) + ')';last = +new Date();(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);};tick();
}

4. 图片移动

代码：

function move(element) {element.style.transform = 'translate(0px, 0px)';var last = +new Date();var tick = function() {element.style.transform = 'translate(' + (+element.style.transform.replace(/[^0-9.]/g, '').split(', ')[0] + (new Date() - last) / 10) + 'px, ' + (+element.style.transform.replace(/[^0-9.]/g, '').split(', ')[1] + (new Date() - last) / 10) + 'px)';last = +new Date();(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);};tick();
}

5. 图片倾斜

代码：

function skew(element) {element.style.transform = 'skew(0deg, 0deg)';)) || setTimeout(tick, 16);};tick();
}

6. 图片自定义变形

代码：

function transform(element) {element.style.transform = 'matrix(1, 0, 0, 1, 0, 0)';var last = +new Date();var tick = function() {element.style.transform = 'matrix(' + (+element.style.transform.replace(/[^0-9.]/g, '').split(', ')[0] + (new Date() - last) / 10) + ', ' + (+element.style.transform.replace(/[^0-9.]/g, '').split(', ')[1] + (new Date() - last) / 10) + ', ' + (+element.style.transform.replace(/[^0-9.]/g, '').split(', ')[2] + (new Date() - last) / 10) + ', ' + (+element.style.transform.replace(/[^0-9.]/g, '').split(', ')[3] + (new Date() - last) / 10) + ', ' + (+element.style.transform.replace(/[^0-9.]/g, '').split(', ')[4] + (new Date() - last) / 10) + ', ' + (+element.style.transform.replace(/[^0-9.]/g, '').split(', ')[5] + (new Date() - last) / 10) + ')';last = +new Date();(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);};tick();
}

7. 图片抖动

代码：

function shake(element) {element.style.transform = 'translateX(0px) translateY(0px)';var last = +new Date();var tick = function() {element.style.transform = 'translateX(' + (Math.random()  20 - 10) + 'px) translateY(' + (Math.random()  20 - 10) +'px)';last = +new Date();(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);};tick();
}

8. 图片闪烁

代码：

function flicker(element) {element.style.opacity = 1;var last = +new Date();var tick = function() {element.style.opacity = (Math.random()  0.5) + 0.5;last = +new Date();(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);};tick();
}

9. 图片破碎

代码：

function shatter(element) {element.style.transform = 'scale(1)';var last = +new Date();var tick = function() {element.style.transform = 'scale(' + (Math.random()  0.5) + 0.5 + ')';last = +new Date();(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);};tick();
}

10. 图片爆炸

代码：

function explode(element) {element.style.transform = 'scale(1)';var last = +new Date();var tick = function() {element.style.transform = 'scale(' + (Math.random()  2) + 1 + ')';last = +new Date();(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);};tick();
}

相关标签： js图片特效大全、 js图片特效大全代码、

本文地址：https://www.qianwe.cn/article/171.html

上一篇：css相册特效css3相册...
下一篇：js相册插件jquery相册插件...