- 新建一个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
- 浏览: 26347 次
- 性别:
- 来自: 石家庄
-
最新评论
-
好好学习-天天向上：
我来喽 月姐 写的真好 真清晰
JQuery设置数据滑动展示效果 -
zhangfortune：
安装的时候可以试一下安装brew，然后再用brew安装其他的软 ...
Git基本用法
相关推荐
4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. ...
4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...
4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...
Jquery实现手机端上拉滚动加载更多数据功能手指滑动，完美实现多数据分布加载效果。数据再多页面流畅展示。
Jquery实现手机端上拉滚动加载更多数据功能手指滑动，完美实现多数据分布加载效果。数据再多页面流畅展示。
* septalLine even, 单行样式背景 隔行背景变色显示数据 效果 odd 双行样式背景 * glide tableStyle, table样式 table滑动样式 效果 hoverStrle, 鼠标滑动上来样式 checkStyle 鼠标...
4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...
59.jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60.jQuery鼠标移上小图显示大缩略图功能 61.js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62.Supersized jQuery全屏...
10.3 创建对话框显示效果 10.4 从外部文件中加载页面内容 10.5 为页面添加转场效果 10.6 设置全局默认的转场效果 10.7 定制显示回退按钮 10.8 在标题栏中添加导航栏 10.9 在页脚区域添加导航栏 10.10 添加可折叠的...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用，以及各种常用的jQuery插件的使用方法和技巧...
jQuery表格导出数据 jQuery表格导入Excel文件 jQuery表格拖动排序插件TableDnD jQuery常用网站商品分类筛选功能 jquery-弹出表单录入商品信息 jQuery弹出层插件popupWindow.js jQuery调色板变换背景 jQuery调用百度...
(6) 保存数据到服务器，成功时显示信息。 $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } }); 编辑本段渐入淡出...
根据左侧时间线选择相应年份，右侧显示对应年份下的数据信息。左侧年份可以支持鼠标按准上下滑动选择。支持swiper，模拟tab切换展示不同内容。是一个很方便的用jquery实现的tab切换的效果。左侧以及右侧内容可根据...
关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。 jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。 选择器允许您对 HTML 元素组或单个元素进行操作。 在 ...
4.10 综合案例分析—删除数据时的提示效果在项目中的应用 4.10.1 需求分析 4.10.2 效果界面 4.10.3 功能实现 4.10.4 代码分析 4.11 本章小结 第5章 jquery的动画与特效 5.1 显示与隐藏 5.1.1 show...
60 3.16 创建“返回顶部”链接 63 3.17 提供“更多……”链接 64 3.18 以动画效果显示文本 67 3.19 以滑动效果来替换文本 70 3.20 使图像滚动 71 3.21 确定被按下的键 75 3.22 防止事件冒泡 77 3.23 链接多个活动 80...
jQ向上滑动提示表单是一款基于jquery实现的提示信息向上滑动显示的表单效果，表单内的文本框默认显示提示信息，文本框获得焦点时，提示信息向上滑动显示，方便用户数据，效果非常不错。
jQuery UI更新日志：窗口小部件修正：内存泄漏和瞬态元素管理类（＃15043，89af4c2）的糟糕表现修正：实例（）应返回未定义的空集（＃15019，3dd8a09）交互拖拽效果修正：在鼠标按下不正确的焦点处理（＃15046，8c...
课程内容探索如何编写jQuery基础知识如何选择元素并应用操作了解有关应用样式和类的信息向元素（如隐藏和显示）添加效果使网页栩栩如生，并具有动画和效果（如滑动和淡入淡出）创建与您的交互使用事件侦听器（例如...