分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

jQuery实现广告对联

发布时间:2023-09-06 02:22责任编辑:熊小新关键词:jQuery

广告对联:当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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved