请在Chrome、Firefox等现代浏览器浏览本站。网站域名:森林之家(www.foresthouse.cn)爱学习、爱分享、爱绿软、爱恐怖、爱音乐、爱唠叨、爱折腾、爱生活!

网站对联广告渐现渐隐效果

心得笔记 forest 366℃ 已收录 1评论
效果就是当访客进入网站后不会显示对联广告需要鼠标滚动到定义的位置再显示,滚动上去则隐藏。大大提升了网站的第一印像哈哈……运用到了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>

显示效果

本站文章如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权,转载请注明转自:https://www.foresthouse.cn/archives/5615.html
喜欢 (0)or分享 (0)
发表我的评论(注:在您评论完以后不会立即显示,请不要重复刷新以免进入黑名单。)
取消评论
表情 代码 贴图 加粗 链接 私信 删除线 签到

Hi,请填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)条精彩评论。
  1. 为啥我又来,因为这里百看不厌!这家伙可能用了美佬的代理 搜狗浏览器 Windows 7
    百约不得姐2018年-04月-11日发表回复| Google Chrome 14.0.802.30| Windows 7