当前位置： 文江博客话题详情

codaSlider hack - 如何添加覆盖图像的小三角形

发布于 2024-12-09 17:34:33 字数 1168 浏览 1 评论 0原文

查看 CodaSlider。

我已经删除了 UL 并选择了 div 来控制它，但我遇到了问题。我想添加一个三角形来表示当前显示的面板。目前，我正在考虑将三角形添加到实际的 Slide.jpg 中，但如果有人想添加另一张幻灯片，这就非常糟糕了。

您将如何动态地将三角形添加到当前面板？

像： https://i.sstatic.net/m5gCB.jpg （它添加在图像上）

我的CSS：

#control {

width: 938px;
height: 65px;
border-right: 1px solid #d1d1d1;
border-left: 1px solid #d1d1d1;
border-bottom: 1px solid #d1d1d1;
background: #fff url(sliderbg.jpg) repeat;

}

.button { float: left; width: 220px; height: 65px;
margin-right: 15px; border-right: 1px dotted  #d1d1d1; }

.buttonInside { padding: 8px; }

.buttonLast { margin-right: 0; margin-left: 2px; border-right: 0px;}

解决方案：

包括

ul.navigation a.selected {
background: url(../img/arrow.png) no-repeat top center;
position: relative;
top: -13px;
padding-top: 23px;

}

设置浮动元素为内联元素不能指定宽度和高度

ul.navigation li {
float: left;
margin-right: 12px;
width: 220px;
height: 65px;
border-right: 1px dotted #ddd;

}

原文

Check out CodaSlider.

I've removed the UL and opted for div's to control it but i'm running into a problem. I want to add a triangle signifying which panel its currently displaying. At the moment, I'm thinking of adding the triangle to the actual slide.jpg, but this is quite bad if someone wants to add another slide.

How would you go about adding a triangle to the current panel dynamically?

Like: https://i.sstatic.net/m5gCB.jpg (It's added on the image)

My CSS:

#control {

width: 938px;
height: 65px;
border-right: 1px solid #d1d1d1;
border-left: 1px solid #d1d1d1;
border-bottom: 1px solid #d1d1d1;
background: #fff url(sliderbg.jpg) repeat;

}

.button { float: left; width: 220px; height: 65px;
margin-right: 15px; border-right: 1px dotted  #d1d1d1; }

.buttonInside { padding: 8px; }

.buttonLast { margin-right: 0; margin-left: 2px; border-right: 0px;}

Solution:

Include

ul.navigation a.selected {
background: url(../img/arrow.png) no-repeat top center;
position: relative;
top: -13px;
padding-top: 23px;

}

Set floating element as inline elements can't be given widths and heights

ul.navigation li {
float: left;
margin-right: 12px;
width: 220px;
height: 65px;
border-right: 1px dotted #ddd;

}

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

嘿嘿嘿 2024-12-16 17:34:33

我将使用伪元素和 CSS 添加不带图像的箭头： http://jsfiddle.net/blineberry/fqKHK /

带有库存 CodaSlider 的 CSS 看起来像：

ul.navigation a.selected {
  position: relative;

  background: blue;

  color: #FFF;
}
ul.navigation a.selected:before {
  content: '';

  position: absolute;
  height: 0;
  width: 0;
  bottom: -9px;
  left: 50%;
  margin-left: -9px;
  z-index: 1;

  border: 10px solid transparent;
  border-top: 10px solid blue;
  border-bottom: none;
}

浏览器支持现代浏览器和 IE8+。对于 IE 7 及更低版本，我会按照 @Marco 建议使用图像，或者只是简单地不用担心。

更新：

我有一些时间，所以我对你的具体实现进行了更多的研究。

澄清一下，除了获取“当前幻灯片”箭头之外，您还需要帮助让 javascript 处理标记中的更改。

看一下这里的代码： http://jsfiddle.net/blineberry/SfJzv/

记下这些更改：

在 HTML 中，我将 .navigation 类添加到 #control 元素中。这将有助于让您的标记与 CodaSlider 脚本一起使用。

在 javascript 中：脚本的第 34 行（引用此脚本： http://jqueryfordesigners.com/ demo/coda-slider.js)，将 .parents('ul:first') 更改为.parents('.navigation:first')，并在第 53 行将 $('ul.navigation a:first').click(); 更改为 $('div.navigation a:first').click();.

在 CSS 中，我做了一些样式声明来覆盖一些现有的 CodaSlider CSS 以适应您的尺寸。根据您的实施情况，您可能需要也可能不需要。

这是一个全屏演示： http://jsfiddle.net/blineberry/SfJzv/embedded/result/

I would use a pseudoelement and CSS to add an arrow without an image: http://jsfiddle.net/blineberry/fqKHK/

The CSS with the stock CodaSlider would look like:

ul.navigation a.selected {
  position: relative;

  background: blue;

  color: #FFF;
}
ul.navigation a.selected:before {
  content: '';

  position: absolute;
  height: 0;
  width: 0;
  bottom: -9px;
  left: 50%;
  margin-left: -9px;
  z-index: 1;

  border: 10px solid transparent;
  border-top: 10px solid blue;
  border-bottom: none;
}

Browser support is modern browsers and IE8+. For IE 7 and lower, I would use an image as @Marco advises or just plain not worry about it.

UPDATE:

I had some time, so I played a bit more with your specific implementation.

Just to clarify, you need help getting the javascript to work with your changes in markup in addition to getting a "current slide" arrow.

Take a look at the code here: http://jsfiddle.net/blineberry/SfJzv/

Make note of these changes:

In the HTML, I added the .navigation class to your #control element. This will help keep your markup working with the CodaSlider script.

In the javascript: on line 34 of the script (referencing this script: http://jqueryfordesigners.com/demo/coda-slider.js), changed .parents('ul:first') to .parents('.navigation:first'), and on line 53 changed $('ul.navigation a:first').click(); to $('div.navigation a:first').click();.

In the CSS I made some style declarations to override some of the stock CodaSlider CSS to work with your dimensions. You may or may not need this depending on your implementation.

Here's a full screen demo: http://jsfiddle.net/blineberry/SfJzv/embedded/result/

回复 原文
琉璃梦幻 2024-12-16 17:34:33

我会在按钮上而不是图像上执行此操作。

我可以看到你里面有一个按钮。

所以你可以向 ACTIVE 图像按钮添加一个活动状态，然后有

.active .buttonInside {margin-top:-20px; background:url(arrow.png) top center; padding-top:28px;}

类似的东西:)

I would do it on the button instead of the image.

I can see you got an buttonInside.

So you could add an active state to the ACTIVE imagebutton, and then have

.active .buttonInside {margin-top:-20px; background:url(arrow.png) top center; padding-top:28px;}

or something like that :)

回复 原文
我一直都在从未离去 2024-12-16 17:34:33
 <script type="text/javascript" language="javascript">
    function ShowHide(obj) {
        document.getElementById("div1").style.display = 'none';
        document.getElementById("div2").style.display = 'none';
        document.getElementById("div3").style.display = 'none';
        document.getElementById("div4").style.display = 'none';
        document.getElementById(obj).style.display = 'inline';


        return false;
    }
</script>
 <style type="text/css">
    a
    {
        cursor: pointer;
        background-color: Transparent;
        top: 0;
        vertical-align: text-top;
    }
</style>

Body

<body>
<form id="form1" runat="server">
<div>
    <p>
        Hope this works</p>
    <div style="width: 938px; height: 100px; z-index: -1; border-right: 1px solid #d1d1d1;
        border-left: 1px solid #d1d1d1; border-bottom: 1px solid #d1d1d1; position: absolute;
        left: 8px; top: 20px; z-index: -1; background-color: Black">
    </div>
    <div style="margin-top: 75px; z-index: 99; background-color: Red; height: 35px; width: 940px">
        <div style="float: left; width: 50%; height: 35px; text-align: center; vertical-align: middle">
            <div style="float: left; width: 50%; height: 35px; background-color: Blue; text-align: center;">
                <div id="div1" style="height: 20px; width: 20px; background-color: Black; position: absolute;
                    margin-left: 5%;">
                </div>
                <a onclick="ShowHide('div1');">ClickMe1</a>
            </div>
            <div style="float: left; width: 50%; height: 35px; background-color: Aqua; text-align: center;
                vertical-align: middle">
                <div id="div2" style="height: 20px; width: 20px; background-color: Black; position: absolute;
                    margin-left: 5%; display: none">
                </div>
                <a onclick="ShowHide('div2');">ClickMe1</a>
            </div>
        </div>
        <div style="float: left; width: 50%; height: 35px">
            <div style="float: left; width: 50%; height: 35px; background-color: Fuchsia; text-align: center;
                vertical-align: middle">
                <div id="div3" style="height: 20px; width: 20px; background-color: Black; position: absolute;
                    margin-left: 5%; display: none">
                </div>
                <a onclick="ShowHide('div3');">ClickMe1</a>
            </div>
            <div style="float: left; width: 50%; height: 35px; background-color: Green; text-align: center;
                vertical-align: middle">
                <div id="div4" style="height: 20px; width: 20px; background-color: Black; position: absolute;
                    margin-left: 5%; display: none">
                </div>
                <a onclick="ShowHide('div4');">ClickMe1</a>
            </div>
        </div>
    </div>
</div>
</form>

希望这有效......您可以将图像放置在 div（div1、div2、div3、div4）旁边。抱歉，代码需要清理一下。 :)

 <script type="text/javascript" language="javascript">
    function ShowHide(obj) {
        document.getElementById("div1").style.display = 'none';
        document.getElementById("div2").style.display = 'none';
        document.getElementById("div3").style.display = 'none';
        document.getElementById("div4").style.display = 'none';
        document.getElementById(obj).style.display = 'inline';


        return false;
    }
</script>
 <style type="text/css">
    a
    {
        cursor: pointer;
        background-color: Transparent;
        top: 0;
        vertical-align: text-top;
    }
</style>

Body

<body>
<form id="form1" runat="server">
<div>
    <p>
        Hope this works</p>
    <div style="width: 938px; height: 100px; z-index: -1; border-right: 1px solid #d1d1d1;
        border-left: 1px solid #d1d1d1; border-bottom: 1px solid #d1d1d1; position: absolute;
        left: 8px; top: 20px; z-index: -1; background-color: Black">
    </div>
    <div style="margin-top: 75px; z-index: 99; background-color: Red; height: 35px; width: 940px">
        <div style="float: left; width: 50%; height: 35px; text-align: center; vertical-align: middle">
            <div style="float: left; width: 50%; height: 35px; background-color: Blue; text-align: center;">
                <div id="div1" style="height: 20px; width: 20px; background-color: Black; position: absolute;
                    margin-left: 5%;">
                </div>
                <a onclick="ShowHide('div1');">ClickMe1</a>
            </div>
            <div style="float: left; width: 50%; height: 35px; background-color: Aqua; text-align: center;
                vertical-align: middle">
                <div id="div2" style="height: 20px; width: 20px; background-color: Black; position: absolute;
                    margin-left: 5%; display: none">
                </div>
                <a onclick="ShowHide('div2');">ClickMe1</a>
            </div>
        </div>
        <div style="float: left; width: 50%; height: 35px">
            <div style="float: left; width: 50%; height: 35px; background-color: Fuchsia; text-align: center;
                vertical-align: middle">
                <div id="div3" style="height: 20px; width: 20px; background-color: Black; position: absolute;
                    margin-left: 5%; display: none">
                </div>
                <a onclick="ShowHide('div3');">ClickMe1</a>
            </div>
            <div style="float: left; width: 50%; height: 35px; background-color: Green; text-align: center;
                vertical-align: middle">
                <div id="div4" style="height: 20px; width: 20px; background-color: Black; position: absolute;
                    margin-left: 5%; display: none">
                </div>
                <a onclick="ShowHide('div4');">ClickMe1</a>
            </div>
        </div>
    </div>
</div>
</form>

Hope this works..... u can place ur image in side the div(div1, div2, div3, div4). And sorry the code need a lil cleaning up. :)

回复 原文
~没有更多了~

关于作者

你如我软肋

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

游缘惊梦

文章 0 评论 0

小兔几

文章 0 评论 0

Glik

文章 0 评论 0

生生漫

文章 0 评论 0

Luxian

文章 0 评论 0

Champion-Ming

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文