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

jquery

jquery选择器

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

身份认证购VIP最低享 7 折!

30元优惠券

本文主要介绍了如何使用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
资源: 946

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

新闻滚动效果--juqery实现

jQuery实现的淡入淡出与滑入滑出效果示例

jQuery实现基本淡入淡出效果的方法详解

jQuery卷轴实现动画淡入淡出

jquery 根据 淡入淡出显示隐藏 滑动 动画做一个小案例

jquery淡入淡出轮播图

jquery淡入淡出轮播图jquery DOM操作

使用jQuery完成按键点击实现图片或者块级元素的显示、隐藏、淡入、淡出以及半透明动画效果。

使用jQuery+html+css完成按键点击实现图片或者块级元素的显示、隐藏、淡入、淡出以及半透明动画效果。

jquery渐变示例

编写代码实现图片的上滑，下滑，淡出，淡入，隐藏，显示

web jquery动画操作

jquery中一个按钮如何实现四个动画

web网页怎么实现切换图片效果

单击第一个按钮，令图片先淡出，然后换成另外一张图片再淡入……实现a1.gif~a9.gif这九张图片依次交替显示的效果。单击第二个按钮，页面重新加载。

dw如何制作图片自动切换效果_dw DIV+CSS实现图片自动切换

JQuery 使用.show()和.hide()做的可爱动画

使用JQuery对于html页面进行重构和优化的代码

javascript网页设计300例

jquery轮播图实现简单代码

最新资源

jquery 根据淡入淡出显示隐藏滑动动画做一个小案例