堆栈内存溢出
  简体   繁体   English

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

[英]codaSlider hack - how do I add little triangles overlaying an image

 原文  2011-10-14 11:57:38  3   3    jquery/ css/ coda-slider

问题描述

Check out CodaSlider . 看看CodaSlider 。

I've removed the UL and opted for div's to control it but i'm running into a problem. 我删除了UL并选择了div来控制它，但我遇到了问题。 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. 目前，我正在考虑将三角形添加到实际的slide.jpg中，但如果有人想要添加另一张幻灯片，这是非常糟糕的。

How would you go about adding a triangle to the current panel dynamically? 您如何动态地向当前面板添加三角形？

Like: http://i.imgur.com/B0BwU.jpg (It's added on the image) 喜欢： http ： //i.imgur.com/B0BwU.jpg （图片上添加了它）

My CSS: 我的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;

} }

3 个解决方案

解决方案1
 2 已采纳  2011-10-14 12:38:30

I would use a pseudoelement and CSS to add an arrow without an image: http://jsfiddle.net/blineberry/fqKHK/ 我会使用伪元素和CSS来添加没有图像的箭头： http ： //jsfiddle.net/blineberry/fqKHK/

The CSS with the stock CodaSlider would look like: 具有库存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;
}

Browser support is modern browsers and IE8+. 浏览器支持是现代浏览器和IE8 +。 For IE 7 and lower, I would use an image as @Marco advises or just plain not worry about it. 对于IE 7及更低版本，我会使用@Marco建议的图像，或者只是不用担心它。

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. 只是为了澄清，除了获得“当前幻灯片”箭头之外，您还需要帮助让javascript与标记中的更改一起使用。

Take a look at the code here: http://jsfiddle.net/blineberry/SfJzv/ 看看这里的代码： http ： //jsfiddle.net/blineberry/SfJzv/

Make note of these changes: 记下这些变化：

In the HTML, I added the .navigation class to your #control element. 在HTML中，我将.navigation类添加到#control元素中。 This will help keep your markup working with the CodaSlider script. 这将有助于使您的标记与CodaSlider脚本一起使用。

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(); 在javascript：脚本的第34行（引用此脚本： http ： //jqueryfordesigners.com/demo/coda-slider.js ），将.parents('ul:first')更改为.parents('.navigation:first') ，第53行改变了$('ul.navigation a:first').click(); to $('div.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. 在CSS中我做了一些样式声明来覆盖一些库存CodaSlider CSS来处理你的尺寸。 You may or may not need this depending on your implementation. 根据您的实施情况，您可能需要也可能不需要。

Here's a full screen demo: http://jsfiddle.net/blineberry/SfJzv/embedded/result/ 这是一个全屏演示： http ： //jsfiddle.net/blineberry/SfJzv/embedded/result/

解决方案2
 0  2011-10-14 12:01:27

I would do it on the button instead of the image. 我会按下按钮而不是图像。

I can see you got an buttonInside. 我可以看到你有一个buttonInside。

So you could add an active state to the ACTIVE imagebutton, and then have 因此，您可以将活动状态添加到ACTIVE图像按钮，然后具有 

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

or something like that :) 或类似的东西 ：）

解决方案3
 0  2011-10-14 14:06:09

 <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). 希望这有效.....你可以把你的图像放在div（div1，div2，div3，div4）的一边。 And sorry the code need a lil cleaning up. 对不起，代码需要清理。 :) :)

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在此图像旋转器中添加延迟？ - How do I add a delay in to this image rotator? JS脚本几乎不引起移位，如何预防？ - JS script causes little shift, how do i prevent it? 如何防止固定位置<ul>从覆盖阻止他们被点击的链接？ - How do I prevent a fixed position <ul> from overlaying links which is preventing them from being clicked? 我该如何解决这个CSS骇客问题？ - How should I tackle this css-hack? 将鼠标悬停在图像上时如何显示叠加相邻图像的描述？ - When hovering over image how to show description overlaying adjacent image? 如何为更改图像鼠标悬停事件添加淡入淡出？ - How do I add a fade to a change image mouseover event? 如何在jQue中将\\ Huge添加到图像源 - How do I add \Huge to an image source in jQue 如何添加简单的图片上传功能？ - How do I add a simple image upload feature? 如何使用jQuery向图像添加评论 - How do I add a comment to an image using jQuery 如何将图像预览添加到此jquery脚本？ - How do I add image preview to this jquery script?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM