【JavaScript特效代码大全】
(图片来源网络,侵删)
1、淡入淡出效果
function fadeIn(element, duration) { var op = 0.1; // 初始透明度 var timer = setInterval(function () { if (op <= 1){ element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op += op * 0.1; } else clearInterval(timer); }, duration); } function fadeOut(element, duration) { var op = 1; // 初始透明度 var timer = setInterval(function () { if (op >= 0){ element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op = op * 0.1; } else clearInterval(timer); }, duration); }
2、滚动字幕效果
function marquee(element, direction, speed) { direction = direction || "left"; speed = speed || 5; var text = element.innerHTML; var position = element.offsetWidth; var intervalId = setInterval(function () { if (direction === "left") { position; if (position < text.length) { position = element.offsetWidth; } } else { position++; if (position > element.offsetWidth) { position = text.length; } } element.innerHTML = text + text.substring(position, position + text.length); }, speed); }
3、鼠标跟随效果
function followMouse(element, duration) { var mouseX = 0, mouseY = 0; var intervalId = setInterval(function () { mouseX = event.clientX element.offsetLeft; mouseY = event.clientY element.offsetTop; element.style.left = mouseX + 'px'; element.style.top = mouseY + 'px'; }, duration); }
4、图片轮播效果
var index = 0; // 当前显示的图片索引,从0开始计数 var images = document.getElementsByTagName('img'); // 获取所有图片元素,存储在数组中 var length = images.length; // 图片数量,即数组长度 var timer = null; // 定时器变量,用于控制图片切换时间间隔和动画效果的执行次数 var intervalTime = 3000; // 图片切换的时间间隔,单位为毫秒(ms)
原创文章,作者:未希,如若转载,请注明出处:https://www.kdun.com/ask/410578.html
本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。
发表回复