HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 实例代码 查看内容

jQuery模拟百度新闻不间断滚动效果

2013-1-11 17:37| 发布者: html5cn| 查看: 12645| 评论: 1|来自: cnblogs

摘要: jQuery.roll 是模拟百度新闻不间断滚动效果,并支持文字、图片水平垂直滚动,该函数使用方法

一、jQuery.roll 插件使用说明


jQuery.roll 是模拟百度新闻不间断滚动效果,并支持文字、图片水平垂直滚动,该函数使用方法为:


/*
 * @作者 华子yjh http://www.cnblogs.com/yangjunhua/
 * @source 博客园
 * @module jQuery roll
 * @param: contentCls 内容容器className
 * @param: contentParentId 内容容器父元素节点ID
 * @param: configs 配置参数
 * 
 * @config: effect 滚动效果
 * @config: duration 滚动1个像素的运行时间(毫秒数)
 * @config: delay 开始滚动的延迟时间(毫秒数)
 *
 */

jQuery.roll(contentCls, contentParentId, configs); 

二、函数源码


 1 jQuery.extend({
 2     roll: function(contentCls, contentParentId, configs){
 3 
 4         var setTimeID, totalWidth = 0, totalHeight = 0,
 5             firstContent, secondContent, contents;
 6 
 7         (function(){
 8             var singleContent, cloneContent, nodeList;
 9 
10             singleContent = $(contentCls, contentParentId);
11             nodeList = singleContent.children();
12 
13             if (configs.effect === 'scrollX') {
14                 $.each(nodeList, function(idx, itm) {
15                     totalWidth += $(itm).outerWidth(true);
16                 });
17                 singleContent.css({ 'width': totalWidth + 'px' });
18             }
19             else if (configs.effect === 'scrollY') {
20                 $.each(nodeList, function(idx, itm) {
21                     totalHeight += $(itm).outerHeight(true);
22                 });
23                 singleContent.css({ 'height': totalHeight + 'px' });
24             }
25 
26             cloneContent = singleContent.clone();
27             cloneContent.appendTo(contentParentId);
28 
29             contents = $(contentCls, contentParentId);
30             firstContent = contents[0];
31             secondContent = contents[1];
32             
33             if (configs.effect === 'scrollX') {
34                 $(firstContent).css({ 'left': 0 });
35                 $(secondContent).css({ 'left': totalWidth + 'px' });
36             }
37             else if (configs.effect === 'scrollY') {
38                 $(firstContent).css({ 'top': 0 });
39                 $(secondContent).css({ 'top': totalHeight + 'px' });
40             }
41 
42         })()
43         
44         function cssAnimate(){
45             if (configs.effect === 'scrollX') {
46                 $(firstContent).css({ left: parseInt(firstContent.style.left, 10) - 1 + 'px' });
47                 $(secondContent).css({ left: parseInt(secondContent.style.left, 10) - 1 + 'px' });
48             
49                 $.each(contents, function(idx, itm) {
50                     if (parseInt(itm.style.left,10) === -totalWidth) {
51                         $(itm).css({ left: totalWidth + 'px' });
52                     }
53                 });
54             }
55             else if (configs.effect === 'scrollY') {
56                 $(firstContent).css({ top: parseInt(firstContent.style.top, 10) - 1 + 'px' });
57                 $(secondContent).css({ top: parseInt(secondContent.style.top, 10) - 1 + 'px' });
58             
59                 $.each(contents, function(idx, itm) {
60                     if (parseInt(itm.style.top,10) === -totalHeight) {
61                         $(itm).css({ top: totalHeight + 'px' });
62                     }
63                 });
64             }
65 
66             setTimeId = setTimeout(cssAnimate, configs.duration);
67         }
68         
69         function rollRun(){
70             setTimeId = setTimeout(cssAnimate, configs.delay);
71             return jQuery;
72         }
73         
74         function rollStop(){
75             clearTimeout(setTimeId);
76             return jQuery;
77         }
78 
79         return $.extend({
80             rollRun: rollRun,
81             rollStop: rollStop
82         });
83     }    
84 });

三:完整demo源码


例3.1


DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="description" content="jQuery实现无间隙滚动效果">
<title>jQuery demotitle>
<style>
body {
    font: 12px/1.5 tahoma,"microsoft yahei","微软雅黑E\8F6F\96C5\9ED1";
}
body, div, ul, li, h1 {
    margin: 0;
    padding: 0;
}
.news {
    margin: 100px 0 0 100px;
}
.news ul {
    list-style: none;
}
.news-box {
    width: 600px;
    margin-left: 20px;
    height: 24px;
    background-color: #fcfcfd;
    overflow: hidden;
    position: relative;
    _zoom: 1;
}
.news h1 { 
    margin-bottom: 15px;
    padding-left: 20px;
    color: #370188;
}
.news-list {
    position: absolute;
}
.news-list {
    float: left;    
}
.news-list li {
    float: left;
    _display: inline;
    margin-right: 15px;
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    word-wrap: normal;
}
.news-list li a {
    text-decoration: none;
    color: #000;
}
.news-list li a:hover {
    -webkit-transition: color .2s linear,background-color .3s linear;
    -moz-transition: color .2s linear,background-color .3s linear;
    -ms-transition: color .2s linear,background-color .3s linear;
    -o-transition: color .2s linear,background-color .3s linear;
    transition: color .2s linear,background-color .3s linear;
    color: #FF4400;
    text-decoration: underline;
}
.news-list li a:visited {
    color: #290065;    
}
style>
<script src="http://code.jquery.com/jquery-latest.js">script>
head>
<body>
<div id="J_news" class="news">
    <h1>文字列表滚动h1>
    <div id="J_Roll_Container" class="news-box">
        <ul class="J_Roll_Content news-list">
            <li><a href="http://news.sina.com.cn/c/2013-01-10/121926003955.shtml" target="_blank">日方否认将对中国巡航钓鱼岛飞机a>li>
            <li><a href="http://news.hf365.com/system/2013/01/10/012875943.shtml" target="_blank">日本防卫省否认将对中国飞机警告射击(图)a>li>
            <li><a href="http://news.21cn.com/world/guojisaomiao/2013/01/10/14338977.shtml" target="_blank">日否认警告射击中海监飞机 恐中日因夺岛开战a>li>
        ul>    
    div>
div>
<script>
// 引入jQuery.roll代码 script> <script> $(function(){ var roll_jQuery, contents; roll_jQuery = $.roll('.J_Roll_Content', '#J_Roll_Container', { effect: 'scrollX', duration: 40, delay: 500 }).rollRun(); contents = $('.J_Roll_Content'); contents.bind('mouseenter', function(){ roll_jQuery.rollStop(); }); contents.bind('mouseleave', function(){ roll_jQuery.rollRun(); }); }); script> body> html>

例3.2


DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="description" content="jQuery实现无间隙滚动效果">
<title>jQuery demotitle>
<style>
body {
    font: 12px/1.5 tahoma, "microsoft yahei", "微软雅黑E\8F6F\96C5\9ED1";
}
body, div, ul, li, h1 {
    margin: 0;
    padding: 0;
}
.news {
    margin: 100px 0 0 100px;
}
.news ul {
    list-style: none;
}
.news-box {
    padding: 20px;
    width: 310px;
    height: 192px;
    background-color: #fcfcfd;
    overflow: hidden;
    position: relative;
}
.news h1 {
    margin-bottom: 15px;
    padding-left: 20px;
    color: #370188;
}
.news-list {
    position: absolute;
}
.news-list li {
    width: 100%;
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    word-wrap: normal;
}
.news-list li a {
    text-decoration: none;
    color: #000;
}
.news-list li a:hover {
    -webkit-transition: color .2s linear, background-color .3s linear;
    -moz-transition: color .2s linear, background-color .3s linear;
    -ms-transition: color .2s linear, background-color .3s linear;
    -o-transition: color .2s linear, background-color .3s linear;
    transition: color .2s linear, background-color .3s linear;
    color: #FF4400;
    text-decoration: underline;
}
.news-list li a:visited {
    color: #290065;
}
style>
<script src="http://code.jquery.com/jquery-latest.js">script>
head>
<body>
<div id="J_news" class="news">
  <h1>文字列表滚动h1>
  <div id="J_Roll_Container" class="news-box">
    <ul class="J_Roll_Content news-list">
      <li><a href="http://news.ifeng.com/world/detail_2013_01/11/21098447_0.shtml" target="_blank">在澳中国留学生涉嫌接送非法色情业者赚外快被罚a>li>
      <li><a href="http://news.qq.com/a/20130111/000993.htm" target="_blank">印度北部等今冬遭遇极寒天气 已致数百人被冻死a>li>
      <li><a href="http://news.qq.com/a/20130111/001251.htm" target="_blank">意大利警方禁止挂中国红灯笼 被指危险引燃物a>li>
      <li><a href="http://news.sina.com.cn/c/2013-01-10/121926003955.shtml" target="_blank">日方否认将对中国巡航钓鱼岛飞机a>li>
      <li><a href="http://news.hf365.com/system/2013/01/10/012875943.shtml" target="_blank">日本防卫省否认将对中国飞机警告射击(图)a>li>
      <li><a href="http://news.21cn.com/world/guojisaomiao/2013/01/10/14338977.shtml" target="_blank">日否认警告射击中海监飞机 恐中日因夺岛开战a>li>
      <li><a href="http://military.people.com.cn/n/2013/0110/c1011-20150261.html" target="_blank">传解放军举行长白山军演a>li>
      <li><a href="http://news.21cn.com/world/guojisaomiao/2013/01/10/14335623.shtml" target="_blank">中国高新6号反潜机问世 反潜艇性能优于美军P-3Ca>li>
      <li><a href="http://opinion.huanqiu.com/opinion_world/2013-01/3467875.html" target="_blank">张建刚:2030年中国将圆海洋强国梦a>li>
      <li><a href="http://news.hf365.com/system/2013/01/10/012873928.shtml" target="_blank">运-20现身试飞中心 可取代伊尔-76任何功能a>li>
      <li><a href="http://mil.sohu.com/20130110/n362988784.shtml" target="_blank">东海舰队引入大批无人机 饱和攻击让日难以招架a>li>
    ul>
  div>
div>
<script>

12下一页
更多
2

鲜花
6

握手
1

雷人

路过

鸡蛋

刚表态过的朋友 (9 人)

相关阅读

发表评论

最新评论

引用 麦田守望者 2013-8-24 12:36
能不能直接下载源码

查看全部评论(1)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-21 04:05

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部