欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。 网站托管 桌面收藏 网站定制

361源码网

当前位置:361源码网 > 技术文档 > 程序代码 > 渐现渐隐效果的网站对联广告实例
这篇文章主要为大家详细介绍了渐现渐隐效果的网站对联广告实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

    今天一早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>

效果查看

以上就是本文的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361源码网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: 对联广告 网站对联 对联 渐现渐隐

上一篇div+css实现电脑端显示手机端隐藏代码

下一篇织梦dedeCMS列表页文章列表每隔5行加横线

延伸阅读

《渐现渐隐效果的网站对联广告实例》期待您的评论!

大牛,别默默的看了,快来点评一下吧!:)。
取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在