网页常用动态效果--悬浮广告

关键在于动态获取滚动坐标值

测试滚动事件

$(window).scroll(function(){

　　console.log($(window).scrolltop());

})

获取三个高度：窗口高度，盒子高度以及滚动坐标值，将广告盒子设置为绝对定位，当鼠标滚动时，其top值为滚动坐标值+窗口高度/2-盒子高度/2

css代码：

<style>div{width:50px;height:200px;position: absolute;top:0;background: lightgreen;}.right{right:0;}</style>

JQ代码：

 1     <script>
 2         $(function(){
 3             //获得三个高度
 4
 5             var h2 = $(window).height();//窗口高度
 6             var h3 = $('div').height();//盒子高度
 7             //滚动事件
 8             $(window).scroll(function(){
 9                 var h1 = $(window).scrollTop();//滚动值
10                 $('div').stop().animate({top:h1+h2/2-h3/2},200); //注意加动画前加stop()
11             })
12             $('span').on('click',function(){
13                 $(this).parent().css('display','none');
14             })
15
16         })
17         </script>

转载于:https://www.cnblogs.com/shisanjun/p/4814154.html

网页常用动态效果--悬浮广告相关推荐

手机（wap）网页底部固定悬浮广告带轮播特效代码
// 作者:xycms // 网址:http://wwww.jsxyidc.com // 日期:2019-03-3 // QQ:364500483 // code:网页底部悬浮广告代码,带单独关闭va ...
【JS】网页悬浮广告及联系QQ客服侧边栏
网页悬浮广告及联系QQ客服侧边栏,广告跳动效果,及QQ客服隐藏效果 <script language="javascript" type="text/javascr ...
Javascript删除网页悬浮广告（一）
Javascript删除网页悬浮广告(一) 前言设计思路具体方案定位方式 Id Class Tag Name Name 解决措施删除隐藏折叠商业道德笔记附录及声明前言在上网冲浪浏 ...
wap手机网页悬浮广告代码遮盖原有网页内容怎么办？
wap手机网页广告代码遮盖原有网页内容怎么办? 这个也许是很多weber在做网页页面会遇到的问题,假如是在中间悬浮,最好的办法就是不要用了,这个没有好的解决办法,只要是广告肯定是要给客户看的,不 ...
如何对手机网页底部悬浮广告代码做翻转效果，这样做就好了
如何对手机网页底部悬浮广告代码做翻转效果,这样做就好了首先你要有悬浮层,然后给予CSS赋样式,样式如下: //作者:xycms //update:20190442 //QQ:364500483 va ...
常见网页悬浮广告（JavaScript）
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
常用的对联广告带关闭功能
<html> <head> <title>常用的对联广告带关闭功能 - qpsh.com</title> <meta http-equiv=&qu ...
jQuery右下角悬浮广告
查看演示右下角悬浮广告是一种常见的网页广告展示方式,而且对用户浏览有干扰之嫌但对网站收益来说是很受站长们欢迎的.今天我给大家分享一个使用jQuery来实现网页右下角广告的实例.它的优点是可以从右下角 ...
美工效果图大小 html,美工做图和网页常用尺寸表.doc
美工做图和网页常用尺寸表美工做图和网页常用尺寸表平面设计常用制作尺寸资料]平面设计常用制作尺寸正度纸张:787×1092mm 开数(正度) 尺寸单位(mm) 全开 781×1086 2开 5 ...

网页常用动态效果--悬浮广告

网页常用动态效果--悬浮广告相关推荐

最新文章

热门文章