100个jquery特效

发布时间:2025-12-10 13:08:30 浏览次数:4

jQuery是一个开源JavaScript库,用于在HTML文档中处理DOM元素和事件的快速、简洁和易于使用的方式。使用jQuery可以轻松地添加许多特效,如动画、下拉菜单、滚动效果等。本文将介绍100个常用的jQuery特效,供开发者参考。

// 1. 显示和隐藏元素$("button").click(function(){$("p").toggle();});// 2. 淡入淡出效果$("button").click(function(){$("p").fadeOut();});// 3. 添加或删除类名$("button").click(function(){$("p").toggleClass("red");});// 4. 上下滑动效果$("button").click(function(){$("p").slideUp();});// 5. 滑动菜单效果$("button").click(function(){$("#menu").slideToggle();});// 6. 滚动到顶部效果$("button").click(function(){$("html, body").animate({ scrollTop: 0 }, "slow");});// 7. 图片缩放效果$("img").click(function(){$(this).animate({ width: "300px" });});// 8. 鼠标跟随效果$(document).mousemove(function(event){$("p").offset({ top: event.pageY, left: event.pageX });});// 9. 显示模态框效果$("button").click(function(){$("#myModal").modal("show");});// 10. 鼠标悬停表格行效果$("tr").hover(function(){$(this).addClass("highlight");}, function(){$(this).removeClass("highlight");});// 11. 图片滑动效果$("img").hover(function(){$(this).animate({ left: "50%" });});// 12. 旋转动画效果$("button").click(function(){$("img").animate({ rotate: "45deg" });});// 13. 自动完成效果$("#autocomplete").autocomplete({source: ["apple", "banana", "orange"]});// 14. 阻止事件冒泡效果$("a").click(function(event){event.stopPropagation();});// 15. 计时器效果var counter = 0;setInterval(function(){counter++;$("h1").text(counter);}, 1000);
需要做网站?需要网络推广?欢迎咨询客户经理 13272073477