gpt4 book ai didi

css - 缩略图滚动条标题淡入淡出位置

转载 作者:太空宇宙 更新时间:2023-11-04 16:11:25 24 4
gpt4 key购买 nike

在我的缩略图滚动条中,我有一个:<span id="tt" style="display:none;"></span>它由 jquery 淡入/淡出脚本驱动,我想将它放置在缩略图容器之外。span 标签的 css 是: span#tt {
position:absolute;
left:0;
top:0;
}

您可以查看缩略图滚动条here

最佳答案

如果我理解得很好,这些就可以完成工作。

#tt {
position:absolute;
left:0;
top: 0;
margin-top:-20px; /*added*/
}
.jThumbnailScroller{
position:relative;
width:800px;
height:260px; /*changed 255px set it if you change #tt margin-top value*/
margin:0;
padding:0;
overflow:hidden
}
.jThumbnailScroller#tS1{
position:relative;
width:100%;
margin-top:100px;
padding-top:20px
}

还编辑了您的提示脚本。它在闪烁如果你在图像上移动得更快,因为你的脚本试图在它完成淡出之前淡入它。

jQuery(document).ready(function(){    

var link = jQuery('.jTscroller a');

link.each(function(){
$(this).mouseenter(function(){
var imgtitle = $(this).find('img').data('title');
$('#tt').html(imgtitle);
$('#tt').fadeIn('slow');

$(this).mouseleave(function()
{
$('#tt').hide();
});
});
});
});

这是 jsfiddle http://jsfiddle.net/dsu9a/7/

不要忘记删除这些代码。这是为了更正 img 链接与 fiddle 中的实际链接。

jQuery(document).ready(function(){
var img = jQuery('.jTscroller a img');
img.each(function(){
var url = $(this).attr('src');
$(this).attr('src','http://outboxvision.com/test/'+url)
});
});

像这样更正您的 html。

<body>
<div id="tt"></div>
<!-- rest of the code -->

关于css - 缩略图滚动条标题淡入淡出位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8312813/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com