SuperSlide Blog http://www.mandalastudioonline.com/blog by 大話主席 Thu, 08 Aug 2019 08:33:10 +0000 zh-CN hourly 1 http://wordpress.org/?v=3.5 superslide遇到jQuery(…).slide is not a function解決辦法 http://www.mandalastudioonline.com/blog/?p=138 http://www.mandalastudioonline.com/blog/?p=138#comments Thu, 08 Aug 2019 08:26:05 +0000 lujingtao http://www.mandalastudioonline.com/blog/?p=138 繼續閱讀 ]]> 很多新手使用superslide的時候會遇到“Uncaught TypeError: jQuery(…).slide is not a function”的提示,導致插件無法運行。

這種情況,請仔細檢查你的頁面代碼,可以在瀏覽器右擊查看“網頁源代碼”,然后搜索“jquery”關鍵詞,看看你頁面是不是引用了多個“jquery.js”,如果是那么只需保留一個jquery.js(通常是保留版本最新的),放在其它js前面即可。

這種情況通常是引用了多個jquery插件,每個插件都引用一個jquery.js,其實是多余的,只需保留一個即可。

如下面錯誤示范:

1

 

 

正確示范(保留一個最新版本,放在其它js前面)

2

]]>
http://www.mandalastudioonline.com/blog/?feed=rss2&p=138 0
superslide支持jquery哪些版本? http://www.mandalastudioonline.com/blog/?p=135 http://www.mandalastudioonline.com/blog/?p=135#comments Thu, 08 Aug 2019 07:51:15 +0000 lujingtao http://www.mandalastudioonline.com/blog/?p=135 繼續閱讀 ]]> 目前jQuery有三個大版本:

1.x:兼容ie678,使用最為廣泛的,官方只做BUG維護,功能不再新增。因此一般項目來說,使用1.x版本就可以了,最終版本:1.12.4 (2016年5月20日)

2.x:不兼容ie678,很少有人使用,官方只做BUG維護,功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x,最終版本:2.2.4 (2016年5月20日)

3.x:不兼容ie678,只支持最新的瀏覽器。除非特殊要求,一般不會使用3.x版本的,很多老的jQuery插件不支持這個版本。目前該版本是官方主要更新維護的版本。

superslide均支持上述所有版本,最低版本為1.4.2??梢愿鶕銓嶋H項目來選擇那個jq版本,如果需要兼容ie678,則只能使用1.x版本的,如果不需兼容則可以大膽使用3.x的。

]]>
http://www.mandalastudioonline.com/blog/?feed=rss2&p=135 0
異步加載/ajax加載配合superslide使用方式 http://www.mandalastudioonline.com/blog/?p=116 http://www.mandalastudioonline.com/blog/?p=116#comments Wed, 08 Nov 2017 01:49:58 +0000 lujingtao http://www.mandalastudioonline.com/blog/?p=116 繼續閱讀 ]]> 因為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>
]]>
http://www.mandalastudioonline.com/blog/?feed=rss2&p=116 0
在彈窗中使用SuperSlide失效的解決方法 http://www.mandalastudioonline.com/blog/?p=109 http://www.mandalastudioonline.com/blog/?p=109#comments Wed, 17 May 2017 01:24:50 +0000 lujingtao http://www.mandalastudioonline.com/blog/?p=109 繼續閱讀 ]]> 有小伙伴反應在彈窗效果里面嵌套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>
]]>
http://www.mandalastudioonline.com/blog/?feed=rss2&p=109 0
導航下拉菜單被遮住或顯示不全問題所在和解決辦法 http://www.mandalastudioonline.com/blog/?p=102 http://www.mandalastudioonline.com/blog/?p=102#comments Tue, 02 Sep 2014 08:25:36 +0000 lujingtao http://www.mandalastudioonline.com/blog/?p=102 繼續閱讀 ]]> .side{ display:none }

p, blockquote, ul, ol, dl, table, pre { margin: 15px 0; }

/* HEADERS =============================================================================*/

h1, h2, h3, h4, h5, h6 { margin: 20px 0 10px; padding: 0; font-weight: bold; -webkit-font-smoothing: antialiased; }

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code { font-size: inherit; }

h1 { font-size: 28px; color: #000; }

h2 { font-size: 24px; border-bottom: 1px solid #ccc; color: #000; }

h3 { font-size: 18px; }

h4 { font-size: 16px; }

h5 { font-size: 14px; }

h6 { color: #777; font-size: 14px; }

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child { margin-top: 0; padding-top: 0; }

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 { margin-top: 0; padding-top: 0; }

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p { margin-top: 10px; }

/* LINKS =============================================================================*/

a { color: #4183C4; text-decoration: none; }

a:hover { text-decoration: underline; }

/* LISTS =============================================================================*/

ul li > :first-child, ol li > :first-child, ul li ul:first-of-type, ol li ol:first-of-type, ul li ol:first-of-type, ol li ul:first-of-type { margin-top: 0px; }

ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; }

dl { padding: 0; }

dl dt { font-size: 14px; font-weight: bold; font-style: italic; padding: 0; margin: 15px 0 5px; }

dl dt:first-child { padding: 0; }

dl dt>:first-child { margin-top: 0px; }

dl dt>:last-child { margin-bottom: 0px; }

dl dd { margin: 0 0 15px; padding: 0 15px; }

dl dd>:first-child { margin-top: 0px; }

dl dd>:last-child { margin-bottom: 0px; }

/* CODE =============================================================================*/

pre, code, tt { font-size: 12px; font-family: Consolas, "Liberation Mono", Courier, monospace; }

code, tt { margin: 0 0px; padding: 0px 0px; white-space: nowrap; border: 1px solid #eaeaea; background-color: #f8f8f8; border-radius: 3px; }

pre>code { margin: 0; padding: 0; white-space: pre; border: none; background: transparent; }

pre { background-color: #f8f8f8; border: 1px solid #ccc; font-size: 13px; line-height: 19px; overflow: auto; padding: 6px 10px; border-radius: 3px; }

pre code, pre tt { background-color: transparent; border: none; }

kbd { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-color: #DDDDDD; background-image: linear-gradient(#F1F1F1, #DDDDDD); background-repeat: repeat-x; border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD; border-image: none; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; line-height: 10px; padding: 1px 4px; }

/* QUOTES =============================================================================*/

blockquote { border-left: 4px solid #DDD; padding: 0 15px; color: #777; }

blockquote>:first-child { margin-top: 0px; }

blockquote>:last-child { margin-bottom: 0px; }

/* HORIZONTAL RULES =============================================================================*/

hr { clear: both; margin: 15px 0; height: 0px; overflow: hidden; border: none; background: transparent; border-bottom: 4px solid #ddd; padding: 0; }

/* TABLES =============================================================================*/

table th { font-weight: bold; }

table th, table td { border: 1px solid #ccc; padding: 6px 13px; }

table tr { border-top: 1px solid #ccc; background-color: #fff; }

table tr:nth-child(2n) { background-color: #f8f8f8; }

/* IMAGES =============================================================================*/

img { max-width: 100% }

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

導航下拉菜單被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清除浮動就有了。

]]>
http://www.mandalastudioonline.com/blog/?feed=rss2&p=102 1
大話主席原創文章一覽 http://www.mandalastudioonline.com/blog/?p=77 http://www.mandalastudioonline.com/blog/?p=77#comments Thu, 09 May 2013 03:12:47 +0000 lujingtao http://www.mandalastudioonline.com/blog/?p=77 繼續閱讀 ]]> 通常每個月更新一篇,有幾篇很久前轉載的,但大部分都是原創,主要涉及到“動易系統”、“前端技術”等內容。有興趣的可以看看。
鏈接地址:http://dtop.powereasy.net/Category_1/Index.aspx?tName=%E5%A4%A7%E8%AF%9D%E4%B8%BB%E5%B8%AD

]]>
http://www.mandalastudioonline.com/blog/?feed=rss2&p=77 3
如何在同一個頁面使用多個效果? http://www.mandalastudioonline.com/blog/?p=67 http://www.mandalastudioonline.com/blog/?p=67#comments Sun, 03 Feb 2013 06:16:55 +0000 lujingtao http://www.mandalastudioonline.com/blog/?p=67 繼續閱讀 ]]> 在同一個頁面使用多個相同或不同的效果其實很簡單,直接把“基礎效果”拼起來就可以了。
為了詳細演示,我在基礎效果那里做多一個demo:“11.5-同一個頁面使用多個效果示例”。
你可以到下載頁面下載“基礎示例”代碼研究下。

]]>
http://www.mandalastudioonline.com/blog/?feed=rss2&p=67 10
SuperSlide滾動的遮罩層寬/高怎么計算的?如何設置具體一個值? http://www.mandalastudioonline.com/blog/?p=61 http://www.mandalastudioonline.com/blog/?p=61#comments Wed, 16 Jan 2013 14:21:21 +0000 lujingtao http://www.mandalastudioonline.com/blog/?p=61 繼續閱讀 ]]> 當我們使用滾動效果,例如: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]

]]>
http://www.mandalastudioonline.com/blog/?feed=rss2&p=61 3
ecshop與SuperSlide沖突?? http://www.mandalastudioonline.com/blog/?p=54 http://www.mandalastudioonline.com/blog/?p=54#comments Fri, 21 Dec 2012 05:55:26 +0000 lujingtao http://www.mandalastudioonline.com/blog/?p=54 繼續閱讀 ]]> 其實不是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

]]>
http://www.mandalastudioonline.com/blog/?feed=rss2&p=54 3
為什么調用SuperSlide后的頁面內容先顯示然后消失再正常? http://www.mandalastudioonline.com/blog/?p=46 http://www.mandalastudioonline.com/blog/?p=46#comments Fri, 21 Dec 2012 05:26:33 +0000 lujingtao http://www.mandalastudioonline.com/blog/?p=46 繼續閱讀 ]]> 我們知道,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把相關內容隱藏,最后整個效果才正常。

]]>
http://www.mandalastudioonline.com/blog/?feed=rss2&p=46 1
老司机亚洲精品_7878国产不卡视频_米奇影院888奇米色99在线_992tv人人大香草网站