您的位置:首页 > Web前端 > JQuery

jquery 视觉特效(新闻滚动浏览)

2012-10-07 22:49 681 查看
效果描述:

让文本形式新闻,显示给访问站点的人看。让新闻在一个不可见窗口中往上滚动,当新闻全部滚动到上面消失之后,在窗口底部重新出现,并继续向上滚动。

HTML:

<div id="scroller">
<p>
据韩国《朝鲜日报》10月6日报道,美国国会在上月出版的一份报告中证实,美国在中日存在主权纠纷的钓鱼岛问题上,只承认日本的“行政权”,而非承认日本对其拥有“主权”。

  据报道,美国国会调查局(CRS)将1996年报告修改后,于上月末重新出版了一份题为《钓鱼岛纠纷:美国条约的义务》的报告。该报告显示,美国政府委托国会批准1972年与日本签署的《返还冲绳协议》时表示:“将钓鱼岛行政权转交给日本,并不意味着对该岛屿的主权主张有任何倾向。”也就是说,美国当时虽然将二战停战后负责管理的钓鱼岛返还给日本政府,但对于中日两国对钓鱼岛的主权主张持“中立态度”。

  针对美国国会提出的“《返还冲绳协议》是否会影响钓鱼岛主权”这一问题,美国时任国务卿威廉-罗杰斯当时也曾回答说:“对这些岛屿的法律地位(主权)没有任何影响。”

  另外,美国国务院代理法律顾问罗伯特-斯塔尔也曾表示:“美国不能扩大日本移交给我们(美国)之前它曾对钓鱼岛拥有的法律权利,现在将其返还,也不能缩小其他主张主权国家的权利。”报道说,这表明,美国不会对主权纠纷产生任何影响,且将对该问题保持距离。

  不过,这一报告也指出:“美国虽然在钓鱼岛主权问题上持中立态度,但《美日安保条约》的适用对象确实包括钓鱼岛。”因为《美日安保条约》规定其适用对象为“日本拥有行政权的地区”。 
</p>
</div>


css:

#scroller{
margin: auto;
width: 230px;
height: 240px;
border: 2px solid;
padding: 10px;
position: relative;
overflow: hidden;
}
#scroller p{
font-weight: bold;
position: relative;
}


jquery:

$(document).ready(function(){
var $scroller = $('#scroller p');
$scroller.css({top:0});
//    p的高度
p_height = $scroller.height();
//    整个p文本向上移动的高度需要多加上一些距离,才能让最后一行文字完全消失后再重新出现。这里我给了一个25
p_move_height=p_height+25;
var animator = function(imgblock){
imgblock.animate({
top:'-'+p_move_height
},
10000,
function(){
imgblock.css({
top:250
});
animator(imgblock);
}
);
}
animator($scroller);
});


上面的效果是使用jquery的animate()方法实现的。也可以使用css()方法实现。其代码如下:

$(document).ready(function(){
var $scroller = $('#scroller p');
var $wrapper = $('#scroller');
$scroller.css({top:0});
//    scroller的高度
s_height = $wrapper.height();
//    p的高度
p_height = $scroller.height();
//    设置初始向上滚动的距离
move_lines = 0;

scroll();
});

function scroll(){
//    每次改变move_lines的减2
move_lines -= 2;
//    使用css()向上移动move_lines距离
$('#scroller p').css({top:move_lines+'px'});
//    如果move_lines的小于负数的文本P的高度
if(move_lines<-1*p_height){
//        文本p从新返回窗口底部
move_lines = s_height;
}

setTimeout(scroll,50);
}


如果我现在想为上面的css()方法滚动的效果增加鼠标悬停功能呢?

实现代码如下:

$(document).ready(function(){
var $scroller = $('#scroller p');
var $wrapper = $('#scroller');
$scroller.css({top:0});
//    scroller的高度
s_height = $wrapper.height();
//    p的高度
p_height = $scroller.height();
//    设置初始向上滚动的距离
move_lines = 0;

//    设置滚动初始值为true
rolling = true;
$wrapper.hover(
function(){
rolling = false;
},function(){
rolling = true;
}
);
scroll();
});

function scroll(){
//    如果rolling为真。则每次改变move_lines的减2
move_lines -= rolling?2:0;
//    使用css()向上移动move_lines距离
$('#scroller p').css({top:move_lines+'px'});
//    如果move_lines的小于负数的文本P的高度
if(move_lines<-1*p_height){
//        文本p从新返回窗口底部
move_lines = s_height;
}

setTimeout(scroll,50);
}


最终效果,拷贝复制即可看到。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: