jquery實(shí)現(xiàn)華麗的可折角廣告代碼
本文實(shí)例講述了jquery實(shí)現(xiàn)可折角的廣告代碼。分享給大家供大家參考。具體如下:
這是一款可折角的廣告代碼,或許你已經(jīng)看到過了,現(xiàn)在一些門戶網(wǎng)站還可看到這種效果的身影,用鼠標(biāo)滑過折角的邊,即可出現(xiàn)下拉效果。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-css-zd-adv-stylee-codes/
具體代碼如下:
<!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> <title>jQuery頁面頂部折角圖片撕開效果</title> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#pageflip").hover(function(){ $("#pageflip img , .msg_block").stop().animate({width: '307px', height: '319px'}, 500); },function(){ $("#pageflip img").stop().animate({width: '50px', height: '52px'}, 220); $(".msg_block").stop().animate({width: '50px', height: '50px'}, 200); }); }); </script> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";} img{behavior:url(iepngfix.htc)} /* pageflip */ #pageflip{right:0px;float:right;position:relative;top:0px} #pageflip img{z-index:99;right:0px;width:50px;position:absolute;top:0px;height:52px;ms-interpolation-mode:bicubic} #pageflip .msg_block{right:0px;background:url(images/subscribe.png) no-repeat right top;overflow:hidden;width:50px;position:absolute;top:0px;height:50px} </style> </head> <body> <div id="pageflip"> <a href="#" target="_blank"><img width="307" height="319" alt="sc.chinaz.com" src="images/page_flip.png"></a> <div class="msg_block"></div> </div> <div style="text-align:center;clear:both;"> </div> </body> </html>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
- 基于jQuery+Cookie實(shí)現(xiàn)的防止刷新的在線考試倒計(jì)時(shí)
- jQuery團(tuán)購倒計(jì)時(shí)特效實(shí)現(xiàn)方法
- JQuery仿小米手機(jī)搶購頁面倒計(jì)時(shí)效果
- jQuery實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)的例子
- jquery插件jquery倒計(jì)時(shí)插件分享
- jquery實(shí)現(xiàn)滑屏大圖定時(shí)收縮為小banner圖片的廣告代碼
- jquery實(shí)現(xiàn)LED廣告牌旋轉(zhuǎn)系統(tǒng)圖片切換效果代碼分享
- jquery右下角自動(dòng)彈出可關(guān)閉的廣告層
- jquery實(shí)現(xiàn)可關(guān)閉的倒計(jì)時(shí)廣告特效代碼
相關(guān)文章
使用JQuery自動(dòng)完成插件Auto Complete詳解
這篇文章主要介紹了使用JQuery自動(dòng)完成插件Auto Complete詳解,使用JQuery自動(dòng)完成插件,更新現(xiàn)有圖書列表頁面上的搜索,當(dāng)用戶鍵入的時(shí)候立即顯示結(jié)果。,需要的朋友可以參考下2019-06-06jQuery實(shí)現(xiàn)表格元素動(dòng)態(tài)創(chuàng)建功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表格元素動(dòng)態(tài)創(chuàng)建功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01jQuery右側(cè)選項(xiàng)卡焦點(diǎn)圖片輪播特效代碼分享
這篇文章主要介紹了jQuery右側(cè)選項(xiàng)卡焦點(diǎn)圖片輪播特效,一段清新可愛的焦點(diǎn)圖輪播代碼,有需要的小伙伴可以參考下2015-09-09使用jquery+CSS3實(shí)現(xiàn)仿windows10開始菜單的下拉導(dǎo)航菜單特效
本文是基于jquery和css3實(shí)現(xiàn)的仿windows10開始菜單的下拉導(dǎo)航菜單特效,代碼超簡單,感興趣的朋友一起看看吧2015-09-09jquery點(diǎn)擊頁面任何區(qū)域?qū)崿F(xiàn)鼠標(biāo)焦點(diǎn)十字效果
鼠標(biāo)點(diǎn)擊聚焦,地圖定位,在圖片上突出顯示,焦點(diǎn)定位頁面元素,這些都是在系統(tǒng)開發(fā)是經(jīng)常需要用到的,下面為大家介紹下具體的實(shí)現(xiàn),感興趣的朋友可以參考下哈2013-06-06ExtJs動(dòng)態(tài)生成treepanel的Json格式
這篇文章主要介紹了ExtJs動(dòng)態(tài)生成treepanel的Json格式的相關(guān)資料,需要的朋友可以參考下2015-07-07使用jquery實(shí)現(xiàn)以post打開新窗口
網(wǎng)絡(luò)上已有此功能的函數(shù),是以純JS實(shí)現(xiàn),本文為大家介紹的使用jquery實(shí)現(xiàn),需要的朋友可以參考下2014-03-03