jquery 视觉特效(新闻滚动浏览)
2012-10-07 22:49
681 查看
效果描述:
让文本形式新闻,显示给访问站点的人看。让新闻在一个不可见窗口中往上滚动,当新闻全部滚动到上面消失之后,在窗口底部重新出现,并继续向上滚动。
HTML:
css:
jquery:
上面的效果是使用jquery的animate()方法实现的。也可以使用css()方法实现。其代码如下:
如果我现在想为上面的css()方法滚动的效果增加鼠标悬停功能呢?
实现代码如下:
最终效果,拷贝复制即可看到。
让文本形式新闻,显示给访问站点的人看。让新闻在一个不可见窗口中往上滚动,当新闻全部滚动到上面消失之后,在窗口底部重新出现,并继续向上滚动。
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); }
最终效果,拷贝复制即可看到。
相关文章推荐
- jquery 视觉特效(点击图片,向左滚动消失,并从右侧出现)
- jQuery实现自动与手动切换的滚动新闻特效代码分享
- jquery 视觉特效(水平滚动图片)
- Jquery特效十:新闻纵向滚动、淡入淡出
- jQuery实现自动与手动切换的滚动新闻特效代码分享
- JQuery页面图片切换和新闻列表滚动效果的具体实现
- 基于jquery的滚动新闻列表
- 使用jQuery实现的简单滚动新闻功能
- JQuery幻灯片-视觉效果爆棚的全屏滚动相册
- 基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
- Android 特效库 - 视觉滚动
- jquery-scrollbox 图片滚动/新闻滚动/支持多行文本多个图片
- jquery之(新闻单条滚动)
- jquery实现新闻消息滚动
- jquery 通用滚动特效,文字单行,多行停留滚动,图文上下左右滚动
- jquery实现图片左右间隔滚动特效(可自动播放)
- jquery 滚动特效 向上滚动
- 强大的jQuery焦点图无缝滚动走马灯特效插件cxScroll
- 基于jquery的滚动新闻列表
- JQuery实现导航效果、新闻滚动、广告效果、横向滚动