- 新建一个index.html页面，写入代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>数据轮滑效果</title> <script type = "text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script type = "text/javascript" src="../js/index.js"></script> <link rel="stylesheet" href="../css/index.css" /> </head> <body> <div id="scrollDiv"> <div> <div><a href='http://www.miiceic.org.cn/'>石家庄</a></div> <div><a href='http://www.ciitn.com/'>衡水</a></div> <div><a href="http://www.amboedu.com/">邯郸</a></div> </div> </div> </body> </html> - 在index.css中设置css样式
div,div { margin:0; padding:0 } #scrollDiv { width:300px; height:25px; line-height:25px; border:#ccc 1px solid; overflow:hidden } #scrollDiv div { height:25px; padding-left:10px; } - 在index.js中设置JS事件
function AutoScroll(obj){ $(obj).find("div:first").animate({ marginTop:"-25px" },500,function(){ $(this).css({marginTop:"0px"}).find("div:first").appendTo(this); }); } $(document).ready(function(){ setInterval('AutoScroll("#scrollDiv")',1000) });
chenyue1
- 浏览: 27018 次
- 性别:
- 来自: 石家庄
-
最新评论
-
好好学习-天天向上：
我来喽 月姐 写的真好 真清晰
JQuery设置数据滑动展示效果 -
zhangfortune：
安装的时候可以试一下安装brew，然后再用brew安装其他的软 ...
Git基本用法
相关推荐
jQuery图片自动滑动门效果是一种常见的网页动态展示技术，它利用jQuery库的高效特性实现图片的无缝切换，为用户带来流畅的视觉体验。在网页设计中，这种效果常用于制作图片展示、产品轮播或者幻灯片等组件，能够吸引...
【jQuery经典特效26】：jQuery动画背景滑动切换效果是一种常见的网页动态设计技术，它为网站增添视觉吸引力，使用户界面更具互动性。在网页设计中，背景滑动切换通常用于首页大图轮播、内容区背景变换等场景，为用户...
在网页设计中，jQuery 是一个广泛使用的 JavaScript 库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互...通过合理的设计和编程，可以创建出既美观又实用的图片滑动展示功能，适用于各种现代浏览器和移动设备。
在网页开发中，为了提升用户体验，我们经常需要引入各种交互式特效，其中坐标标尺滑动效果是一种常见的动态展示数据的方式。本篇将详细介绍如何利用jQuery库来实现这一效果，帮助开发者更好地理解和运用这一技术。 ...
"jQuery左右分页滑动"是指利用jQuery实现的一种页面内容切换方式，通常用于展示大量数据或者内容时，以左右滑动的形式进行分页，提升用户体验。这种效果常见于新闻网站、产品展示页面等，使得用户可以通过简单的手势...
在本文中，我们将深入探讨如何使用jQuery实现图片自动滑动门效果，这是一种常见的网页动态展示技术，常用于网站的轮播图或幻灯片展示。该效果通过CSS、JavaScript和HTML5的组合来创建，充分利用了jQuery库的强大功能...
jQuery扁平水平滑动Tab选项卡是利用jQuery库创建的一种效果，它不仅具有扁平化的设计风格，还支持键盘导航，为用户提供了一种流畅、直观的用户体验。 ### jQuery库介绍 jQuery是一个快速、简洁的JavaScript库，...
【jQuery滑动组合相册效果】是一种常见的网页交互设计，用于展示一组图片或内容，以动态、美观的方式吸引用户注意力。这种效果通过JavaScript库jQuery实现，它提供了丰富的DOM操作、事件处理和动画功能，使得创建...
本项目“jQuery选项卡标签滑动切换效果”旨在实现一个常见的用户界面功能，即选项卡式导航，其中各个标签页内容可以平滑地进行滑动切换。这种效果能提升用户体验，使得大量信息组织得更加有序且易于浏览。 首先，...
本教程将深入讲解如何使用jQuery创建一个内容滑动插件，实现slider图片内容滑动和选项卡切换的效果。这个压缩包包含了实现这一功能所需的全部代码。 首先，我们需要理解jQuery的选择器、事件和动画方法。jQuery的...
"jQuery滑动表单验证效果"是一个示例项目，旨在展示如何利用jQuery实现动态、互动的验证反馈，为用户带来更流畅的表单填写体验。 在这个项目中，"FancySlidingForm"可能是主要的HTML文件，包含了表单的结构和样式。...
通过CSS，这些元素的初始状态被设置为不可见，准备在jQuery事件触发时显示。 四、CSS 样式 `animated-menu.css`文件负责定义菜单的视觉样式，包括颜色、字体、边距、布局等。对于滑动效果，CSS的`transition`属性...
在树形滑动导航中，jQuery主要用于处理用户的点击事件，控制菜单项的显示和隐藏，以及实现平滑的动画过渡效果。 DirectoryTree插件是基于jQuery的一个专门用于创建树形结构的组件。它支持多种数据源，如JSON或HTML...
"jQuery产品线滑动展示"就是一个典型的应用，它利用JavaScript库jQuery的高效性能和丰富的API，实现了产品展示区域的动态滚动效果，使得用户能够更便捷地浏览和了解商品信息。本篇文章将深入探讨这一技术的实现原理...
标题中的“jquery滑动星星评分效果代码”是指在网页中实现一种交互式的用户评价系统，用户可以通过滑动鼠标选择星级来给出对某个产品或服务的评分。这种效果常见于电影评分、电商商品评价等场景，增加了用户体验的...
5. **数据绑定**：通过使用jQuery的数据绑定特性，可以将图片与选项卡关联起来，确保点击特定的选项卡时，能正确地显示对应的图片。 6. **HTML结构**：在HTML中，通常会有一个容器元素（如`div`）包含所有的选项卡...
7. **数据属性**：为了记录当前显示的图片索引，可以使用jQuery的数据特性`data-*`，将索引值存储在元素上。 8. **事件委托**：如果图片数量较多，使用事件委托可以提高性能。通过在父元素上绑定事件，然后在事件...
本文将深入探讨“jquery animated左右模块滑动切换分页显示代码”这一主题，这通常涉及到动态页面设计，用户体验优化以及前端开发中的交互效果。 标题“jquery animated左右模块滑动切换分页显示代码”揭示了我们要...
总的来说，"jQuery带跳转滑动分页插件"是一个功能强大且易于使用的工具，它结合了优雅的用户界面和实用的搜索跳转功能，为网页数据展示提供了高效且灵活的解决方案。通过熟练掌握并运用这款插件，开发者可以为他们的...
在这个特定的“jQuery swiper水平左右滑动时间轴特效”中，我们看到的是一个优雅的方式，用于展示内容，使得用户可以通过水平滑动或者使用箭头按钮在时间轴上浏览信息。 首先，我们要理解jQuery的基础。jQuery是一...