jQuery實現(xiàn)列表內(nèi)容的動態(tài)載入特效

采用Jquery實現(xiàn)的列表數(shù)據(jù)動態(tài)更新效果，更新的數(shù)據(jù)可以是ajax請求的數(shù)據(jù)。

在路南等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè) 網(wǎng)站設(shè)計制作按需求定制網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站制作,成都全網(wǎng)營銷,外貿(mào)網(wǎng)站制作,路南網(wǎng)站建設(shè)費用合理。

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四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

div

class="Item"

spantest/span

span男/0/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

div

class="Item"

spantest/span

span男/0/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

div

class="Item"

spantest/span

span男/0/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

div

class="Item"

spantest/span

span男/0/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

div

class="Item"

spantest/span

span男/0/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

div

class="Item"

spantest/span

span男/0/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

div

class="Item"

spantest/span

span男/0/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

div

class="Item"

spantest/span

span男/0/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

div

class="Item"

spantest/span

span男/0/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

/div

/div

/div

p

style="text-align:center;"a

href="javascript:void(0);"

onClick="ListView.Update();"刷新數(shù)據(jù)/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四川省，成都市，錦江區(qū)/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

附上演示效果

效果是不是非常棒呢，接下來我們再來看看瀑布流的實現(xiàn)思路和js控制動態(tài)加載的代碼

下面的代碼主要是控制滾動條下拉時的加載事件的

在下面代碼說明出，寫上你的操作即可，無論是加載圖片還是加載記錄數(shù)據(jù)

都可以

別忘了引用jquery類庫

$(window).scroll(function

()

{

var

scrollTop

=

$(this).scrollTop();

var

scrollHeight

=

$(document).height();

var

windowHeight

=

$(this).height();

if

(scrollTop

+

windowHeight

==

scrollHeight)

{

//此處是滾動條到底部時候觸發(fā)的事件，在這里寫要加載的數(shù)據(jù)，或者是拉動滾動條的操作

//var

page

=

Number($("#redgiftNextPage").attr('currentpage'))

+

1;

//redgiftList(page);

//$("#redgiftNextPage").attr('currentpage',

page

+

1);

}

});

解析：

判斷滾動條到底部，需要用到DOM的三個屬性值，即scrollTop、clientHeight、scrollHeight。

scrollTop為滾動條在Y軸上的滾動距離。

clientHeight為內(nèi)容可視區(qū)域的高度。

scrollHeight為內(nèi)容可視區(qū)域的高度加上溢出（滾動）的距離。

從這個三個屬性的介紹就可以看出來，滾動條到底部的條件即為scrollTop

+

clientHeight

==

scrollHeight。（兼容不同的瀏覽器）。

Jquery幻燈片特效代碼分享--鼠標滑過按鈕時切換（2）

這篇文章主要介紹了jQuery實現(xiàn)幻燈片焦點圖，可實現(xiàn)非常炫目時尚的幻燈片效果，非常具有實用價值，基本能滿足你在網(wǎng)頁上使用幻燈片(焦點圖)效果，具體如下

幻燈片效果描述：用鼠標滑過右下角數(shù)字按鈕幻燈片進行左右切換進行切換。

自定義切換參數(shù)效果：向下切換、切換時間為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"自定義切換參數(shù)效果/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特效設(shè)計有所幫助。

jquery ui dialog實現(xiàn)彈窗特效

今天我們用jquery

ui

dialog來做一個彈窗特效。我們先看下效果截圖：

我們可以看到，點擊的時候，彈窗出現(xiàn)，而且這個彈窗是居中的，還是可以拖動的。。。實現(xiàn)這一切，只要以下代碼：

我們可以看到，我對pop這個div，實現(xiàn)的方式是讓它不要autoopen，點擊的時候，我只要一句dialog,open就搞定了，借助于jquery

ui，我們做彈窗就是這么簡單。。。當然了，大家可以看到，我還有一個插入數(shù)據(jù)的功能，這個功能，我采用了jquery

的appendto：

我先通過變量獲取值，接著建了一個html標簽，然后appendTo到table里，這樣，大家就可以看到數(shù)據(jù)的插入了，當然，這不是數(shù)據(jù)庫。。。大家記得，借助于juqery

ui，一個dialog，我們就能實現(xiàn)拖動式彈窗了。。。

jQuery動畫特效實例教程

本文以實例形式詳細講述了jQuery動畫特效的實現(xiàn)方法。分享給大家供大家參考之用。具體方法如下：

1.自制折疊內(nèi)容塊

內(nèi)容塊如下：

div

class="module"

div

class="caption"

span標題/span

img

src="rollup.gif"

alt="rollup"

title="rolls

up

this

module"/

/div

div

class="body"

近日，《體壇周報》記者馬德興在接受天津體育頻道《體壇新視野》節(jié)目采訪時表示自己對恒大[微博]的情況比較擔憂，恒大統(tǒng)治力比上賽季下降了很多，恒大外援存在位置重疊的問題，客場不輸給西悉尼流浪者就是一個可以接受的結(jié)果。該節(jié)目稱恒大聯(lián)賽3連勝勝之不武，恒大的惹不起不過爾爾，恒大失去了對其它球隊壓倒性的優(yōu)勢，能力下降是恒大霸主地位有所動搖的根源所在。

/div

/div

給img元素綁定點擊事件。

$(function()

{

$('div.caption

img').click(function

()

{

//先找到img的父級元素，再找該父級元素的子元素

var

$body

=

$(this).closest('div.module').find('div.body');

if

($body.is(':hidden'))

{

$body.show();

}

else

{

$body.hide();

}

});

});

運行效果如下圖所示：

切換元素的顯示狀態(tài)，還可以用toggle方法。

$(function()

{

$('div.caption

img').click(function

()

{

$(this).closest('div.module').find('div.body').toggle();

});

});

以上是沒有動畫效果的，有時候感覺會很唐突。實際上，show,hide,toggle方法都可以有動畫效果。比如：

$(function()

{

$('div.caption

img').click(function

()

{

$(this).closest('div.module').find('div.body').toggle('slow');

});

});

又比如：

$(function()

{

$('div.caption

img').click(function

()

{

$(this).closest('div.module').find('div.body').toggle('slow',

function()

{

$(this).closest('div.module').toggleClass('rolledup',

$(this).is(':hidden'))

});

});

});

2.使元素淡入淡出

fadeIn(speed,

callback)

fadeOut(speed,

callback)

fadeTo(speed,

opacity,

callback)

3.上下滑動元素

slideDown(speed,

callback)

slideUp(speed,

callback)

slideToggle(speed,

callback)

4.停止動畫

stop(clearQueue,

gotoEnd)

5.創(chuàng)建自定義動畫

animate(properties,

duration,

easing,

callback)

$('.classname').animate({opacity:'toggle'},'slow')

如果寫一個擴展函數(shù)。

$.fn.fadeToggle

=

function(speed){

return

this.animate({opacity:'toggle'},'slow');

}

6.自定義縮放動畫

$('.classname').each(function(){

$(this).animate({

width:

$(this).width()

*

2,

height:

$(this).height()

*

2

});

});

7.自定義掉落動畫

$('.classname').each(function(){

$(this)

.css("position","relative")

.animate({

opacity:

0,

top:

$(window).height()

-

$(this).height()

-

$(this).position().top

},'slow',function(){

$(this).hide();

})

});

8.自定義消散動畫

$('.classname').each(function(){

var

position

=

$(this).position();

$(this)

.css({

position:

'absolute',

top:

position.top,

left:position.left

})

.animate({

opacity:

'hide',

width:

$(this).width()*5,

height:

$(this).height()*5

top:

position.top

-

($(this).height()

*

5

/

2),

left:

position.left

-

($(this).width()

*

5

/2)

},'normal');

});

9.隊列中的動畫

//動畫插入隊列

$('img').queue('chain',

function(){});

$('img').queue('chain',

function(){});

$('img').queue('chain',

function(){});

$('img').queue('chain',

function(){});

$('button').click(function(){

$('img').dequeue('chain');

//刪除隊列中的動畫

})

cleaeQueue(name)//刪除所有未執(zhí)行的隊列中的動畫

delay(duration,

name)//為隊列中所有未執(zhí)行的動畫添加延遲

相信本文所述對大家的jQuery程序設(shè)計有一定的借鑒價值。