渐现渐隐效果的网站对联广告实例

2024-04-25 20:19:47

字体：大中小

来源：转载

供稿：网友

这篇文章主要为大家详细介绍了渐现渐隐效果的网站对联广告实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

今天一早3月19日在浏览网站的时候发现一个很不错的网站对联效果：渐现渐隐效果的网站对联广告效果，感觉很不错，拿下来分享给广大草根站长。

效果就是当访客进入网站后不会显示对联广告需要鼠标滚动到定义的位置再显示，滚动上去则隐藏。大大提升了网站的第一印像哈哈……运用到了JQ库，代码如下：

<!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>对联广告渐隐效果</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();//显示：数值与滚动条成正比数值越大滚得越低 });</script></html>