jQuery 实现新闻滚动与淡入淡出效果教程

50 浏览量更新于2024-08-31 收藏 103KB PDF 举报

本文主要介绍了如何使用jQuery库来实现新闻播报的滚动和淡入淡出效果。在HTML结构上，文章以一个简单的示例为基础，展示了如何构建一个滚动新闻列表，配合上鼠标操作（如上下翻页）以及元素的淡入淡出动画。以下是关键知识点的详细解析： 1. **HTML结构**：使用了XHTML1.0 Transitional文档类型声明，定义了`<html>`、`<head>`和`<body>`元素。页面的元数据中设置了UTF-8字符编码，`<title>`标签设置了网页标题，样式部分使用CSS定义了基本的字体颜色和布局。 2. **CSS样式**： - `body`设置了全局样式，包括字体颜色和大小。 - `.scrollbox`是一个居中的容器，宽度固定，具有边框和内边距，用于包含滚动内容。 - `#scrollDiv` 是滚动区域，设置了固定的宽度和高度，隐藏溢出内容，并且为下拉项添加了最大高度。 - `#scrollDiv li` 是滚动条的列表项，每个项有预定义的样式，如背景图片、内边距、最大高度和下划线底部边框。 - `#scrollDiv li h3` 是标题元素，设置了字体大小、颜色和行高，以及鼠标悬停时的样式。 3. **jQuery功能实现**： - 利用jQuery的选择器来控制滚动效果，可能涉及到`hover()`事件监听，使标题在鼠标悬停时改变颜色。 - 利用了`.fadeIn()`和`.fadeOut()`方法来实现新闻项目的淡入淡出效果，这有助于增加交互性和视觉吸引力。 - 可能还包含`scrollTop()`和`scrollLeft()`方法，用于处理滚动操作，比如点击按钮时使对应的新闻项目滚动到视口。 4. **滚动与翻页**：页面设计中可能包含了两个或更多的滚动按钮，通过JavaScript事件处理程序，当用户点击这些按钮时，会触发滚动事件，使得相应的新闻项淡入显示，同时使其前一个或后一个项目淡出，从而模拟滚动效果。总结，本篇文章通过具体的代码实例，教会读者如何使用jQuery来打造动态的新闻播报系统，结合CSS样式和JavaScript交互，实现了新闻的自动滚动和淡入淡出展示，提高了用户体验。这对于想要在网站中添加动态新闻效果的开发者来说，是一份实用的教程。

jQuery实现新闻播报滚动及淡入淡出效果示例实现新闻播报滚动及淡入淡出效果示例

本文实例讲述了jQuery实现新闻播报滚动及淡入淡出效果。分享给大家供大家参考，具体如下：

下面是上下滚动源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>www.jb51.net 向上滚动代码带上下翻按钮滚动特效</title>

body{ color:#333; font-size:13px;}

h3,ul,li{margin:0;padding:0; list-style:none;}

.scrollbox{ width: 340px; margin: 0 auto; overflow: hidden; border: 1px solid #CFCFCF; padding: 10px; }

#scrollDiv{width:340px;height:359px; overflow:hidden;}/*这里的高度和超出隐藏是必须的*/

#scrollDiv li{max-height:90px; width:300px; padding:0 20px;background:url(ico-4.gif) no-repeat 10px 23px; overflow:hidden; vertical-align:bottom;

zoom:1; border-bottom:#B7B7B7 dashed 1px;}

#scrollDiv li h3{ height:24px; padding-top:13px; font-size:14px; color:#353535; line-height:24px; width:300px;}

#scrollDiv li h3 a{color:#353535; text-decoration:none}#scrollDiv li h3 a:hover{ color:#F00}

#scrollDiv li div{ height:36px; width:300px; color:#416A7F; line-height:18px; overflow:hidden}

#scrollDiv li div a{ color:#416A7F; text-decoration:none}

.scroltit{ height:26px; line-height:26px; padding-bottom:4px; margin-bottom:4px;}

.scroltit h3{ width:100px; float:left;}

.scroltit .updown{float:right; width:32px; height:22px; margin-left:4px}

#but_up{ background:url(up.gif) no-repeat 0 0; text-indent:-9999px}

#but_down{ background:url(down.gif) no-repeat 0 0; text-indent:-9999px}

#n{margin:10px auto; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;}

#n a{ padding:0 4px; color:#333}

.test{

margin-top: 50px;

background: #CCCCCC;

border: .5px solid #ddd;

overflow: hidden;

height: 44px;

width: 100px;

}

.test li{

height: 44px;

width: 100%;

float: left;

line-height: 44px;

font-size: 18px;

border-top: .5px solid #ddd;

}

</style>

$(document).ready(function(){

$("#scrollDiv").Scroll({line:1,speed:500,timer:2000,up:"but_up",down:"but_down"});

(function(){

var lineH = $(".test").find("li:first").height();

var appendTo = function(){

$(".test").find("li:first").appendTo($(".test"));

$(".test ul").css("marginTop", 0);

};

var animate = function(){

$(".test ul").eq(0).animate({

marginTop: -lineH

},500,appendTo)

};

var delayer = setInterval(animate, 2000);

})()

});

</script>

</head>

<body>

<p align="center"><strong>特效效果如下：</strong></p>

<ul>

<li><h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="linktit">移

动娱乐业务突飞</a></h3></li>

<li><h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="linktit">不

停转动向上滚动可控制向上向下滚动特效</a></h3> <div>DIV CSS JS自动不断向上一个一个滚动可控制向上向下滚动特效... </div></li>

<li><h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="linktit">全

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38589314

粉丝: 7
资源: 945

jQuery 实现新闻滚动与淡入淡出效果教程

使用jQuery创建首页图片轮播淡入淡出效果

原生与jQuery：实现动态轮播的淡入淡出技巧

实现启动画面淡入淡出效果的简易方法

jquery实现通用版鼠标经过淡入淡出效果

jQuery实现的淡入淡出图片轮播效果示例

基于jQuery实现最基本的淡入淡出效果实例

jquery插件tooltipv顶部淡入淡出效果使用示例

jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例

基于jquery实现的文字淡入淡出效果

jQuery实现首页图片淡入淡出效果的方法

最新资源