jquery實(shí)現(xiàn)華麗的可折角廣告代碼

更新時(shí)間：2015年09月02日 10:11:54 作者：企鵝

這篇文章主要介紹了jquery實(shí)現(xiàn)華麗的可折角廣告代碼,涉及jquery鼠標(biāo)hover事件動(dòng)態(tài)操作頁(yè)面元素樣式的技巧,可用于頁(yè)面增加廣告的視覺(jué)效果,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)可折角的廣告代碼。分享給大家供大家參考。具體如下：

這是一款可折角的廣告代碼，或許你已經(jīng)看到過(guò)了，現(xiàn)在一些門(mén)戶網(wǎng)站還可看到這種效果的身影，用鼠標(biāo)滑過(guò)折角的邊，即可出現(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頁(yè)面頂部折角圖片撕開(kāi)效果</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ì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery實(shí)現(xiàn)固定頂部導(dǎo)航效果(仿蘑菇街)
蘑菇街導(dǎo)航固定頂部的效果想必大伙有所關(guān)注吧，想實(shí)現(xiàn)吧，本文將帶你走完實(shí)現(xiàn)之旅，接下來(lái)的代碼是使用jquery，感興趣的各位可不要錯(cuò)過(guò)了哈
2013-03-03
jQuery在頁(yè)面加載時(shí)動(dòng)態(tài)修改圖片尺寸的方法
這篇文章主要介紹了jQuery在頁(yè)面加載時(shí)動(dòng)態(tài)修改圖片尺寸的方法,實(shí)例分析了jQuery操作圖片的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-03-03
jquery實(shí)現(xiàn)鼠標(biāo)拖動(dòng)圖片效果示例代碼
鼠標(biāo)拖動(dòng)圖片的效果想必大家都有見(jiàn)到過(guò)吧，其實(shí)實(shí)現(xiàn)起來(lái)很簡(jiǎn)單的，下面使用query來(lái)實(shí)現(xiàn)下，感興趣的朋友不要錯(cuò)過(guò)
2014-01-01
jQuery編寫(xiě)textarea輸入字?jǐn)?shù)限制代碼
這篇文章主要為大家詳細(xì)介紹了jQuery編寫(xiě)textarea輸入字?jǐn)?shù)限制代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
jQuery.holdReady()方法用法實(shí)例
這篇文章主要介紹了jQuery.holdReady()方法用法,以實(shí)例形式分析了holdReady()方法在暫?；蛘呋謴?fù)jQuery.ready()事件的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jQuery實(shí)時(shí)顯示鼠標(biāo)指針位置和鍵盤(pán)ASCII碼
本文通過(guò)jquery技術(shù)實(shí)現(xiàn)鼠標(biāo)指針位置和鍵盤(pán)ASCII碼，非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-03-03
jQuery中on方法使用注意事項(xiàng)詳解
本文主要介紹jQuery中on方法使用注意事項(xiàng)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
簡(jiǎn)單談?wù)刯Query(function(){})與(function(){})(jQuery)
這篇文章主要簡(jiǎn)單介紹了jQuery(function(){})與(function(){})(jQuery)的區(qū)別,需要的朋友可以參考下
2014-12-12
jquery ready()的幾種實(shí)現(xiàn)方法小結(jié)
下面是目前本人知道的幾種jQuery的ready ()的寫(xiě)法.如果還有其他的寫(xiě)法，望告知
2010-06-06
判斷一個(gè)對(duì)象是否為jquery對(duì)象的方法
在用jquery的each做循環(huán)遍歷的時(shí)候常常會(huì)使用到this，要使用jquery的方法前提此對(duì)象必須是jquery對(duì)象，下面為大家介紹下jquery對(duì)象的判斷方法
2014-03-03