jquery特效代码
以下是一些实用的jQuery特效代码示例，涵盖常见动画、交互效果和UI增强功能：
平滑滚动到页面顶部
$('a[href="#top"]').click(function(){
$('html, body').animate({scrollTop: 0}, 800);
return false;
});元素淡入淡出切换
$('#toggleButton').click(function(){
$('#targetElement').fadeToggle(500);
});悬停时放大图片
$('.zoomable-img').hover(
function(){ $(this).animate({width: '+=20%', height: '+=20%'}, 200); },
function(){ $(this).animate({width: '-=20%', height: '-=20%'}, 200); }
);动态加载内容
$('#loadContent').click(function(){
$('#container').load('external.html #specific-section');
});手风琴菜单效果
$('.accordion-header').click(function(){
$(this).next('.accordion-content').slideToggle();
$(this).toggleClass('active');
});表单输入高亮
$('input[type="text"]').focus(function(){
$(this).css('border-color', '#3498db');
}).blur(function(){
$(this).css('border-color', '#ccc');
});元素跟随鼠标移动
$(document).mousemove(function(e){
$('#floating-element').css({
left: e.pageX + 20,
top: e.pageY + 20
});
});无限滚动加载
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
// 加载更多内容的逻辑
}
});工具提示效果
$('.tooltip-trigger').hover(
function(){ $(this).append('<div class="tooltip">提示内容</div>'); },
function(){ $(this).find('.tooltip').remove(); }
);拖拽排序列表
$('#sortable-list').sortable({
axis: 'y',
opacity: 0.6,
update: function(event, ui){
// 排序更新后的回调
}
});使用时需确保已引入jQuery库，部分效果可能需要jQuery UI插件支持。可以根据实际需求调整参数值如动画时长、距离等。
