Jquery滑块;使容器透明,我如何隐藏图像溢出
Jquery slider; made the container transparent, how do I hide the image overflow?
这个jquery滑块通常使用一个方形的白色框来勾画,它隐藏了图像溢出。我需要把滑块放在另一个图像的顶部,所以背景不能是白色的。我创建了一个透明背景的png文件。但是如何隐藏图像溢出呢?
非常感谢;你可以看到原来的# rotatesscroll .overlay背景图像,我添加了第二个# rotatesscroll .overlay透明背景图像。
http://jsfiddle.net/QwLun/HTML<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples>/simple/images/hdr3.jpg" /></a>
</li>
<li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr1.jpg" /></a>
</li>
<li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr1.jpg" /></a>
</li>
<li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr2.jpg" /></a>
</li>
<li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr2.jpg" /></a>
</li>
</ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
CSS img { border: 0; }
#rotatescroll { height:300px; position:relative; width:300px; }
#rotatescroll .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px }
#rotatescroll .overview { position: absolute; width: 798px; list-style: none; margin: 0; padding: 0; left: 0; top: 0; }
#rotatescroll .overview li { height:300px; width:300px; float: left; position: relative; }
#rotatescroll .thumb { background:url('http://baijs.com/tinycircleslider/images/bg-thumb.png') no-repeat 50% 50%; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200; height: 100px; }
#rotatescroll .dot { background:url('http://baijs.com/tinycircleslider/images/bg-dot.png') no-repeat 0 0; display: none; height: 12px; width: 12px; position: absolute; left: 155px; top: 3px; z-index: 100; }
#rotatescroll .dot span { display: none; }
#rotatescroll .overlay {background:url('http://baijs.com/tinycircleslider/images/bg-rotatescroll.png') no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; }
#rotatescroll .overlay {background:url('http://i.imgur.com/PtgjArP.png') no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; }
.highlight, .indicator{background-color:#FC0;}
Jquery $('#rotatescroll').tinycircleslider({
interval: true,
dotsSnap: true,
intervalTime: 1000
});
在这种特殊情况下,由于视图是圆形的,我认为border-radius: 50%
上的#rotatescroll .viewport
是您正在寻找的。稍微调整一下,你就可以去掉轻微的轮廓。示例:http://jsfiddle.net/WKD32/
相关文章:
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 显示5秒后隐藏潜水
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 浮动页脚栏-使用Bootstrap隐藏
- 在jquery中为显示/隐藏设置cookie
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 从var向代码隐藏函数传递值
- Image赢得't隐藏在滚动jQuery上
- 具有rowGrouping的数据表无法隐藏列
- Jquery隐藏未触发
- JavaScript 检查隐藏字段中的值并将其设置为隐藏字段值
- 隐藏隐藏的输入字段;检查元件”;
- 如何防止在取消隐藏/隐藏文本后滚动到顶部
- 如何通过 JavaScript 取消隐藏隐藏的 asp 元素
- Jquery-显示/隐藏隐藏的输入表单字段
- 隐藏/隐藏的最佳方式't基于配置文件加载HTML部件
- 取消隐藏/隐藏类
- 在 JavaScript 中使用重排隐藏元素,它与 CSS 隐藏属性有何不同
- 使用HTML/JavaScript/CSS隐藏隐藏元素