訊息提示彈層滾動JQUERRY
/*風*/ var Life={}; Life.pmLoad=function(){ $.getJSON(`json.js`, function(d){ if(d&&d.res==`ok`){ if(d.count>0){ var arr=new Array(); i=0; for( a in d.data ){ var r=d.data[a]; arr.push(`<div class="fuc_news" id="life_pm_`+r.logid+`">`); arr.push(`<span class="fc_tit">`); arr.push(`<span class="tit_l">【最新訊息】</span>`); arr.push(`<span class="tit_r" >X</span>`); arr.push(`</span>`); arr.push(`<div class="fc_con clearfixs">`); if(r.url&&r.url!=``){ arr.push(`<a href="`+r.url+`" target="_blank" onclick="Life.pmClick(`+r.logid+`)">`+r.msg+`</a>`); }else{ arr.push(`<a href="home.php?mod=space&do=pm&subop=view&touid=1#bottom" target="_blank" >`+r.msg+`</a>`); } arr.push(`</div></div>`); i++; } Life.Num=i; $(`#pmWrapHtml`).html(arr.join(``)); Life.pmGo(); } } }); } Life.pmClose=function(id){ $(`#life_pm_`+id).hide(); } Life.pmClick=function(id){ $.get("index.php?r=pm/click&id="+id); } Life.pmGo=function(){ var s_top=0; var s_p=0; var PmNum=0; //瀏覽器高度 var browserHeight=$(window).height(); //HTML高度 var tmphtmlHeight=htmlHeight=Life.Num*98; //滾動外框高度 var floatNewsBoxsHeight=browserHeight; var PmHtml=$(`#pmWrapHtml`); var PmWap=$("#pmWrap"); $("#pmWrapHtml div.fuc_news").each(function(){ tmphtmlHeight=tmphtmlHeight-98; $(this).css("top",tmphtmlHeight+"px"); }); PmWap.height(floatNewsBoxsHeight).show(); PmHtml.css(`height`,htmlHeight+`px`).css(`top`,floatNewsBoxsHeight+`px`).animate({`top`:(floatNewsBoxsHeight-htmlHeight)+`px`},Life.Num*0.5*1000); //關閉層 $("#pmWrapHtml div.fuc_news .fc_tit .tit_r").click(function(){ var tParent=$(this).parent().parent(); tParent.hide(); s_p=tParent.index(); PmNum++; tmphtmlHeight=Life.Num*98; for (var i=0;i<Life.Num;i++){ tmphtmlHeight=tmphtmlHeight-98; if(i<=s_p){ continue; } $("#pmWrapHtml div.fuc_news:eq("+i+")").animate({`top`:(tmphtmlHeight+PmNum*98)+`px`}); } }); //瀏覽器滾動 s_top= PmWap.css("top"); $(window).scroll(function(){ var ss_top=parseInt(s_top); var sc_top=$(this).scrollTop(); var su_top=ss_top+sc_top PmWap.css("top",su_top+"px") }); } $(document).ready(function(){ Life.pmLoad(); })
案例地址:http://download.csdn.net/detail/wljk506/5166607
相關文章
- vue頁面有彈層,禁止頁面滾動Vue
- 手機直播原始碼,文字上下滾動切換 用於公告訊息提示原始碼
- 移動端彈出層滾動穿透問題總結穿透
- vue提示訊息Vue
- jQuery 訊息提示框jQuery
- H5頁面遮罩彈框下層還能滾動的問題H5遮罩
- 手持彈幕(全屏文字滾動)
- 隨滾動條移動的層
- jqueryeasyui彈出訊息框(轉載)jQueryUI
- 直播商城原始碼,vue 彈窗 慣性滾動 加速滾動原始碼Vue
- 彈層蒙版(mask),ios滾動穿透,我們專案的解決方案iOS穿透
- 遮罩層禁止頁面滾動遮罩
- 社交場景下iOS訊息流互動層實踐iOS
- asp.net 即時訊息提示ASP.NET
- Jquery實現自定義訊息彈窗jQuery
- Winform MessageBox訊息彈窗如何實現自動關閉ORM
- 點選頂部彈出提示層程式碼例項
- 網易來聊聊子彈簡訊的訊息漫遊技術
- h5單頁面彈出彈窗背景滾動問題H5
- 搭建直播平臺,iYiuMessage 訊息提示元件元件
- 死磕java底層(二)—訊息服務Java
- Android訊息機制,從Java層到Native層剖析AndroidJava
- 榮耀手機鎖屏訊息提示怎麼設定?榮耀手機鎖屏訊息提示的設定方法教程
- OverScroll彈性滾動和慣性滾動效果的實現原理——CoordinatorLayout+Behavior
- 類似微信首頁彈性滾動和慣性滾動效果的實現——OverScroll
- 禁止蒙層底部頁面跟隨滾動
- 含動畫的java氣泡提示效果,右下角訊息提示窗動畫Java
- 移動端彈窗滾動時window窗體也一起滾動的解決辦法
- app直播原始碼,收到訊息時出現彈窗APP原始碼
- 如何使用PHP彈出警告訊息框(示例詳解)PHP
- jQuery地圖熱點效果-滑鼠經過彈出提示層資訊jQuery地圖
- 【原始碼解讀】js原生訊息提示外掛原始碼JS
- Runtime底層原理探究(三) --- 訊息轉發機制(動態方法解析)
- 短視訊平臺搭建,收到通知後彈出相關提示的彈窗
- 多層 UIScrollView 巢狀滾動解決方案UIView巢狀
- 解決小程式遮罩層滾動穿透問題遮罩穿透
- jquery智慧彈出層,自動判斷位置jQuery
- Flutter Toast、彈出提示、輕提示FlutterAST