最近由于项目原因,学习了下jquery,实现了一个小小的功能,就是点击公告的上一条下一条来查看滚动条。具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="keywords" content=""><meta name="description" content="">
<title>test</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<style>
.banner_index { float:left; width:730px; height:239px; overflow:hidden; margin:5px 0 0 0;}
.banner_index_pic { width:730px; height:239px; overflow:hidden;}
</style>
</head>
<body scroll="yes">
<script type="text/javascript" src="jcarousellite_1.0.1.js"></script>
<div class="gg">
<li class="gg_btn">
<img src="pre_btn.jpg" border="0" id='gg_p' style="cursor: pointer;" title="上一条"/>
<img src="break_btn.jpg" border="0" id='gg_s' style="cursor: pointer;" title="暂停"/>
<img src="next_btn.jpg" border="0" id='gg_n' style="cursor: pointer;" title="下一条"/>
</li>
<li class="gg_info">
<a class="aa" style="cursor:hand" href="/notice/">
<b>网厅公告:</b></a>
<div id="dt_gg" style="display: none; float: left; width: 450px;">
<ul style="height:25px;overflow:hidden;">
<li style="width: 300px">
<a class="aa" href="/cms/web/default/new/notice/50514.shtml" title="关于调整全省固定电话本地电话网营业区间通话费上限标准的通知">
<span style="width:300px;">关于调整全省固定电话本地电话网</span>
</a>
<span style="width:100px;">[2010-06-24]</span>
</li>
<li style="width: 300px">
<a class="aa" href="/cms/web/default/new/notice/50515.shtml" title="中国电信机场/车站贵宾服务电子化认证公告">
<span style="width:300px;">中国电信机场/车站贵宾服务电子</span>
</a>
<span style="width:100px;">[2010-06-24]</span>
</li>
</ul>
</div>
</li>
</div>
<script type="text/javascript">
jQuery(function(){
jQuery('#dt_gg').css("display","block");
if(jQuery('#dt_gg').find('li').length>1){
jQuery('#dt_gg').jCarouselLite({
btnPrev:'#gg_n',
btnNext:'#gg_p',
btnAutoSwitch:'#gg_s',
visible: 1,
auto:5000,
speed:1000,
onMouse:true,
vertical:true
});
}else{
jQuery('#dt_gg').jCarouselLite({
visible: 1
});
}
});
jQuery(function(){
jQuery('#gg_s').click(function(){
if(jQuery(this).attr('src') == "/cms/web/images/V3/public/break_btn.jpg"){
jQuery(this).attr('src','/cms/web/images/V3/public/play_btn.jpg');
jQuery(this).attr('title','播放');
}else{
jQuery(this).attr('src','/cms/web/images/V3/public/break_btn.jpg');
jQuery(this).attr('title','暂停');
}
});
});
</script>
分享到:
相关推荐
通过上述知识点,我们可以用jQuery编写一个简洁有效的自动滚动循环滚动新闻展示效果。在实际应用中,可能还需要考虑更多的用户体验和浏览器兼容性问题,例如在不同分辨率的屏幕上展示效果的适配、触屏设备的手势操作...
### jQuery循环滚动新闻列表的技术实现 #### 1. 基础概念 - **jQuery**: jQuery是一个快速、小巧且功能丰富的JavaScript库。它通过减少HTML文档遍历、事件处理、动画和Ajax交互的代码量,简化了JavaScript编程。 ...
本篇文章将详细介绍jQuery循环滚动插件的原理、应用场景以及如何使用。 **1. 插件原理** jQuery循环滚动插件基于jQuery核心库,利用定时器(如`setInterval`)和DOM操作来实现元素的自动滚动效果。通常,它会改变...
"多行滚动jQuery循环新闻列表代码.rar" 这个标题指的是一个使用jQuery库实现的、能够展示多行新闻并进行循环滚动的代码示例。jQuery是一个广泛应用于网页开发的JavaScript库,它简化了DOM操作、事件处理、动画效果...
jQuery新闻循环滚动代码是网页开发中一种常见的动态效果,它利用JavaScript库jQuery和特定的插件,如jquery.newsTicker,来实现新闻标题或内容在页面上持续滚动展示,以吸引用户的注意力并提供丰富的信息传递方式。...
标题中的“jquery版文字水平方向无限循环滚动”指的是一个基于jQuery实现的JavaScript特效,它使得文字能够在水平方向上持续、不间断地循环滚动。这个技术在网页设计中常用于展示新闻标题、广告语或者滚动公告等,能...
《jQuery新闻列表文字循环滚动代码实现详解》 在网页设计中,动态效果是吸引用户注意力、提升用户体验的重要手段。jQuery,作为一个轻量级的JavaScript库,因其简洁的API和强大的功能,被广泛应用于网页交互效果的...
然后定义了一个`scrollNews`函数,使用`animate()`来移动新闻列表,当滚动到最右侧时,将第一个新闻项移动到列表末尾,重新设置位置,并再次调用`scrollNews`以形成循环滚动效果。 对于多行滚动,可以使用相似的...
**jQuery上下滚动插件**是一种常用的前端开发工具,主要用于实现网页元素(如`<li>`列表项)的平滑上下滚动效果。这种效果在展示新闻、公告或产品列表时非常常见,可以为用户带来动态浏览体验,提升网站的互动性和...
"jQuery新闻列表文字循环滚动代码" 是一种实现这种效果的技术方案,它能帮助开发者创建一个新闻列表,其中的文字会以循环滚动的方式展现,给用户带来动态的阅读体验。 jQuery 是一个流行的JavaScript库,它简化了...
在多行滚动新闻列表中,可能需要监听滚动到顶部或底部的事件,以便在达到边界时触发新的滚动动作。 4. **动画**:jQuery的`.animate()`方法可以创建自定义动画,用于控制新闻列表的滚动速度和方向。通过设置不同的...
无缝滚动效果通常是通过创建一个循环列表来实现的,这个列表包含所有需要滚动的元素。当用户滚动到列表的末尾时,列表会立即返回到开头,从而实现“无缝”过渡。这种效果在图片轮播、新闻滚动等场景中尤为常见。 三...
**jQuery 无缝滚动**是一种网页元素滚动效果,它允许页面中的内容如图片、文本或列表在用户界面上平滑地连续滚动,而无需停顿或加载新的页面。这种技术广泛应用于新闻滚动、产品展示和幻灯片等场景,极大地提升了...
本文将详细介绍如何使用 jQuery 实现一个无缝向上循环滚动列表的特效。 首先,我们来看一下 HTML 结构。列表由两个主要的 div 容器组成:`.slide-title` 和 `.slide-container`。`.slide-title` 用于展示标题,而 `...
**jQuery无缝滚动**,也称为无限滚动或自动轮播,是一种网页设计中常见的效果,用于在有限的空间内展示大量的内容,如新闻、图片或产品列表。这种效果通过使用JavaScript库jQuery来实现,使得内容能够在用户的视线中...
【标题】"jQuery竖向的图文列表无缝循环滚动特效类似微博文字滚动"涉及的核心技术是JavaScript库jQuery,以及实现动态滚动效果的编程技巧。在网页设计中,这种特效可以为用户提供更加生动、吸引人的信息展示方式,...
标题中的“jquery实现的向上无缝循环滚动的新闻效果”指的是使用JavaScript库jQuery创建的一种常见的网页动态展示技术。这种效果常用于新闻网站或者信息更新频繁的页面,它可以让新闻标题或内容在页面上自上而下不...
无缝循环滚动插件是一种网页动态效果技术,常用于展示新闻、产品列表或轮播图等,为用户提供连续不间断的浏览体验。基于jQuery实现的此类插件利用了jQuery库的强大功能和简洁API,使得开发者能够轻松地创建出平滑、...
这是一款可以使任何图片列表进行水平和垂直滚动的jQuery插件。该jquery列表滚动插件可以使用任何列表、任何尺寸和任何内容。它可以设置水平和垂直滚动,自动滚动和无限循环滚动,非常适用于滚动新闻的制作。