×

jquery特效大全 数据加载 特效

jquery特效大全（jQuery 页面加载等待特效，当数据加载完成效果消失的代码）

admin admin 发表于2022-09-07 03:21:53 浏览137 评论0

抢沙发发表评论

本文目录

jQuery 页面加载等待特效，当数据加载完成效果消失的代码


页面加载等待特效，当数据加载完成效果消失的代码如下:

$.ajax({
url:““,
type:“post“,
data:{“xx“:“xx“},
beforeSend:function(){
//这里是开始执行方法，显示效果，效果自己写
},
complete:function(){
//方法执行完毕，效果自己可以关闭，或者隐藏效果
},
success:function(){
//数据加载成功
},

error:function(){
//数据加载失败
}
});


jQuery实现的导航动画效果(附demo源码)


本文实例讲述了jQuery实现的导航动画效果。分享给大家供大家参考，具体如下：
经常在网上看到的，鼠标在导航上移动时，导航底部的横条会自动移动到鼠标悬浮的导航项上。
效果如下图：
利用jquery的
animate
函数，很好实现。代码很简单！
代码如下：
《!DOCTYPE
html》
《html》
《head》
《meta
charset=“utf-8“》
《title》测试《/title》
《script
src=“jquery-1.9.1.min.js“》《/script》
《/head》
《body》
《div
class=“nav“
style=“margin:
100px
auto;
width:960px;“》
《a
class=“active“
href=“#“》首页《/a》
《a
href=“#“》产品《/a》
《a
href=“#“》新闻中心《/a》
《a
href=“#“》关于我们《/a》
《a
href=“#“》联系我们《/a》
《a
href=“#“》首页《/a》
《a
href=“#“》首页《/a》
《div
class=“line“》《/div》
《/div》
《style》
.nav{
position:relative;
}
.nav
a{
padding:10px
20px;
border-bottom:solid
3px
#fff;
text-decoration:
none;
color:#666;
}
.nav
a:hover{
color:#66f;
}
.nav
.active,
.nav
.active:hover{
color:#f33;
}
.nav
.line{
position:absolute;
border-top:solid
2px
red;
width:0;
left:0;
top:0;
}
《/style》
《script》
function
navLine(o,
bo)
{
var
x
=
’’
+
(o.position().top
+
o.outerHeight()
-
2)
+
’px’;
var
y
=
’’
+
o.position().left
+
’px’;
var
w
=
’’
+
o.outerWidth()
+
’px’;
var
h
=
’2px’;
$(’.nav
.line’).stop();
if
(bo)
{
$(’.nav
.line’).css({width:w,
height:h,
top:x,
left:y});
}
else
{
$(’.nav
.line’).animate({width:w,
height:h,
top:x,
left:y});
}
}
$(function(){
navLine($(’.nav
.active’),
true);
$(’.nav
a’).hover(function(){
navLine($(this));
},
function(){
navLine($(’.nav
.active’));
});
});
《/script》
《/body》
《/html》
完整实例代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
-数据加载

JQUERY动画效果


CSS样式

table tr td{text-align:center;}
.red{background:#FF0000;}
.a{background:#CC3300}
.b{background:#006699}

HTML代码-特效

《table width=“500“ align=“center“》
    《tr class=“red“》
        《td》姓名《/td》
        《td》性别《/td》
        《td》年龄《/td》
        《td》绝招《/td》
    《/tr》
    《tr class=“a“》
        《td》张三《/td》
        《td》男《/td》
        《td》19《/td》
        《td》唱歌《/td》
    《/tr》
    《tr class=“b“》
        《td》李四《/td》
        《td》男《/td》
        《td》19《/td》
        《td》唱歌《/td》
    《/tr》
    《tr class=“a“》
        《td》王五《/td》
        《td》女《/td》
        《td》19《/td》
        《td》唱歌《/td》
    《/tr》
    《tr class=“b“》
        《td》赵六《/td》
        《td》女《/td》
        《td》19《/td》
        《td》唱歌《/td》
    《/tr》
    《tr class=“a“》
        《td》陈七《/td》
        《td》女《/td》
        《td》19《/td》
        《td》唱歌《/td》
    《/tr》
    《tr class=“b“》
        《td》汪八《/td》
        《td》男《/td》
        《td》19《/td》
        《td》唱歌《/td》
    《/tr》
    《tr class=“a“》
        《td》周九《/td》
        《td》男《/td》
        《td》19《/td》
        《td》唱歌《/td》
    《/tr》
    《tr class=“b“》
        《td》林十《/td》
        《td》女《/td》
        《td》19《/td》
        《td》唱歌《/td》
    《/tr》
《/table》
-数据加载

jQuery点击按钮特效


《script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js“》《/script》
《script type=“text/javascript“》
$(document).ready(function(e) {
$(’a.zhan’).click(function(){
var left = parseInt($(this).offset().left)+10, top =  parseInt($(this).offset().top)-10, obj=$(this);
var Num = parseInt(obj.find(’span’).text());
Num++;
obj.find(’span’).text(Num);
$(this).append(’《div id=“zhan“》《b》♥《\/b》《/\div》’);
$(’#zhan’).css({’position’:’absolute’,’z-index’:’1’, ’color’:’#f00’,’left’:left+’px’,’top’:top+’px’,’font-size’:’24px’}).animate({top:top-10,left:left},’slow’,function(){
$(this).fadeIn(’fast’).remove();
});
return false;
});
});
《/script》
《a class=“zhan“ style=“cursor:pointer;text-decoration:none;font-size:12px;“》赞(《span style=“color:#f00;font-weight:bold;“》0《/span》)《/a》
-特效

Jquery幻灯片特效代码分享--打开页面随机选择切换方式（3）


这篇文章主要介绍了jQuery实现幻灯片焦点图，可实现非常炫目时尚的幻灯片效果，非常具有实用价值，基本能满足你在网页上使用幻灯片(焦点图)效果，需要的朋友可以参考下
幻灯片效果描述：与前两节不同的是，这款特效可以打开页面随机选择切换方式（方向）

运行效果截图如下：
具体代码如下
《head》
《meta

-数据加载

jquery 闪烁效果


SetInterval(function(){ $(“p“).fadeOut(100).fadeIn(100); },200); 利用SetInterval定时器 每500毫秒执行一次这句代码

请问常见的jQuery特效有哪些最好有视频教程或者代码示例，非常感谢！


我跟你的情况差不多，也是有一点基础，然后各种突破不了，简单的看得懂，复杂点就看不懂。但是发现现在比以前好了不少了 ，主要是用的多了点，javascript还是要多用吧，我是先看了javascript高级编程那本书，然后网上找些简单功能的javascript或者jquery插件一句一句代码的理解，就算自己还是写不来也不急。最好你网上开个博客，能随时记录你看到比较好的文章或者一些知识点，当做记笔记，以后要用到忘记了也能很快再翻出来复习。希望对你有帮助。
-特效

jQuery实现列表内容的动态载入特效


采用Jquery实现的列表数据动态更新效果，更新的数据可以是ajax请求的数据。
CSS:
.main
{
width:
100%;
margin-top:
100px;
text-align:
center;
font-size:
12.5px;
}
th,
td
{
border:
1px
solid
#ccc;
line-height:
40px;
padding-left:
5px;
}
.item:hover
{
background-color:
#efefef;
}
.item:nth-child(2n)
{
background-color:
#efefef;
}
.ListView
{
width:
600px;
overflow:
hidden;
margin:
0
auto;
padding:
10px;
height:372px;
border:
1px
solid
#dddddd;
}
.ListView
.c
{
width:
1200px;
margin:
0
auto;
border-collapse:
collapse;
}
.Item
{
border-bottom:
1px
dashed
#dddddd;
padding:
10px
0
10px
0;
overflow:
hidden;
margin-left:600px;
}
.Item
span
{
float:
left;
text-align:
left;
}
.Item
span:first-child
{
color:
#6AA8E8;
}
.Item
span:last-child
{
text-align:
center;
}
HTML
《div
class=“main“》
《div
class=“ListView“》
《div
class=“c“》
《div
class=“Item“》
《span》test《/span》
《span》男/0《/span》
《span》四川省，成都市，锦江区《/span》
《span》详细说明《/span》
《/div》
《div
class=“Item“》
《span》test《/span》
《span》男/0《/span》
《span》四川省，成都市，锦江区《/span》
《span》详细说明《/span》
《/div》
《div
class=“Item“》
《span》test《/span》
《span》男/0《/span》
《span》四川省，成都市，锦江区《/span》
《span》详细说明《/span》
《/div》
《div
class=“Item“》
《span》test《/span》
《span》男/0《/span》
《span》四川省，成都市，锦江区《/span》
《span》详细说明《/span》
《/div》
《div
class=“Item“》
《span》test《/span》
《span》男/0《/span》
《span》四川省，成都市，锦江区《/span》
《span》详细说明《/span》
《/div》
《div
class=“Item“》
《span》test《/span》
《span》男/0《/span》
《span》四川省，成都市，锦江区《/span》
《span》详细说明《/span》
《/div》
《div
class=“Item“》
《span》test《/span》
《span》男/0《/span》
《span》四川省，成都市，锦江区《/span》
《span》详细说明《/span》
《/div》
《div
class=“Item“》
《span》test《/span》
《span》男/0《/span》
《span》四川省，成都市，锦江区《/span》
《span》详细说明《/span》
《/div》
《div
class=“Item“》
《span》test《/span》
《span》男/0《/span》
《span》四川省，成都市，锦江区《/span》
《span》详细说明《/span》
《/div》
《div
class=“Item“》
《span》test《/span》
《span》男/0《/span》
《span》四川省，成都市，锦江区《/span》
《span》详细说明《/span》
《/div》
《/div》
《/div》
《/div》
《p
style=“text-align:center;“》《a
href=“javascript:void(0);“
onClick=“ListView.Update();“》刷新数据《/a》《/p》
JS
《script
type=“text/javascript“
src=“/js/jquery-1.8.0.min.js“》《/script》
《script
type=“text/javascript“》
$(function(){
ListView.Init();
});
var
ListView={
Init:function(){
$(“.Item
span“).css(“width“,$(“.ListView“).width()/4+“px“);
for(var
i=0;i《$(“.Item“).length;i++){
var
target=$(“.Item“)[i];
$(target).animate({marginLeft:“0px“},300+i*100);
}
},
Update:function(){
$(“.ListView
.c
.Item“).remove();
for(var
i=0;i《10;i++){
var
newItem=$(“《div
class=\“Item\“》
《span》test《/span》
《span》男/“+i+“《/span》
《span》四川省，成都市，锦江区《/span》
《span》详细说明《/span》
《/div》“);
$(newItem).find(“span“).css(“width“,$(“.ListView“).width()/4+“px“);
$(“.ListView
.c“).append(newItem);
$(newItem).animate({marginLeft:“0px“},300+i*100);
}
}
}
《/script》
附上演示效果

-数据加载

jquery实现的图片点击滚动效果


需要添加jquery文件才可以调试
复制代码
代码如下:
《script
type=“text/javascript“
src=“jquery.js“》《/script》
《script
type=“text/javascript“》
$(function(){
//alert($(’#findclose’).closest(’div’).attr(’id’));
var
pic_length
=
$(’#gd
li’).length;
var
n
=
0;
$(’#toleft’).click(function(){
if
(!$(’#gd’).is(’:animated’)
&&
n)
{
$(’#gd’).animate({left:’+=120px’},500);
n--;
}
});
$(’#toright’).click(function(){
if
(!$(’#gd’).is(’:animated’)
&&
pic_length
》
n+5)
{
$(’#gd’).animate({left:’-=120px’},500);
n++;
}
});
})
《/script》
《style
type=“text/css“》
ul{
list-style:none;
margin:0px;
padding:0px;
text-align:center;
}
#gd
li
{
width:90px;
height:80px;
display:block;
float:left;
margin:9px
15px;
}
《/style》
《div
style=“width:702px;height:100px;background:#ccc;margin:0
auto“》
《div
style=“width:30px;height:30px;background:red;margin:35px
10px;float:left;cursor:pointer;“
id=“toleft“》《/div》
《div
style=“width:600px;height:98px;float:left;border:1px
solid
#777;overflow:
hidden;“》
《ul
style=“list-style:
none
outside
none;height:98px;display:block;background:yellow;position:relative;width:9999em;“
id=“gd“》
《li
style=“background:red“》《/li》
《li
style=“background:orange“》《/li》
《li
style=“background:green“》《/li》
《li
style=“background:navy“》《/li》
《li
style=“background:blue“》《/li》
《li
style=“background:purple“》《/li》
《li
style=“background:pink“》《/li》
《li
style=“background:gray“》《/li》
《/ul》
《/div》
《div
style=“width:30px;height:30px;background:red;margin:35px
10px;float:left;cursor:pointer;“
id=“toright“》《/div》
《/div》
-特效