漸現(xiàn)漸隱效果的網(wǎng)站對(duì)聯(lián)廣告實(shí)例

2024-04-25 20:19:47

字體：大中小

供稿：網(wǎng)友

這篇文章主要為大家詳細(xì)介紹了漸現(xiàn)漸隱效果的網(wǎng)站對(duì)聯(lián)廣告實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下,有需要的朋友可以收藏方便以后借鑒。

今天一早3月19日在瀏覽網(wǎng)站的時(shí)候發(fā)現(xiàn)一個(gè)很不錯(cuò)的網(wǎng)站對(duì)聯(lián)效果：漸現(xiàn)漸隱效果的網(wǎng)站對(duì)聯(lián)廣告效果，感覺(jué)很不錯(cuò)，拿下來(lái)分享給廣大草根站長(zhǎng)。

效果就是當(dāng)訪客進(jìn)入網(wǎng)站后不會(huì)顯示對(duì)聯(lián)廣告需要鼠標(biāo)滾動(dòng)到定義的位置再顯示，滾動(dòng)上去則隱藏。大大提升了網(wǎng)站的第一印像哈哈……運(yùn)用到了JQ庫(kù)，代碼如下：

<!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>對(duì)聯(lián)廣告漸隱效果</title><style>body {margin: 0px;}.ad-in-out{margin-top:50px;display:none}.rightAd{position:fixed;height:317px;width:170px;left:50%;margin-left:510px;z-index:9999;}.leftAd{position:fixed;width:140px;padding-bottom:7px;left:50%;margin-left:-650px;z-index:9999;text-align:center}</style><script src="http://lib.sinaapp.com/js/jquery/1.8.1/jquery.min.js" type="text/javascript"></script></head><body><!--start--><!--left ad--><div class="ad-in-out leftAd" style="display: block;"> <img src="https://i.loli.net/2018/03/09/5aa26d8893f9b.jpg"/></div><!--right ad--><div class="rightAd ad-in-out" style="display: block;"> <img src="https://i.loli.net/2018/03/09/5aa26d8880bd0.jpg"/></div><!--end--><img src="https://i.loli.net/2018/03/09/5aa24ae9714e5.jpg" width="100%" height="auto;" border="0"/></body><!--ad-in and ad-out--><script> $(window).scroll(function(){ $(window).scrollTop() >= 500 ? $('.ad-in-out').fadeIn() : $('.ad-in-out').fadeOut();//顯示：數(shù)值與滾動(dòng)條成正比數(shù)值越大滾得越低 });</script></html>