Jquery设置标题的自动翻转
2023-06-13 09:14:13 时间
即一条新闻滚进视图之后,会暂停几秒钟,然后继续向上2滚动,淡出视图,同时,下一条新闻接着滚入视图。这次主要是用jquery来开发这个功能,里面肯定有许多不足之处,欢迎大家点评。
先粘贴一下代码,
复制代码代码如下:
先粘贴一下代码,
<style>
<%--#news-feed
{
padding:0;
margin:00010px;
position:relative;
height:200px;
width:17em;
overflow:hidden;
}
.headline
{
position:absolute;
height:200px;
top:210px;
overflow:hidden;
}--%>
</style>
<scripttype="text/javascript">
$(document).ready(function(){
$("#news-feed").each(function(){
var$container=$(this);
$container.empty();
$.get("feed.xml",function(data){
$("rssitem",data).each(function(){
var$link=$("<a></a>")
.attr("href",$("link",this).text())
.text($("title",this).text());
var$headline=$("<h4></h4>").append($link);
varpubDate=newDate($("pubDate",this).text());
varpubMonth=pubDate.getMonth()+1;
varpubDay=pubDate.getDate();
varpubYear=pubDate.getFullYear();
var$publication=$("<div></div>")
.addClass("publication-date")
.text(pubMonth+"/"+pubDay+"/"+pubYear);
var$summary=$("<div></div>")
.addClass("summary")
.html($("description",this).text());
$("<div></div>")
.addClass("headline")
.append($headline,$publication)
.appendTo($container);
});
varcurrentHeadline=0,oldHeadline=0;
varhiddenPosition=$container.height()+10;
$("div.headline").eq(currentHeadline).css("top",0);
varheadlineCount=$("div.headline").length;
varpause;
varheadlineRotate=function(){
currentHeadline=(oldHeadline+1)%headlineCount;
$("div.headline").eq(oldHeadline).animate(
{top:-hiddenPosition},"slow",function(){
$(this).css("top",hiddenPosition);
});
$("div.headline").eq(currentHeadline).animate(
{top:0},"slow",function(){
pause=setTimeout(headlineRotate,4000);
});
oldHeadline=currentHeadline;
};
pause=setTimeout(headlineRotate,4000);
$container.hover(function(){
clearTimeout(pause);
},function(){
pause=setTimeout(headlineRotate,3000);
});
});
});
});
</script>
</head>
<body>
<formid="form1"runat="server">
<divid="sidebar">
<h3>RecentNews</h3>
<divid="news-feed">
<ahref="###">NewsReleases</a>
</div>
</div>
</form>
</body>
我们来庖丁解牛一下这些代码,首先来看样式,因为我们一次只显示一条新闻记录,所以,我们应该把高度也设为一条记录的,在这里设为200px,而且如果超了的话,我们就自动隐藏起来overflow=hidden。在这里,数据源我们用的是feed.xml,Jquery加载并读取xml文件是很简单的,可以参考上面的写法,通过读取xml文件,取出数据,进行组装,就得到了要显示的html代码段并附加到#container中,同时,在滚动显示中,我们需要设置两个变量,一个用于记录当前可见的标题,另一个用于记录刚刚滚动出视图的标题。并且让当前的记录显示在最上方,一定要注意的是,位置不能为static。最后,就是写一个函数,每次自动调用记录的显示。jquery还有很多的插件,可以更加简化这些操作,以后多学习了。如果想学习jquery,个人推荐jquery基础教程,jonathanchaffer编写的,很不错,很适合初学者,国内其他的人写的,里面就鱼龙混杂了。
相关文章
- js自动生成二维码_jquery 生成二维码无法识别
- jQuery 替换元素中class的方法
- jQuery 实现富文本的标题自动生成目录
- jquery 滚动到底部时自动加载更多详解编程语言
- jQuery图片切换插件jquery.cycle.js详解编程语言
- 使用jQuery进行DOM操作详解编程语言
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js详解编程语言
- jQuery标题的自动翻转实现代码
- jQuery遍历json数组的实现代码
- jquery多行滚动代码(附详细解释)
- 基于Jquery的文字自动截取(提供源代码)
- 精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
- 基于JQuery的一句话搞定手风琴菜单
- jquery简单瀑布流实现原理及ie8下测试代码
- jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
- jquery获得页面元素的坐标值实现思路及代码
- PHP+jQuery实现自动补全功能源码
- jQuery实现类似淘宝购物车全选状态示例
- 实用的Jquery选项卡TAB示例代码
- Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
- jquery的父子兄弟节点查找示例代码
- 浅析jquery的js图表组件highcharts
- 通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
- JQuery弹出层示例可自定义
- JQuery遍历json数组的3种方法
- jquery中each方法示例和常用选择器
- Jquery实现图片预加载与延时加载的方法
- jQuery实现列表自动滚动循环滚动展示新闻