网页开发中常用的几种js动效代码

1. 淡入淡出效果

javascript复制代码

	var fadeIn = setTimeout(function(){
	document.getElementById("myElement").style.opacity = 1;
	}, 1000);
	var fadeOut = setTimeout(function(){
	document.getElementById("myElement").style.opacity = 0;
	}, 2000);

解释：这段代码实现了元素的淡入淡出效果。通过设置元素的opacity属性，可以实现透明度的变化，从而实现淡入淡出效果。
2. 滑动效果

javascript复制代码

	var slideIn = setTimeout(function(){
	document.getElementById("myElement").style.left = "0px";
	}, 1000);
	var slideOut = setTimeout(function(){
	document.getElementById("myElement").style.left = "-100px";
	}, 2000);

解释：这段代码实现了元素的滑动效果。通过设置元素的left属性，可以实现元素在页面上的移动。
3. 旋转效果

javascript复制代码

	var rotateIn = setTimeout(function(){
	document.getElementById("myElement").style.transform = "rotate(360deg)";
	}, 1000);

解释：这段代码实现了元素的旋转效果。通过设置元素的transform属性，可以实现元素的旋转。
4. 放大缩小效果

javascript复制代码

	var zoomIn = setTimeout(function(){
	document.getElementById("myElement").style.transform = "scale(1.5)";
	}, 1000);
	var zoomOut = setTimeout(function(){
	document.getElementById("myElement").style.transform = "scale(1)";
	}, 2000);

解释：这段代码实现了元素的放大缩小效果。通过设置元素的transform属性，可以实现元素的缩放。
5. 滑动切换效果

javascript复制代码

	var slideToggle = function() {
	var myElement = document.getElementById("myElement");
	if (myElement.style.left == "0px") {
	myElement.style.left = "-100px";
	} else {
	myElement.style.left = "0px";
	}
	}

解释：这段代码实现了元素的滑动切换效果。通过判断元素的left属性，可以实现元素的滑动切换。
6. 渐变效果

javascript复制代码

	var gradientIn = setTimeout(function(){
	var myElement = document.getElementById("myElement");
	myElement.style.backgroundImage = "linear-gradient(red, yellow)";
	}, 1000);

解释：这段代码实现了元素背景的渐变效果。通过设置元素的backgroundImage属性，可以实现背景颜色的渐变。
7. 弹跳效果

javascript复制代码

	var bounceIn = setInterval(function(){
	var myElement = document.getElementById("myElement");
	if (myElement.style.top == "0px") {
	clearInterval(bounceIn);
	} else {
	myElement.style.top = "-10px"; // 根据需要调整弹跳的高度和方向
	}
	}, 50); // 根据需要调整弹跳的频率和速度

解释：这段代码实现了元素的弹跳效果。通过设置元素的top属性，可以实现元素在页面上的弹跳。
8. 闪烁效果

javascript复制代码

	var blinkIn = setInterval(function(){
	var myElement = document.getElementById("myElement");
	if (myElement.style.visibility == "visible") {
	myElement.style.visibility = "hidden"; // 根据需要调整闪烁的频率和速度，以及元素显示和隐藏的属性值。例如，可以使用`opacity`代替`visibility`实现淡入淡出的闪烁效果。
	} else {
	myElement.style.visibility = "visible"; // 根据需要调整闪烁的频率和速度，以及元素显示和隐藏的属性值。例如，可以使用`opacity`代替`visibility`实现淡入淡出的闪烁效果。
	} 8); // 根据需要调整闪烁的频率和速度，以及元素显示和隐藏的属性值。