jquery 視覺特效(新聞滾動瀏覽)

2022-08-10 17:30:12 字數 2284 閱讀 2702

效果描述:

讓文字形式新聞,顯示給訪問站點的人看。讓新聞在乙個不可見視窗中往上滾動,當新聞全部滾動到上面消失之後,在視窗底部重新出現,並繼續向上滾動。

html:

<

div

id="scroller"

>

<

p>

據南韓《朝鮮**》10月6**道,美國國會在上月出版的乙份報告中證實,美國在中日存在主權糾紛的釣魚島問題上,只承認日本的「行政權」,而非承認日本對其擁有「主權」。

據報道,美國國會調查局(crs)將2023年報告修改後,於上月末重新出版了乙份題為《釣魚島糾紛:美國條約的義務》的報告。該報告顯示,美國**委託國會批准2023年與日本簽署的《返還沖繩協議》時表示:「將釣魚島行政權轉交給日本,並不意味著對該島嶼的主權主張有任何傾向。」也就是說,美國當時雖然將二戰停戰後負責管理的釣魚島返還給日本**,但對於中日兩國對釣魚島的主權主張持「中立態度」。

針對美國國會提出的「《返還沖繩協議》是否會影響釣魚島主權」這一問題,美國時任國務卿威廉-羅傑斯當時也曾回答說:「對這些島嶼的法律地位(主權)沒有任何影響。」

另外,美國*****法律顧問羅伯特-斯塔爾也曾表示:「美國不能擴大日本移交給我們(美國)之前它曾對釣魚島擁有的法律權利,現在將其返還,也不能縮小其他主張主權國家的權利。」報道說,這表明,美國不會對主權糾紛產生任何影響,且將對該問題保持距離。

不過,這一報告也指出:「美國雖然在釣魚島主權問題上持中立態度,但《美日安保條約》的適用物件確實包括釣魚島。」因為《美日安保條約》規定其適用物件為「日本擁有行政權的地區」。 

p>

div>

css:

#scroller#scroller p

jquery:

$(document).ready(function());

//p的高度

p_height =$scroller.height();

//整個p文字向上移動的高度需要多加上一些距離,才能讓最後一行文字完全消失後再重新出現。這裡我給了乙個25

p_move_height=p_height+25

;

var animator =function(imgblock),

10000

, function());

animator(imgblock);

} );}

animator($scroller);

});

上面的效果是使用jquery的animate()方法實現的。也可以使用css()方法實現。其**如下:

$(document).ready(function());

//scroller的高度

//p的高度

p_height =$scroller.height();

//設定初始向上滾動的距離

move_lines = 0

;

scroll();

});function scroll());

//如果move_lines的小於負數的文字p的高度

if(move_lines<-1*p_height)

settimeout(scroll,

50);

}

如果我現在想為上面的css()方法滾動的效果增加滑鼠懸停功能呢?

實現**如下:

$(document).ready(function());

//scroller的高度

//p的高度

p_height =$scroller.height();

//設定初始向上滾動的距離

move_lines = 0

;

//設定滾動初始值為true

rolling = true

; function(),function()

); scroll();

});function scroll());

//如果move_lines的小於負數的文字p的高度

if(move_lines<-1*p_height)

settimeout(scroll,

50);

}

最終效果,拷貝複製即可看到。

jquery 視覺特效(幻燈片左右移動)

描述 點選指示左右方向的,可以左右移動,並且左移動乙個,此 第乙個 自動排到佇列最後面 成為最後一張 右移動乙個,此 最後乙個 自動排到佇列最前面 成為第一張 先不管了,以後再說吧。css scroller注釋overflow hidden是為了看效果 img 只能容納顯示一張 scroller i...

jQuery特效動畫

jquery提供了很多動畫效果 一.控制元素顯示和隱藏 以前可以通過css 方法改變元素的display屬性的值達到顯示 block 和隱藏 none 元素的目的。在jquery中,提供了專門的方法控制元素的顯示和隱藏,並且增加了動畫效果。show 等同於 selector css display ...

jQuery 動畫與特效

在jquery中使用 hide 和 show 方法來隱藏和顯示 html 元素 hide 的語法形式 selector hide speed,callback show 的語法形式 selector show speed,callback speed 引數規定隱藏 顯示的速度,可以取以下值 slow...