• JS特效 http://www.it165.net/js/
  • 嘉和彩票官网

    發布日(ri)期︰2020-02-19 09:54:00
    Tag標(biao)簽(qian)︰JS特效代碼  彈窗漂浮  控(kong)制效果  


    1、jsp頁(ye)面上彈出層的代碼
     

      本篇文章(zhang)可(ke)是日(ri)常中的日(ri)常經典中的經典中的經典了(liao),我相信(xin)很多(duo)人在運用(yong)操作JS時會利用(yong)它(ta)的特效代碼對于(yu)那(na)些經常騷擾(rao)我們的彈窗還有漂浮效果的騷擾(rao)廣告進行手(shou)段性(xing)參與將(jiang)它(ta)完完全全的控(kong)制在自己的手(shou)心里面了(liao)。

    <s:iterator value="lrVo" var="lrVo" id="lrVo" status="st"> 
    <div class="logisticscenter_xq" style="display: none;" id='<s:property value="#lrVo.logisticNO"/>'> 
    <dl> 
    <dt><strong><s:text name="struts.webui.logistics.label.logisticsDetails"/>︰</strong></dt> 
    <dd><strong class="close_wind">X</strong></dd> 
    </dl> 
    <div class="information logistics_win"> 
    <table width="" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td class="r_text"><span class="icon9">*</span><s:text name="struts.webui.logistics.label.logisticsNumber"/>︰</td> 
    <td></td> 
    <td colspan="3" id="logisticNo"><s:property value="#lrVo.logisticNO"/></td> 
    </tr> 
    <tr> 
    <td valign="top" class="r_text"><span class="icon9">*</span><s:text name="struts.webui.logistics.label.distribution"/>︰</td> 
    <td></td> 
    <td colspan="3" style="text-align:left" id="content"><s:property value="#lrVo.content" escape="false"/></td> 
    </tr> 
    </table> 
    </div> 
    </div> 
    </s:iterator> 
    <!--物流詳情彈出窗口 end--> 
     
    層樣式代碼︰
    .logisticscenter_xq{ 
    position: absolute; 
    width:710px; 
    border:solid 2px #787878; 
    background: #edfcfe; 
    z-index: 2; 
     
    我的處理時將(jiang)彈出層放(fang)置到(dao)整個網(wang)站頁(ye)面的layout.jsp,網(wang)站中所有頁(ye)面的布局都ji)壇興ta)。該網(wang)站采用(yong)tiles框架統一對頁(ye)面布局。
     
    2、計算對象(xiang)居中要設置的left值和(he)top值
     
    我把(ba)這一步要完成的功(gong)能寫(xie)成一個js文件,主要是根據用(yong)戶(hu)在一覽(lan)頁(ye)面上鼠標(biao)點(dian)擊的坐標(biao)位置,動(dong)態地顯示該條記錄的層窗口。主要代碼如下︰
    代碼
    / 計算對象(xiang)居中需要設置的left和(he)top值 
    // 參數︰ 
    // _w - 對象(xiang)的寬度 
    // _h - 對象(xiang)的高度 
    function getLT(_w,_h) 
    var de = document.documentElement; 
    // 獲取當前(qian)瀏覽(lan)器窗口的寬度和(he)高度 
    // 兼容寫(xie)法(fa),可(ke)兼容ie,ff 
    var w = self.innerWidth (de&&de.clientWidth) document.body.clientWidth; 
    var h = (de&&de.clientHeight) document.body.clientHeight; 
    // 獲取當前(qian)滾動(dong)條的位置 
    // 兼容寫(xie)法(fa),可(ke)兼容ie,ff 
    var st= (de&&de.scrollTop) document.body.scrollTop; 
    var topp=0; 
    if(h>_h) 
    topp=(st+(h - _h)/2); 
    else
    topp=st; 
    var leftp = 0; 
    if(w>_w) 
    leftp = ((w - _w)/2); 
    // 左側距,頂部距 
    return [leftp,topp]; 
    //獲取鼠標(biao)位置GetPostion 
    function GetPostion(e) { 
    var x = getX(e); 
    var y = getY(e); 
    function getX(e) { 
    e = e window.event; 
    return e.pageX e.clientX + document.body.scrollLeft - document.body.clientLeft 
    function getY(e) { 
    e = e window.event; 
    return e.pageY e.clientY + document.body.scrollTop - document.body.clientTop 
    //判斷瀏覽(lan)器類型 
    function getOs() 
    var OsObject = ""; 
    if(navigator.userAgent.indexOf("MSIE")>0) { 
    return "MSIE"; 
    if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ 
    return "Firefox"; 
    if(isSafari=navigator.userAgent.indexOf("Safari")>0) { 
    return "Safari"; 
    if(isCamino=navigator.userAgent.indexOf("Camino")>0){ 
    return "Camino"; 
    if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ 
    return "Gecko"; 
     
    將(jiang)該js包含(han)到(dao)主調(diao)用(yong)的一覽(lan)jsp文件中xiao)/div>
     
    1 <script language="javascript" type="text/javascript" src="<s:url value="/js/aligncenter.js"/>"></script> 
     
    3、一覽(lan)jsp中的調(diao)用(yong)方(fang)法(fa)
     
    1 <a class="view_button" onclick="viewLogistics(event,'<s:property value="#lrVo.logisticNO"/>')" href="####"><s:text name="struts.webui.logistics.label.view"/></a> 
     
    用(yong)戶(hu)點(dian)擊該行記錄的詳情鏈接(jie)時調(diao)用(yong)顯示層的方(fang)法(fa),同時將(jiang)該記錄的id值傳給調(diao)用(yong)方(fang)法(fa)。其實(shi),每一個層就是用(yong)這條記錄的一個id屬性(xing)值dao)星fen)的。
     
     
    function viewLogistics(event,logisticNO){ 
    var os = getOs(); 
    var y = getY(event); 
    if(os=='MSIE'){ 
    y=window.event.y+405; 
    $(".logisticscenter_xq").hide(); 
    $("#"+logisticNO).show(); 
    $("#"+logisticNO).css("top",y+15); 
     
    至于(yu)方(fang)法(fa)中event參數的作用(yong),還不是太清(qing)楚,這點(dian)需要再調(diao)查一下。最(zui)終效果如下圖,隨(sui)著(zhou)鼠標(biao)下luan)疲 隳芄歡dong)態的移動(dong)。
    <!-- 物流詳情彈出頁(ye)面 start --> 
      本篇文章(zhang)在我們的網(wang)站里面還有很多(duo)類型相同的內容如果看完這篇文章(zhang)以後你(ni)還是覺(jue)得不夠盡興不夠舒暢(chang)那(na)麼你(ni)可(ke)以到(dao)我們網(wang)站里搜(sou)索(suo)相關的其他資訊(xun)這對于(yu)你(ni)我都是非常有益而且還很實(shi)用(yong)的。
    • 嘉和彩票官网

    • 嘉和彩票官网

    • 嘉和彩票官网

    • 嘉和彩票官网

    • 嘉和彩票官网

    山东体彩网官网次元立方(fang) -廣告服務 -隱私聲明 -版權申明 -免責條款 -網(wang)站地圖 -網(wang)友投稿 -聯(lian)系方(fang)式
    本站內容來自于(yu)互聯(lian)網(wang),僅供用(yong)于(yu)網(wang)絡技(ji)術學(xue)習(xi),學(xue)習(xi)中請遵(zun)循相關法(fa)律法(fa)規(gui)
    嘉和彩票官网 | 下一页