jquery特效代码,jquery网页特效设计基础教程
jQuery点击按钮特效
script src=""/script
靖州网站制作公司哪家好，找成都创新互联公司！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。成都创新互联公司于2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司。
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#9829\/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 页面加载等待特效，当数据加载完成效果消失的代码？
页面加载等待特效，当数据加载完成效果消失的代码如下:
$.ajax({
url:"",
type:"post",
data:{"xx":"xx"},
beforeSend:function(){
//这里是开始执行方法，显示效果，效果自己写
},
complete:function(){
//方法执行完毕，效果自己可以关闭，或者隐藏效果
},
success:function(){
//数据加载成功
},
error:function(){
//数据加载失败
}
});
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:
auto;
padding:
10px;
height:372px;
border:
1px
solid
#dddddd;
}
.ListView
.c
{
width:
1200px;
margin:
auto;
border-collapse:
collapse;
}
.Item
{
border-bottom:
1px
dashed
#dddddd;
padding:
10px
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"
spantest/span
span男/0/span
span四川省，成都市，锦江区/span
span详细说明/span
/div
div
class="Item"
spantest/span
span男/0/span
span四川省，成都市，锦江区/span
span详细说明/span
/div
div
class="Item"
spantest/span
span男/0/span
span四川省，成都市，锦江区/span
span详细说明/span
/div
div
class="Item"
spantest/span
span男/0/span
span四川省，成都市，锦江区/span
span详细说明/span
/div
div
class="Item"
spantest/span
span男/0/span
span四川省，成都市，锦江区/span
span详细说明/span
/div
div
class="Item"
spantest/span
span男/0/span
span四川省，成都市，锦江区/span
span详细说明/span
/div
div
class="Item"
spantest/span
span男/0/span
span四川省，成都市，锦江区/span
span详细说明/span
/div
div
class="Item"
spantest/span
span男/0/span
span四川省，成都市，锦江区/span
span详细说明/span
/div
div
class="Item"
spantest/span
span男/0/span
span四川省，成都市，锦江区/span
span详细说明/span
/div
div
class="Item"
spantest/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;i10;i++){
var
newItem=$("div
class=\"Item\"
spantest/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
附上演示效果
效果是不是非常棒呢，接下来我们再来看看瀑布流的实现思路和js控制动态加载的代码
下面的代码主要是控制滚动条下拉时的加载事件的
在下面代码说明出，写上你的操作即可，无论是加载图片还是加载记录数据
都可以
别忘了引用jquery类库
$(window).scroll(function
()
{
var
scrollTop
=
$(this).scrollTop();
var
scrollHeight
=
$(document).height();
var
windowHeight
=
$(this).height();
if
(scrollTop
+
windowHeight
==
scrollHeight)
{
//此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
//var
page
=
Number($("#redgiftNextPage").attr('currentpage'))
+
1;
//redgiftList(page);
//$("#redgiftNextPage").attr('currentpage',
page
+
1);
}
});
解析：
判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。
scrollTop为滚动条在Y轴上的滚动距离。
clientHeight为内容可视区域的高度。
scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。
从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop
+
clientHeight
==
scrollHeight。（兼容不同的浏览器）。
[img]jQuery 求页面加载等待特效，当数据加载完成效果消失，代码越少越好
这个够呛，我给你一个思路吧，页面是自上而下加载，你的特效必须保证在页面的最上方，当加载到最下变的时候（/body之后），结束特效。
当前名称：jquery特效代码,jquery网页特效设计基础教程
分享链接：http://scyanting.com/article/dsohcgi.html
