广告对联:当scroll滚动到一定的距离左右两边会出现广告
代码如下
<html><head><title></title></head> ???<style> ???????*{ ???????????margin:0; ???????????padding:0; ???????} ???????.left{ ???????????width:100px; ???????????height:300px; ???????????background:red; ???????????float:left; ???????????position:fixed; ???????????left:0; ???????????top:200px; ???????????display:none; ???????} ???????.right{ ???????????width:100px; ???????????height:300px; ???????????background:red; ???????????float:right; ???????????position:fixed; ???????????right:0; ???????????top:200px; ???????????display:none; ???????} ???</style> ???<script src="http://code.jquery.com/jquery-latest.js"></script> ???<script> ???????????????$(function(){ ???????????$(window).scroll(function(){ ????????????????????????????????????????????//scroll滚动函数,当滚动时触发 ???????????????var scrollHeight=$(‘body‘).scrollTop()+$(‘html‘).scrollTop() ????????//获取滚动距离 ???????????????if(scrollHeight>200){ ???????????????????????????????????????????????//当滚动大于200,把左右两边的div给显示出来 ???????????????????$(‘div‘).show(1000) ????????????????}else{ ???????????????????$(‘div‘).hide(1000) ???????????????} ???????????}) ???????}) ???????????</script> ???<body> ???<div class="left"></div> ???<div class="right"></div> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br> ???<br></body></html>
效果图
jQuery实现广告对联
原文地址:https://www.cnblogs.com/superCwen/p/9951526.html