Javascript 将段落与旋转图像一起设置动画
基本上有4个图像从页面上滚动下来。现在,当用户单击该链接时,该链接将滚动关闭。但我想添加一个额外的动画,其中一个段落(“.image\u text p”)也出现在页面上,然后当单击另一个链接时,该文本与图像的其余部分一起滚动。除了段落部分的动画外,其他一切都正常工作 问题是:Javascript 将段落与旋转图像一起设置动画,javascript,jquery,animation,rotation,opacity,Javascript,Jquery,Animation,Rotation,Opacity,基本上有4个图像从页面上滚动下来。现在,当用户单击该链接时,该链接将滚动关闭。但我想添加一个额外的动画,其中一个段落(“.image\u text p”)也出现在页面上,然后当单击另一个链接时,该文本与图像的其余部分一起滚动。除了段落部分的动画外,其他一切都正常工作 问题是: 文本被挤在一起(有四个段落,它们相互重叠) 当我点击时——它甚至没有时间让它褪色——敌人会在它褪色之前从页面上掉下来 第一次加载页面时,第一个段落根本不会出现——单击按钮时,所有段落都会出现。这应该是第一段出现在页面加载上
$(function() {
$('#slideshow').crossSlide({
sleep: 2,
fade: 1
}, [
{ src: '../images/img1.png' },
{ src: '../images/img2.png' },
{ src: '../images/img3.png' },
{ src: '../images/img4.png' }
])
$(".paging").show();
$(".paging a:first").addClass("active");
$(".image_text p:first").addClass("active");
//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging and Slider Function
rotate = function(){
$activep = $('.image_text p:first');
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$(".image_text p").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
$activep.addClass('active');
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
$(".image_text p").animate({
opacity: .99,
left: -image_reelPosition
}, 500 );
};
//Rotation and Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
$active = $('.paging a.active').next(); //Move to the next paging
$activep = $('.image_text p').next(); //Move to the next paging
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (7 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation timer
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation timer
return false; //Prevent browser jump to link anchor
});
});
段落CSS:
.image_text p {
text-align: right;
width: 500px;
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
可以看出,文本未显示的原因是不透明度从0开始。但这是有意的,因为它应该淡入。然而,它似乎并没有淡入,而是只有在点击链接时才可见,这时它就会从页面上滚动下来 解决方案是指定p标记和容器宽度的倍数,然后使用css声明
overflow:hidden
指定容器,该声明隐藏除当前标记之外的所有p标记。此外,p标记必须向左浮动,以使其内联:
.window {
margin-top: 20px;
height:286px;
width: 655px;
overflow: hidden;
position: relative;
}
.image_text {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.image_text p {
float: left;
margin-left: 10em;
}
如果我是你,我会让问题保持原样(或重新措辞),然后在解决方案中添加答案,然后在服务器允许的情况下尽快接受我自己的答案。顺便说一句,你可以回答自己的问题。事实上,有一个徽章可以让你以至少3(?)的得票率回答自己的问题。是的,这叫做自学: