異步加載/ajax加載配合superslide使用方式

因為ajax是異步加載,所以要保證異步獲取代碼成功后,插入數據,再執行superslide,才能正常運行,正確代碼如下:


<!-- 標準superslide盒子 -->
<div class="slideBox">
    <div class="hd">
        <ul></ul>
    </div>
    <div class="bd">
        <ul>
            <!-- 內容區,ajax寫入 -->
        </ul>
    </div>
</div>

<script>
    $.ajax({ // ajax開始
      url: "test.html",
      success: function(html){ //1、保證獲取成功后再執行
        $(".slideBox .bd ul").append(html); //2、往bd里面插入數據
        $(".slideBox").slide({  titCell:".hd ul", autoPage:true }); //3、bd里面有數據了,才執行superslide
      }
    });
</script>
發表在 SuperSlide常見問題 | 評論關閉

在彈窗中使用SuperSlide失效的解決方法

有小伙伴反應在彈窗效果里面嵌套SuperSlide會無效果,其實原因在于js獲取不了隱藏元素的寬高,解決辦法是
1、SuperSlide對象(包括父元素)默認顯示,不能隱藏;
2、先執行SuperSlide
3、再用js隱藏SuperSlide對象

通常彈窗代碼如下


<!-- 彈窗 -->
<div class="popBox" style="display: none">
    <!-- slider -->
    <div class="slider">
        <div class="hd">
        ......
        </div>
        <div class="bd">
        .......
        </div>
    </div>
</div>
<script>jQuery(".slider").slide({ ...... });</script>

正確代碼如下


<!-- 彈窗 -->
<div class="popBox" style="display: block"><!-- 彈窗不能隱藏 -->
    <!-- slider -->
    <div class="slider">
        <div class="hd">
        ......
        </div>
        <div class="bd">
        .......
        </div>
    </div>
</div>
<script>
jQuery(".slider").slide({ ...... });//先執行Superslide
jQuery(".popBox").hide();//再用js隱藏彈窗
</script>
發表在 SuperSlide常見問題 | 評論關閉

導航下拉菜單被遮住或顯示不全問題所在和解決辦法

導航下拉菜單被遮住或顯示不全問題所在和解決辦法

導航下拉菜單被banner遮住/顯示不全,這種問題是老生常談了,經常有新手會問,有些人做了2、3年的還會經常犯錯,而且好多人還以為是js問題,其實這是基本的css知識。我覺得還是有必要寫一遍文章解釋給新手們。

一、導航下拉菜單被遮住,那是因為層疊關系錯誤

我們必須理解層疊關系滿足的2個條件:

  • 1、必須是同級;
  • 2、二者分別設定了position:relative 或 absolute 或 fixed;
  • 這時候通過設置z-index才有效

看看我們比較常見的網頁布局:

html:

<!-- 頭部 -->
<div class="header">

    <div class="nav">
        <ul class="mNav">
            這是下拉菜單
            .........
        </ul>
    </div>

</div>

<!-- banner -->
<div class="banner">
    <div class="slider">這是焦點圖....</div>
</div>

錯誤css

.header{ }
.header .nav{ z-index:9999; height:50px; color:#fff; text-align:center;  }
.banner{ position:relative; margin:10px auto; height:300px; }

上面css里吧nav的z-index設置成9999,但發現下拉還是被擋住,這是因為此時banner設置了position,會在nav上面。

想要nav在banner上面,就需要向上查找,發現nav的外層(header)和banner在同一級(滿足條件1)

這時候同時設置header和banner的position和z-index,使header在banner上面即可,此時nav的z-index已經無關重要了。

正確css:

.header{ position:relative; z-index:1 }
.header .nav{  height:50px; color:#fff; text-align:center; }
.banner{ position:relative; z-index:0; margin:10px auto; height:300px; }

例子2:

如果你的html結構這樣的:

<div class="header">

    <div class="nav">
        <ul class="mNav">
            這是下拉菜單
            .........
        </ul>
    </div>

</div>

<!-- content -->
<div class="content">
    <div class="banner">
        <div class="slider">這是焦點圖....</div>
    </div>
</div>

那么分別設置header和content的position和z-index,因為2者在最外層并且同級。

其它同理。

二、導航下拉菜單顯示不全是因為外層設置了overflow:hidden

很多時因為網頁比較復雜,層級比較多,所以經常忽略了外層或者外外外層設置了overflow:hidden導致導航下拉菜單顯示不全,其實只要仔細查找就能解決問題,把overflow:hidden去掉,如果需要清除浮動,可以用其它方法,百度css清除浮動就有了。

發表在 SuperSlide常見問題 | 一條評論

大話主席原創文章一覽

通常每個月更新一篇,有幾篇很久前轉載的,但大部分都是原創,主要涉及到“動易系統”、“前端技術”等內容。有興趣的可以看看。
鏈接地址:http://dtop.powereasy.net/Category_1/Index.aspx?tName=%E5%A4%A7%E8%AF%9D%E4%B8%BB%E5%B8%AD

發表在 其它發明 | 3 條評論

如何在同一個頁面使用多個效果?

在同一個頁面使用多個相同或不同的效果其實很簡單,直接把“基礎效果”拼起來就可以了。
為了詳細演示,我在基礎效果那里做多一個demo:“11.5-同一個頁面使用多個效果示例”。
你可以到下載頁面下載“基礎示例”代碼研究下。

發表在 SuperSlide常見問題 | 10 條評論

SuperSlide滾動的遮罩層寬/高怎么計算的?如何設置具體一個值?

當我們使用滾動效果,例如:left、leftLoop、top、topLoop、leftMarquee、topMarquee等的時候,SuperSlide會自動設置一個“遮罩層(tempWrap)”來限制可視范圍,超出范圍的將會被隱藏起來。

可視范圍取決于 vis 參數和一個滾動元素的寬高,例如:

參數vis:3,effect:left;滾動元素為li。即li左滾動,可視范圍為3個li寬度。

公式: tempWrap寬度 = li寬度 * vis = (li的width + li的padding + li的margin)*3

這樣做法是為了保證效果的正確顯示,而不會出現半個li的情況。

但是,有時候客觀原因使我們必須設置具體的某一個值,而不是程序計算出來的結果,這時候我們可以用css來強制設置tempWrap的寬高。

很簡單,即:
[code lang="css"]
.superSlide .tempWrap{ width:999px !important }/* 用!important強制設置即可 */
[/code]

發表在 SuperSlide常見問題 | 3 條評論

ecshop與SuperSlide沖突??

其實不是ecshop與SuperSlide沖突,而是ecshop與jQuery沖突,而SuperSlide是基于jQuery的,所以就。。。。。
解決方法很多,百度“ecshop jquery”就有了,具體那個好我就不清楚了,因為我不用ecshop的。。。。
百度鏈接:http://www.baidu.com/s?wd=ecshop%20jquery&pn=10&ie=utf-8&f=3&rsv_page=1

發表在 SuperSlide常見問題 | 3 條評論

為什么調用SuperSlide后的頁面內容先顯示然后消失再正常?

我們知道,html的執行順序是從上而下的,對js的執行也是一樣的。所以做好的做法是需要使用特效的對象結束后立刻調用SuperSlide那就能獲取最佳的用戶體驗,解決上述問題。
例如:
[code lang="html"]
<div class="box">
<div class="hd"><ul><li>1</li> <li>2</li> <li>3</li></ul></div>
<div class="bd">
<ul><li>信息1</li>...</ul>
<ul><li>信息2</li>...</ul>
<ul><li>信息3</li>...</ul>
</div>
</div>
<script type="text/javascript">
jQuery(".box").slide();/*當box結束后立刻調用SuperSlide,會得到最好效果*/
</script>
[/code]

有些用戶會用下面方式調用:
[code lang="js"]
$(document).ready(function(){
jQuery(".box").slide();
});
[/code]

或者:
[code lang="js"]
jQuery(function($) {
jQuery(".box").slide();
});
[/code]

其實這兩種執行過程是一樣的,都是等待整個頁面的dom加載完后再執行SuperSlide,相當于把調用SuperSlide的代碼放到頁面最下面。
這樣的話,就會造成頁面內容先顯示,直到頁面結束后再執行SuperSlide把相關內容隱藏,最后整個效果才正常。

發表在 SuperSlide常見問題 | 一條評論

為什么SuperSlide放到table里面后ie6/7 部分效果失效?

經驗證確實存在問題,我們先看代碼:

[code lang="html"]
<table>
<tr>
<td>
<div class="box">
<div class="hd"><ul><li>1</li> <li>2</li> <li>3</li></ul></div>
<div class="bd">
<ul><li>信息1</li>...</ul>
<ul><li>信息2</li>...</ul>
<ul><li>信息3</li>...</ul>
</div>
</div>
<script type="text/javascript">jQuery("box").slide();</script>
</td>
</tr>
</table>
[/code]

上述情況,整個效果都放在在table里面,此時會發現 ie6、ie7 沒有效果。
經測試發現除了fade效果外,其它效果都有問題。
用調試工具后發現ie6、ie7下,jQuery取不到盒子高度/寬度,暫不知原因。

暫時解決方法:
把調用SuperSlide的js語句放到table外面就可以了,正確如下:

[code lang="html"]
<table>
<tr>
<td>
<div class="box">
<div class="hd"><ul><li>1</li> <li>2</li> <li>3</li></ul></div>
<div class="bd">
<ul><li>信息1</li>...</ul>
<ul><li>信息2</li>...</ul>
<ul><li>信息3</li>...</ul>
</div>
</div>
</td>
</tr>
</table>
<script type="text/javascript">jQuery("box").slide();</script>
[/code]

終極解決方法:不要用table布局,用div布局不存在這個問題。都什么世紀了,還用table布局?

發表在 SuperSlide常見問題 | 4 條評論

HELLO,大話主席 !

歡迎來到 大話主席 blog~,從此刻開始記錄我的blog成長~

發表在 其它發明 | 2 條評論