在弹窗中使用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 条评论