【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）