我有可滚动div中的拇指列表,使用next/prev按钮进行动画处理.每次单击"下一步"按钮都应与第一个可见元素的属性匹配.每次单击"上一步"按钮都应该给我最后一个可见元素的属性.
我真的不知道如何在数学上解决这个问题,因为滚动距离在列表结束时是可变的.有人可以帮帮我吗？
HTML
$<div id="scrollContent">
<ul id="assetList">
<li data-asset-id="15201"></li>
<li data-asset-id="15202"></li>
<li data-asset-id="15203"></li>
...
</ul>
</div>
<a class="next" href="#">next</a>
<a class="prev" href="#">prev</a>
jQuery的
$('a.next').click(function() {
var scrollheight = $("#scrollContent").scrollTop();
$("#scrollContent").animate({scrollTop:scrollheight+375},500,function() {
// get "data-asset-id" of first visible element in viewport
});
});
$('a.prev').click(function() {
var scrollheight = $("#scrollContent").scrollTop();
$("#scrollContent").animate({scrollTop:scrollheight-375},500,function() {
// get "data-asset-id" of last visible element in viewport
});
});
看看小提琴:http: //jsfiddle.net/desCodLov/77xjD/10/
谢谢.
我试着让文章的链接在整个文章空间中都可以点击.
首先,我做了悬停的事情,在鼠标悬停时改变颜色等等......然后点击它应该触发链接,但这会产生"过多的递归".
我认为这是一个event bubbling问题.我试图与工作event.cancelBubble = true;或stopPropagation()没有运气.更糟糕的运气!
任何人？
$("div.boxContent").each(function() {
if ($(this).find(".btn").length) {
var $fade = $(this).find("div.btn a > span.hover");
var $title = $(this).find("h1, h2, h3, h4, h5");
var $span = $(this).find("span").not("span.hover");
var $text = $(this).find("p");
var titleColor = $title.css('color');
var spanColor = $span.css('color');
$(this).css({'cursor':'pointer'}).bind({
mouseenter:function() {
$text.stop().animate({color:linkHover},textAnim);
$title.stop().animate({color:linkHover},textAnim);
$span.stop().animate({color:linkHover},textAnim);
$fade.stop(true,true).fadeIn(textAnim);
}, mouseleave:function() {
$text.stop().animate({color:linkColor},textAnim);
$title.stop().animate({color:titleColor},textAnim);
$span.stop().animate({color:spanColor},textAnim);
$fade.stop(true,true).fadeOut(textAnim);
}, focusin:function() {
$text.stop().animate({color:linkHover},textAnim);
$title.stop().animate({color:linkHover},textAnim);
$span.stop().animate({color:linkHover},textAnim);
$fade.stop(true,true).fadeIn(textAnim);
}, focusout:function() {
$text.stop().animate({color:linkColor},textAnim);
$title.stop().animate({color:titleColor},textAnim);
$span.stop().animate({color:spanColor},textAnim);
$fade.stop(true,true).fadeOut(textAnim);
}
}).click(function() { …到目前为止这是我的代码:
$("h1.intro:contains('|')").each(function() {
$(this).html($(this).html().replace('|','</span><br /><span>'))
});
这只能工作一次,但它必须适用于所有这些"|"......
有任何想法吗？
应该在加载和调整大小时触发这两个函数.我想知道如何写它更紧凑和美丽.有任何想法吗？
$(document).ready(function() {
fullScreen();
footer();
$(window).resize(function() {
fullScreen();
footer();
});
});
jquery中的这些行使我变坏:
var selectBoxContainer = $('<div>',{width: select.outerWidth(), className:'styledSelect', html:'<div class="selectBox"></div>'});
var dropDown = $('<ul>',{className:'dropDown'});
它应该在输出中设置类属性"class ="styledselect",但属性的名称是"classname":
<div classname="styledSelect">
<ul classname="dropDown" style="display: none;">...</ul>
</div>
当我改变它只是为了{class:'dropDown'}在Firefox中工作,但在其他浏览器中没有.
请帮忙...
我有一些奇怪的元素.
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
我想知道如何在jQuery中为它们提供一个带编号的类,从中间元素开始计算,如下所示:
<div class="line no2"></div>
<div class="line no1"></div>
<div class="line no0"></div>
<div class="line no1"></div>
<div class="line no2"></div>
任何人？
编辑:
之前,我会检查元素的数量.如果数量是偶数值,我将添加一个添加元素以具有奇数个元素.
我想提供一个圆形文本形状,就像这个例子(见曲线).线的数量并不重要,因为中间的线<div class="line no0"></div>将是圆的垂直中心.
当一个对象出现在带有滚动的视口中时,jquery waypoints会触发一个回调.这适用于基本实现.
现在我尝试给同一个'article'标签提供两个航点,一个是当前<article />出现的,另一个<article />是从顶部可见121px :( offset: 121向下滚动页面).
// waypoint 1
$.aquaverde.article.waypoint(function(event, direction) {
currentIndex = $(this).index();
if (direction === "down") {
$.aquaverde.wrapper.find('.fixed:eq('+ currentIndex +')').show().siblings(".fixed").hide();
}
});
// waypoint 2
$.aquaverde.article.find('.page').waypoint(function(event, direction) {
if (direction === "down") {
$.aquaverde.wrapper.find(".fixed").hide();
}
},{
offset: 121
});
不幸的是,当对象从顶部121px时,插件会触发两个回调,因此,第二个配置占据主导地位.
好的,然后我试着做一个链式电话:
// waypoint 1
$.aquaverde.article.waypoint(function(event, direction) {
currentIndex = $(this).index();
if (direction === "down") {
$.aquaverde.wrapper.find('.fixed:eq('+ currentIndex +')').show().siblings(".fixed").hide();
// waypoint 2
$(this).waypoint(function(event, direction) {
$.aquaverde.wrapper.find(".fixed").hide();
},{
offset: 121
});
} …这是HTML输出:
<ul class="slides row">
<li id="t64" class="span3"></li>
<li id="t65" class="span3"></li>
<li id="t67" class="span3"></li>
<li class="detailView desktopView"></li>
<li id="t66" class="span3"></li>
<li id="t68" class="span3"></li>
<li class="detailView desktopView"></li>
<li class="detailView mobileView"></li>
</ul>
我正在尝试.span3仅使用类名选择第n个元素.所以我尝试了这个:
var targetSlide = 3;
$(".slides").children('.span3:eq('+ targetSlide +')').addClass('on');
要么
var targetSlide = 4;
$(".slides").children('.span3:nth-child('+ targetSlide +')').addClass('on');
在这两种情况下都.detailView被选中.有任何想法吗？