21xrx.com
2025-04-21 18:16:57 Monday
文章检索 我的文章 写文章
JavaScript的超酷特效,让你的网页引领潮流!
2023-06-12 05:24:59 深夜i     8     0
JavaScript特效 模糊提示框 象限菜单 幻灯片

JavaScript是一门强大的编程语言,它不仅可以使网页动态起来,还能够实现各种炫酷的特效。在这篇文章中,我们将分享一些最新、最流行的JavaScript特效,让您的网站与众不同。

1. 模糊提示框

模糊提示框是一个非常实用的特效,它可以在用户选择某个选项时弹出一个提示框,这个提示框背景模糊,使用户更加注意。以下是实现代码:

.popup{
  position:fixed;
  top:0;
  left:0;
  z-index:999;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.6);
}

2. 象限菜单

象限菜单是一个非常酷的特效,它可以在用户悬停在菜单上时显示一个带有图片的小图标。当用户单击小图标时,菜单选项会扩展到四个象限,以便用户更好地浏览。以下是实现代码:

$(".nav li").hover(function() {
  $(this).find(".menu_icon").fadeIn(300);
}, function() {
  $(this).find(".menu_icon").fadeOut(300);
});
$(".nav li .menu_icon").click(function(event) {
  event.preventDefault();
  if($(this).hasClass('open')){
    $(this).removeClass('open');
    $(this).parent().find('.sub-menu').fadeOut(150);
  } else {
    $(this).addClass('open');
    $(this).parent().find('.sub-menu').fadeIn(150);
  }
});

3. 完美的幻灯片

许多网站都有幻灯片,但要实现一个丰富多彩的幻灯片,并不容易。以下是一个完美的幻灯片代码:

var slideIndex = 0;
showSlides();
function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length)
    slideIndex = 1;
  
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 2000);
}

三个

  
  

评论区

    相似文章