用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 相关文章推荐
javascript 特殊字符串
Feb 25 Javascript
JS定时器实例
Apr 17 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
JS数组去重的6种方法完整实例
Dec 08 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 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
php实现的短网址算法分享
2014/06/20 PHP
yii的CURD操作实例详解
2014/12/04 PHP
详解PHP数组赋值方法
2015/11/07 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
Python3.6简单操作Mysql数据库
2017/09/12 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5新增加的功能详解
2016/09/05 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
网站编辑求职信
2013/10/17 职场文书
应届生幼儿园求职信
2013/11/12 职场文书
幼儿园家长评语
2014/02/10 职场文书
体育专业自荐书
2014/05/29 职场文书
护士年终考核评语
2014/12/31 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
领导新年致辞2016
2015/07/29 职场文书
实验室安全管理制度
2015/08/05 职场文书
九不准学习心得体会
2016/01/23 职场文书
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python