jquery特效代码(jq弹窗特效)
admin 发布:2022-12-19 19:52 156
今天给各位分享jquery特效代码的知识,其中也会对jq弹窗特效进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
- 1、jQuery实现列表内容的动态载入特效
- 2、jQuery点击按钮特效
- 3、Jquery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
- 4、jQuery 页面加载等待特效,当数据加载完成效果消失的代码?
- 5、jquery之超简单的div显示和隐藏特效demo(分享)
- 6、jquery ui dialog实现弹窗特效
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。(兼容不同的浏览器)。
jQuery点击按钮特效
script src=""/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#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幻灯片特效代码分享--鼠标滑过按钮时切换(2)
这篇文章主要介绍了jQuery实现幻灯片焦点图,可实现非常炫目时尚的幻灯片效果,非常具有实用价值,基本能满足你在网页上使用幻灯片(焦点图)效果,具体如下
幻灯片效果描述:用鼠标滑过右下角数字按钮幻灯片进行左右切换进行切换。
自定义切换参数效果:向下切换、切换时间为8秒、鼠标滑过按钮时切换
运行效果截图如下:
具体代码如下
head
titleJquery幻灯片焦点图插件/title
script
src="js/jquery-1.4a2.min.js"
type="text/javascript"/script
script
src="js/jquery.-1.2.1.min.js"
type="text/javascript"/script
script
type="text/javascript"
$(function(){
$("#KinSlideshow").KinSlideshow({
moveStyle:"down",
intervalTime:8,
mouseEvent:"mouseover",
titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"}
});
})
/script
style
type="text/css"
.code{
height:auto;
padding:20px;
border:1px
solid
#9EC9FE;
background:#ECF3FD;}
.code
pre{
font-family:"Courier
New";font-size:14px;}
.code
pre
code.note{
color:#999}
.code2{border:1px
solid
#FEB0B0;
background:#FFF1F1;
margin-top:10px;}
.code2
pre{
margin-left:20px;
font-size:12px;}
.info{
font-size:12px;
color:#666666;
font-family:Verdana;
margin:20px
50px
0;}
.info
p{
margin:0;
padding:0;
line-height:22px;
text-indent:40px;}
h2.title{
margin:0;
padding:0;
margin-top:50px;
font-size:18px;
font-family:"微软雅黑",Verdana;}
h2.title
span.titleInfo{
font-size:12px;
color:#333;
margin-left:10px;font-family:Verdana;}
h3.title{
font-size:16px;
font-family:"微软雅黑",Verdana;}
.importInfo{
font-family:Verdana;
font-size:14px;}
/style
/head
body
lih3a
href="demo2.html"自定义切换参数效果/a/h3/li
/ol
div
id="KinSlideshow"
style="visibility:hidden;"
a
target="_blank"img
src="images/11.png"
alt="Jquery幻灯片焦点图插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/23.png"
alt="Jquery幻灯片焦点图插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/22.png"
alt="Jquery幻灯片焦点图插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/5.jpg"
alt="Jquery幻灯片焦点图插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/4.jpg"
alt="Jquery幻灯片焦点图插件"
width="600"
height="300"
//a
/div
/body
/html
希望本文所述对大家的Jquery特效设计有所帮助。
jQuery 页面加载等待特效,当数据加载完成效果消失的代码?
页面加载等待特效,当数据加载完成效果消失的代码如下:
$.ajax({
url:"",
type:"post",
data:{"xx":"xx"},
beforeSend:function(){
//这里是开始执行方法,显示效果,效果自己写
},
complete:function(){
//方法执行完毕,效果自己可以关闭,或者隐藏效果
},
success:function(){
//数据加载成功
},
error:function(){
//数据加载失败
}
});
jquery之超简单的div显示和隐藏特效demo(分享)
复制代码
代码如下:
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
title无标题文档/title
script
src="jquery_last.js"
type="text/javascript"/script
script
type="text/javascript"
$(document).ready(
function(){});
function
hiden(){
$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast
}
function
slideToggle(){
$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上
}
function
show(){
$("#divObj").show();//显示,参数说明同上
}
function
toggle(){
$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上
}
function
slide(){
$("#divObj").slideDown();//窗帘效果展开
}
/script
/head
body
h3div里内容的显示隐藏特效/h3
input
type="button"
value="隐藏"
onclick="hiden()"/
input
type="button"
value="显示"
onclick="show()"/
input
type="button"
value="窗帘效果显示2"
onclick="slide()"/
input
type="button"
value="窗帘效果的切换"
onclick="slideToggle()"/
input
type="button"
value="隐藏显示效果切换"
onclick="toggle()"/
div
id="divObj"
style="display:none"
1.测试例子br/
2.测试例子br/
3.测试例子br/
4.测试例子br/
5.测试例子br/
6.测试例子br/
7.测试例子br/
8.测试例子br/
9.测试例子br/
0.测试例子br/
/div
/body
/html
jquery ui dialog实现弹窗特效
今天我们用jquery
ui
dialog来做一个弹窗特效。我们先看下效果截图:
我们可以看到,点击的时候,弹窗出现,而且这个弹窗是居中的,还是可以拖动的。。。实现这一切,只要以下代码:
我们可以看到,我对pop这个div,实现的方式是让它不要autoopen,点击的时候,我只要一句dialog,open就搞定了,借助于jquery
ui,我们做弹窗就是这么简单。。。当然了,大家可以看到,我还有一个插入数据的功能,这个功能,我采用了jquery
的appendto:
我先通过变量获取值,接着建了一个html标签,然后appendTo到table里,这样,大家就可以看到数据的插入了,当然,这不是数据库。。。大家记得,借助于juqery
ui,一个dialog,我们就能实现拖动式弹窗了。。。
jquery特效代码的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于jq弹窗特效、jquery特效代码的信息别忘了在本站进行查找喔。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
相关推荐
- 05-06jquery三级下拉菜单代码(jQuery下拉菜单)[20240506更新]
- 05-06css特效代码大全1(css字体特效代码)[20240506更新]
- 05-06表白css特效代码(html520表白代码)[20240506更新]
- 05-06js页面左右滑动特效代码(js滚动特效)[20240506更新]
- 05-05jquery代码点击复制(jquery复制对象及事件)[20240505更新]
- 05-05jquery代码交互(jquery前后端交互)[20240505更新]
- 05-05bootstrap图片特效代码(bootstrap图标怎么用)[20240505更新]
- 05-05jquery柱状图代码(js柱状图如何实现)[20240505更新]
- 05-05网页动画话图片特效代码(网页文字动画)[20240505更新]
- 05-042015qq秀特效代码(特效代码)[20240504更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接