建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
javascript特效代碼大全
【JavaScript特效代碼大全】
堅(jiān)守“ 做人真誠(chéng) · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都服務(wù)器托管小微創(chuàng)業(yè)公司專業(yè)提供企業(yè)網(wǎng)站設(shè)計(jì)營(yíng)銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺(jué)設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁(yè)布局、功能開發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。
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、滾動(dòng)字幕效果
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、鼠標(biāo)跟隨效果
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; // 當(dāng)前顯示的圖片索引，從0開始計(jì)數(shù)
var images = document.getElementsByTagName('img'); // 獲取所有圖片元素，存儲(chǔ)在數(shù)組中
var length = images.length; // 圖片數(shù)量，即數(shù)組長(zhǎng)度
var timer = null; // 定時(shí)器變量，用于控制圖片切換時(shí)間間隔和動(dòng)畫效果的執(zhí)行次數(shù)
var intervalTime = 3000; // 圖片切換的時(shí)間間隔，單位為毫秒（ms）
文章標(biāo)題：javascript特效代碼大全
本文網(wǎng)址：http://m.fisionsoft.com.cn/article/coghihh.html
