用Jquery实现滚动新闻


Posted in Javascript onFebruary 12, 2014

此文主要用Jquery实现滚动新闻,如此少的代码就能实现这个功能真的是不由得感叹Jquery的强大功能。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication244.Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
$(function () { 
var scrollTimer = null; 
var delay = 2000; 
//1.鼠标对新闻触发mouseout事件后每2s调用scrollNews() 
//2.鼠标对新闻触发mouseover事件后停止调用scrollNews() 
//3.初次加载页面触发鼠标对新闻的mouseout事件 
$('div.scrollNews').hover(function () { 
clearInterval(scrollTimer); 
}, function () { 
scrollTimer = setInterval(function () { 
scrollNews(); 
}, delay); 
}).triggerHandler('mouseout'); 
}); 
//滚动新闻 
function scrollNews() { 
var $news = $('div.scrollNews>ul'); 
var $lineHeight = $news.find('li:first').height(); 
$news.animate({ 'marginTop': -$lineHeight + 'px' }, 600, function () { 
$news.css({ margin: 0 }).find('li:first').appendTo($news); 
}); 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div class="scrollNews" > 
<ul> 
<li><a href="#" class="tooltip" title="1甜美宽松毛衣今秋一定红.">1甜美宽松毛衣今秋一定红.</a></li> 
<li><a href="#" class="tooltip" title="2秋装百搭小马甲不到50元.">2秋装百搭小马甲不到50元.</a></li> 
<li><a href="#" class="tooltip" title="3修身韩版小西装万人疯抢.">3修身韩版小西装万人疯抢.</a></li> 
<li><a href="#" class="tooltip" title="4夏末雪纺店主含泪大甩卖.">4夏末雪纺店主含泪大甩卖.</a></li> 
<li><a href="#" class="tooltip" title="5瑞丽都疯狂推荐的秋装.">5瑞丽都疯狂推荐的秋装.</a></li> 
<li><a href="#" class="tooltip" title="6元长款针织小开衫卖疯啦.">6元长款针织小开衫卖疯啦.</a></li> 
<li><a href="#" class="tooltip" title="7长袖雪纺衫单穿内搭都超美.">7长袖雪纺衫单穿内搭都超美.</a></li> 
</ul> 
</div> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 #Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 #Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 #Javascript
利用jquery写的左右轮播图特效
Feb 12 #Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 #Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 #Javascript
Javascript写入txt和读取txt文件示例
Feb 12 #Javascript
You might like
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python集合类型用法分析
2015/04/08 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
Python 中的 else详解
2016/04/23 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
Python补齐字符串长度的实例
2018/11/15 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
Python request使用方法及问题总结
2020/04/26 Python
8种常用的Python工具
2020/08/05 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
数控技术专科生自我评价
2014/01/08 职场文书
酒店前厅员工辞职信
2014/01/08 职场文书
《在家里》教后反思
2014/03/01 职场文书
工作会议主持词
2014/03/17 职场文书
人力资源职位说明书
2014/07/29 职场文书
代理人委托书
2014/08/01 职场文书
学生检讨书怎么写
2014/10/09 职场文书
教师节大会主持词
2015/07/06 职场文书