基于Jquery實現(xiàn)萬圣節(jié)快樂特效
更新時間:2015年11月01日 14:38:33 投稿:mrr
本文使用jquery代碼實現(xiàn)萬圣節(jié)特效,代碼簡單易懂,萬圣節(jié)送給大家不一樣的禮物,參考下本文大家也一起制作吧
效果展示圖如下所示:
點擊此處查看效果圖:
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>萬圣節(jié)快樂??!-柯樂義</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>
以上代碼是不是很簡單啊,基于Jquery實現(xiàn)萬圣節(jié)快樂特效教程就到此結束了,參考以上內(nèi)容,小伙伴們也來娛樂娛樂吧。
您可能感興趣的文章:
- JQuery 動畫卷頁 返回頂部 動畫特效(兼容Chrome)
- 基于jQuery的彈出隱藏層的窗口特效
- 分享精心挑選的23款美輪美奐的jQuery 圖片特效插件
- 基于jQuery實現(xiàn)下拉收縮(展開與折疊)特效
- 使用jquery實現(xiàn)圖文切換效果另加特效
- jquery顯示和隱藏div特效實例
- jquery實現(xiàn)圖片左右間隔滾動特效(可自動播放)
- jquery之超簡單的div顯示和隱藏特效demo(分享)
- jQuery焦點圖切換特效插件封裝實例
- 點擊彈出層外區(qū)域關閉彈出層jquery特效示例
- jquery購物車實時結算特效實現(xiàn)思路
- jquery定時滑出可最小化的底部提示層特效代碼
- JQuery插件iScroll實現(xiàn)下拉刷新,滾動翻頁特效
- 一款由jquery實現(xiàn)的整屏切換特效
- 推薦9款炫酷的基于jquery的頁面特效
- web前端設計師們常用的jQuery特效插件匯總
- jQuery+easyui中的combobox實現(xiàn)下拉框特效
- jQuery實現(xiàn)精美的多級下拉菜單特效
- jQuery+jRange實現(xiàn)滑動選取數(shù)值范圍特效
相關文章
網(wǎng)頁下載文件期間如何防止用戶對網(wǎng)頁進行其他操作
網(wǎng)頁下載文件時需要一段時間,在這期間如何防止用戶對網(wǎng)頁進行其他操作,將div覆蓋在網(wǎng)頁上,將網(wǎng)頁鎖住,具體實現(xiàn)如下2014-06-06基于PHP和Mysql相結合使用jqGrid讀取數(shù)據(jù)并顯示
jqGrid可以動態(tài)讀取和加載外部數(shù)據(jù),本文將結合PHP和Mysql給大家講解如何使用jqGrid讀取數(shù)據(jù)并顯示,以及可以通過輸入關鍵字查詢數(shù)據(jù)的ajax交互過程2015-12-12jQuery實現(xiàn)轉(zhuǎn)動隨機數(shù)抽獎效果的方法
這篇文章主要介紹了jQuery實現(xiàn)轉(zhuǎn)動隨機數(shù)抽獎效果的方法,涉及jQuery操作隨機數(shù)及頁面元素的相關技巧,需要的朋友可以參考下2015-05-05