基于Jquery實(shí)現(xiàn)萬(wàn)圣節(jié)快樂(lè)特效
效果展示圖如下所示:

點(diǎn)擊此處查看效果圖:
http://keleyi.com/keleyi/phtml/jqtexiao/6.htm
以下為HTML代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>萬(wàn)圣節(jié)快樂(lè)!!-柯樂(lè)義</title>
<style type="text/css">
body{margin:0px;background-image:url(http://keleyi.com/keleyi/phtml/jqtexiao/6/Halloween2013_Keleyi.jpg); background-repeat:no-repeat;background-color:#030303;background-position:center top;}
.animate
{
margin-top:600px;
height:130px;
width:620px;
margin-left:auto;
margin-right:auto;
background:url(http://keleyi.com/keleyi/phtml/jqtexiao/6/keleyighost.gif) no-repeat;
background-position:-280px center;
}
</style>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function guitiao() {
$("div#animate_kel"+"eyi_com").css({backgroundPosition:'-280px center'});
$("div#animate_ke"+"leyi_com").animate({ backgroundPosition: "620" },20232,guitiao);
});
</script>
</head>
<body>
<div id="animate_keleyi_com" class="animate">
</div>
<div><a target="_blank">原文</a></div>
</body>
</html>
以上代碼是不是很簡(jiǎn)單啊,基于Jquery實(shí)現(xiàn)萬(wàn)圣節(jié)快樂(lè)特效教程就到此結(jié)束了,參考以上內(nèi)容,小伙伴們也來(lái)娛樂(lè)娛樂(lè)吧。
- JQuery 動(dòng)畫(huà)卷頁(yè) 返回頂部 動(dòng)畫(huà)特效(兼容Chrome)
- 基于jQuery的彈出隱藏層的窗口特效
- 分享精心挑選的23款美輪美奐的jQuery 圖片特效插件
- 基于jQuery實(shí)現(xiàn)下拉收縮(展開(kāi)與折疊)特效
- 使用jquery實(shí)現(xiàn)圖文切換效果另加特效
- jquery顯示和隱藏div特效實(shí)例
- jquery實(shí)現(xiàn)圖片左右間隔滾動(dòng)特效(可自動(dòng)播放)
- jquery之超簡(jiǎn)單的div顯示和隱藏特效demo(分享)
- jQuery焦點(diǎn)圖切換特效插件封裝實(shí)例
- 點(diǎn)擊彈出層外區(qū)域關(guān)閉彈出層jquery特效示例
- jquery購(gòu)物車實(shí)時(shí)結(jié)算特效實(shí)現(xiàn)思路
- jquery定時(shí)滑出可最小化的底部提示層特效代碼
- JQuery插件iScroll實(shí)現(xiàn)下拉刷新,滾動(dòng)翻頁(yè)特效
- 一款由jquery實(shí)現(xiàn)的整屏切換特效
- 推薦9款炫酷的基于jquery的頁(yè)面特效
- web前端設(shè)計(jì)師們常用的jQuery特效插件匯總
- jQuery+easyui中的combobox實(shí)現(xiàn)下拉框特效
- jQuery實(shí)現(xiàn)精美的多級(jí)下拉菜單特效
- jQuery+jRange實(shí)現(xiàn)滑動(dòng)選取數(shù)值范圍特效
相關(guān)文章
jQuery模擬爆炸倒計(jì)時(shí)功能實(shí)例代碼
本文通過(guò)代碼給大家介紹了jQuery模擬爆炸倒計(jì)時(shí)功能實(shí)例代碼,非常不錯(cuò),代碼簡(jiǎn)單易懂,需要的朋友參考下吧2017-08-08
網(wǎng)頁(yè)下載文件期間如何防止用戶對(duì)網(wǎng)頁(yè)進(jìn)行其他操作
網(wǎng)頁(yè)下載文件時(shí)需要一段時(shí)間,在這期間如何防止用戶對(duì)網(wǎng)頁(yè)進(jìn)行其他操作,將div覆蓋在網(wǎng)頁(yè)上,將網(wǎng)頁(yè)鎖住,具體實(shí)現(xiàn)如下2014-06-06
基于PHP和Mysql相結(jié)合使用jqGrid讀取數(shù)據(jù)并顯示
jqGrid可以動(dòng)態(tài)讀取和加載外部數(shù)據(jù),本文將結(jié)合PHP和Mysql給大家講解如何使用jqGrid讀取數(shù)據(jù)并顯示,以及可以通過(guò)輸入關(guān)鍵字查詢數(shù)據(jù)的ajax交互過(guò)程2015-12-12
jQuery實(shí)現(xiàn)移動(dòng)端筆觸canvas電子簽名
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)移動(dòng)端筆觸canvas電子簽名,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05
validationEngine 表單驗(yàn)證插件使用實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了jquery validationEngine 表單驗(yàn)證插件效果,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-06-06
jQuery實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)效果的方法,涉及jQuery操作隨機(jī)數(shù)及頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下2015-05-05
jquery代碼實(shí)現(xiàn)簡(jiǎn)單的隨機(jī)圖片瀑布流效果
瀑布流布局最近真的很流行,很多人都跟我一樣想知道是怎么做出來(lái)的吧,經(jīng)過(guò)網(wǎng)上搜索大量的參考結(jié)合N邊的實(shí)驗(yàn)今天終于被我寫(xiě)出來(lái)了,這里分享給大家,有需要的小伙伴參考下吧。2015-04-04

