21xrx.com
2024-11-22 14:34:35 Friday
登录
文章检索 我的文章 写文章
JavaScript的超酷特效,让你的网页引领潮流!
2023-06-12 05:24:59 深夜i     --     --
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);

}

三个

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复
    相似文章