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

使用jQuery实现的简单滚动新闻功能

2011-06-23 16:03 525 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>asd</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var index=0;//位置
var isAuto=true;//是否自动
var isScroll=false;//是否正在滚动
jQuery(function(){
add();
var PhotoTimer = setInterval("AutoScroll()",1500);
jQuery(".btn1").click(function(){
index=index+380>=1900?1900:index+380;
scrollNews(index);
});
jQuery(".btn2").click(function(){
index=index-380<=0?0:index-380;
scrollNews(index);
});
});
var next = true;//是否往前滚动
function AutoScroll(){
if(isAuto&&isScroll==false){
if(next){
index+=380;
next=index>=1900?false:true;
}else{
index-=380;
next=index<=0?true:false;
}
scrollNews(index);
}
}
function scrollNews(index){
isScroll = true;
jQuery('#box').stop(true,true).
animate({scrollLeft: index}, 800, '',function(){isScroll = false;});
}function add(){
jQuery(".newsPanel").append('<div class="news" onmouseover="isAuto=false;" '
+'onmouseout="isAuto=true;"><a href="#" mce_href="#">'
+'1央讯：胡锦涛访问乌克兰 会见亚努科维奇总统</a><span>06-11</span></div>');
jQuery(".newsPanel").append('<div class="news" onmouseover="isAuto=false;" '
+'onmouseout="isAuto=true;"><a href="#" mce_href="#">'
+'2央讯：胡锦涛访问乌克兰 会见亚努科维奇总统</a><span>06-12</span></div>');
jQuery(".newsPanel").append('<div class="news" onmouseover="isAuto=false;" '
+'onmouseout="isAuto=true;"><a href="#" mce_href="#">'
+'3央讯：胡锦涛访问乌克兰 会见亚努科维奇总统</a><span>06-13</span></div>');
jQuery(".newsPanel").append('<div class="news" onmouseover="isAuto=false;" '
+'onmouseout="isAuto=true;"><a href="#" mce_href="#">'
+'4央讯：胡锦涛访问乌克兰 会见亚努科维奇总统</a><span>06-14</span></div>');
jQuery(".newsPanel").append('<div class="news" onmouseover="isAuto=false;" '
+'onmouseout="isAuto=true;"><a href="#" mce_href="#">'
+'5央讯：胡锦涛访问乌克兰 会见亚努科维奇总统</a><span>06-15</span></div>');
jQuery(".newsPanel").append('<div class="news" onmouseover="isAuto=false;" '
+'onmouseout="isAuto=true;"><a href="#" mce_href="#">'
+'6央讯：胡锦涛访问乌克兰 会见亚努科维奇总统</a><span>06-16</span></div>');}
</script>
<style>
<!--
.box {
width: 380px;
height: 30px;
overflow: hidden;
line-height: 30px
}

.newsPanel {
width: 2400px;
line-height: 30px
}

.news {
height: 26px;
width: 376px;
margin: 2px;
float: left;
}
-->
</style>
</head>
<body>
<div id="box" class="box">
<div class="newsPanel"></div>
</div>
<button class="btn1" onmouseover="isAuto=false;"
onmouseout="isAuto=true;">next</button>
<button class="btn2" onmouseover="isAuto=false;"
onmouseout="isAuto=true;">pre</button>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航