巴黎人游戏官网一、jQuery.roll 插件使用表明,复

作者: 前端开发  发布:2019-08-04

在线演示:
jQuery代码

jquery特效 幻灯片效果,效果图如下:
巴黎人游戏官网 1 

一、jQuery.roll 插件使用表明
jQuery.roll 是仿照百度快讯不间断滚动作效果应,并辅助文字、图片水平垂直滚动,该函数使用方式为:

近年来用到二个页面上海体育场所片左右切换和音讯列表滚动显示的效果与利益,整理如下:

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

前段代码:

//第二版:Newton改造
(function (win){
var callboarTimer;
var callboard = $('#callboard');
var callboardUl = callboard.find('ul');
var callboardLi = callboard.find('li');
var liLen = callboard.find('li').length;
var initHeight = callboardLi.first().outerHeight(true);
win.autoAnimation = function (){
if (liLen <= 1) return;
var self = arguments.callee;
var callboardLiFirst = callboard.find('li').first();
callboardLiFirst.animate({
marginTop:-initHeight
}, 500, function (){
clearTimeout(callboarTimer);
callboardLiFirst.appendTo(callboardUl).css({marginTop:0});
callboarTimer = setTimeout(self, 5000);
});
}
callboard.mouseenter(
function (){
clearTimeout(callboarTimer);
}).mouseleave(function (){
callboarTimer = setTimeout(win.autoAnimation, 5000);
});
}(window));
setTimeout(window.autoAnimation, 5000);

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>jquery特效</title>
<style>
/* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:center; margin:0 auto; }
table{border-collapse:collapse;border-spacing:0;}
a{ color:#333; text-decoration:none;}
.box{ width:420px; margin:20px auto; position:relative; overflow:hidden; text-align:left;}
.box img{border:0px; width:420px;}
.big{ width:100%; float:left; height:196px; overflow:hidden; margin-bottom:2px;}
.big a{ display:none;}
.big span{ position:absolute; left:0; top:167px; font-size:13px; color:#fff; z-index:11; height:30px; line-height:30px; text-indent:1em; width:100%; )}
.num{ width:424px; margin-right:-24px; float:left; height:53px; padding-top:2px;}
.num li{ width:99px; padding-top:5px; padding-left:1px; cursor:pointer; float:left; margin-right:6px;height:48px;}
.num img{ width:98px;}
.num li.on{ background:url(../images/bg01.gif) no-repeat 0 0;}
.txtbg{ position:absolute; left:0; top:167px; width:100%; height:30px; background:#000; opacity:0.5;filter:alpha(opacity=50); z-index:10;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var timer;
var i=-1;
var offset=3000;
function roll(){
i ;
if(i>3){
i=0;
}
slide(i);
timer=setTimeout(roll,offset)
}
function slide(i){
$('.big a').eq(i).fadeIn().siblings().hide();
$('.num li').eq(i).siblings().removeClass('on');
$('.num li').eq(i).addClass('on');
}
function stopBig(){
$('.big').hover(function(){
clearTimeout(timer);
},function(){
timer=setTimeout(roll,offset);
});
}
function stoproll(){
$('.num li').hover(function(){
clearTimeout(timer);
i=$(this).index();
slide(i);
},function(){
timer=setTimeout(roll,offset);
})
}
$(function(){
roll();
stoproll();
stopBig()
})
</script>
</head>
<body>
<div class="box">
<div class="txtbg"> </div>
<div class="big">
<a href="#" style="display:block"><img src="images/1.jpg" /><span>标题1</span></a>
<a href="#"><img src="images/2.jpg" /><span>标题2</span></a>
<a href="#"><img src="images/3.jpg" /><span>标题3</span></a>
<a href="#"><img src="images/4.jpg" /><span>标题4/span></a>
</div>
<ul class="num">
<li class="on"><img src="images/1s.jpg" /></li>
<li><img src="images/2s.jpg" /></li>
<li><img src="images/3s.jpg" /></li>
<li><img src="images/4s.jpg" /></li>
</ul>
</div>
</body>
</html>

/*
* @module jQuery roll
* @param: contentCls 内容容器className
* @param: contentParentId 内容容器父元商节点ID
* @param: configs 配置参数
*
* @config: effect 滚动作效果应
* @config: duration 滚动1个像素的运作时刻(微秒数)
* @config: delay 初始滚动的延迟时间(阿秒数)
*
*/
jQuery.roll(contentCls, contentParentId, configs);

复制代码 代码如下:

HTML代码:

您恐怕感兴趣的篇章:

  • jQuery旋转木马式幻灯片轮播特效
  • 凭仗Jquery代码完成协理PC端手提式有线话机端幻灯片代码
  • jquery轻便完结幻灯片的措施
  • jQuery插件animateSlide制作多点滑动幻灯片
  • jQuery插件Skippr达成主旨图幻灯片特效
  • jQuery插件slick达成响应式移动端幻灯片图片切换特效
  • jquery幻灯片插件bxslider样式立异实例
  • Jquery图片滚动与幻灯片的实例代码
  • jQuery Tools tab(幻灯片)
  • jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)

二、函数源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="css/css.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/kxbdSuperMarquee.js"></script>
<script type="text/javascript" src="js/indexPic.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
        $('.indexNews div.core').kxbdSuperMarquee({
            isEqual:false,
            distance:18,
            time:4,
            //btnGo:{up:'#goU',down:'#goD'},
            direction:'up'
        });
    });
</script>
</script>
<title></title>
</head>
<body>
<div class="outer">
    <div class="banner">
        <div class="flash_img" id="fadImgs">
            <ul class="img-box"  style="">

复制代码 代码如下:

复制代码 代码如下:

                <li><a target="_blank" href="#"><img alt="首页AD-1" src="Images/ad-1.jpg" width="1980" height="449"></a></li>

<div id="callboard">
<ul>
<li>
<a href=";
</li>
<li>
<span style="color:red;">文告:前端组上线一个月零八日,P卡宴升为3,BD权重1</span>
</li>
</ul>

jQuery.extend({
roll: function(contentCls, contentParentId, configs){
var setTimeID, totalWidth = 0, totalHeight = 0,
firstContent, secondContent, contents;
(function(){
var singleContent, cloneContent, nodeList;
singleContent = $(contentCls, contentParentId);
nodeList = singleContent.children();
if (configs.effect === 'scrollX') {
$.each(nodeList, function(idx, itm) {
totalWidth = $(itm).outerWidth(true);
});
singleContent.css({ 'width': totalWidth 'px' });
}
else if (configs.effect === 'scrollY') {
$.each(nodeList, function(idx, itm) {
totalHeight = $(itm).outerHeight(true);
});
singleContent.css({ 'height': totalHeight 'px' });
}
cloneContent = singleContent.clone();
cloneContent.appendTo(contentParentId);
contents = $(contentCls, contentParentId);
firstContent = contents[0];
secondContent = contents[1];
if (configs.effect === 'scrollX') {
$(firstContent).css({ 'left': 0 });
$(secondContent).css({ 'left': totalWidth 'px' });
}
else if (configs.effect === 'scrollY') {
$(firstContent).css({ 'top': 0 });
$(secondContent).css({ 'top': totalHeight 'px' });
}
})()
function cssAnimate(){
if (configs.effect === 'scrollX') {
$(firstContent).css({ left: parseInt(firstContent.style.left, 10) - 1 'px' });
$(secondContent).css({ left: parseInt(secondContent.style.left, 10) - 1

                <li><a target="_blank" href="#"><img alt="首页AD-2" src="images/ad-2.jpg" width="1980" height="449"></a></li>

CSS代码:(可依靠须要另设)

  • 'px' });
    $.each(contents, function(idx, itm) {
    if (parseInt(itm.style.left,10) === -totalWidth) {
    $(itm).css({ left: totalWidth 'px' });
    }
    });
    }
    else if (configs.effect === 'scrollY') {
    $(firstContent).css({ top: parseInt(firstContent.style.top, 10) - 1 'px' });
    $(secondContent).css({ top: parseInt(secondContent.style.top, 10) - 1 'px' });
    $.each(contents, function(idx, itm) {
    if (parseInt(itm.style.top,10) === -totalHeight) {
    $(itm).css({ top: totalHeight 'px' });
    }
    });
    }
    setTimeId = setTimeout(cssAnimate, configs.duration);
    }
    function rollRun(){
    setTimeId = setTimeout(cssAnimate, configs.delay);
    return jQuery;
    }
    function rollStop(){
    clearTimeout(setTimeId);
    return jQuery;
    }
    return $.extend({
    rollRun: rollRun,
    rollStop: rollStop
    });
    }
    });

                <li><a target="_blank" href="#"><img alt="首页AD-3" src="images/ad-3.jpg" width="1980" height="449"></a></li>

复制代码 代码如下:

三、完整demo源码
例3.1

                <li><a target="_blank" href="#"><img alt="首页AD-4" src="Images/ad-4.jpg" width="1980" height="449"></a></li>

#callboard { height:24px; line-height:24px; overflow:hidden;}
#callboard ul { padding:0;}
#callboard li { padding:0;}

复制代码 代码如下:

            </ul>
        </div>
    </div>
    <div class="indexNews">
        <strong class="fl mr10"><a href="#">音信大旨</a></strong>
        <div class="core">
          <ul>

完全演示代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="description" content="jQuery达成无闲暇滚动作效果应">
<title>jQuery demo</title>
<style>
body { font: 12px/1.5 tahoma,"microsoft yahei","微软雅黑E8F6F96C59ED1"; }
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=";
</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="" target="_blank">日方否认将对中华夏族民共和国游弋钓鱼岛飞行器</a></li>
<li><a href="" target="_blank">东瀛防守省否定将对中华飞行器警告射击(图)</a></li>
<li><a href="" 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>

            <li><a href="#" title="新闻1">消息标题1</a></li>

复制代码 代码如下:

例3.2

            <li><a href="#" title="信息2">音信标题2</a></li>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动文告栏</title>
<style type="text/css">
header, nav, aside, menu, figure, article, footer { display:block; }
body, div, form, textarea, label, input, ul, ol, li, dl, dt, dd, p, span, a, img, h1, h2, h3, h4, h5, h6, tbody, tfoot, tr, th, td, pre, code, form, fieldset, legend, font { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
caption, th { text-align:left; }
sup { vertical-align:text-top; }
sub { vertical-align:text-bottom; }
li { list-style:none; }
fieldset, img { border:none; }
input, textarea, select { font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%;
color:inherit; _color:#333; *color:#333;
outline:none; }
/*BASE CLASS*/
.cfix { *display:inline-block;*zoom:1}
.cfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
/*文告栏滚动CSS*/
#callboard { width:600px; margin:100px auto 0; height:24px; line-height:24px; overflow:hidden; font-size:12px; background-color:#f5f5f5;}
#callboard ul { padding:0; }
#callboard li { padding:0; }
</style>
<script type="text/javascript" src=";
</head>
<body>
<div id="callboard">
<ul>
<li>
<span style="color:red;">公告[2]:前端组上线四个月零五天,PEvoque升为3,BD权重1</span>
</li>
<li>
<span style="color:red;">公告[3]:撤下了BloggerAds,原因为收入太少,张开速度慢!</span>
</li>
<li style="margin-top: 0px;">
<a href="//www.jb51.net">公告[1]:前端组大旨正在整理中..有亟待用的相爱的人请留个言,以福利及时公告!</a>
</li>
</ul>
</div>
<!--公告板滚动-->
<script type="text/javascript">
(function (win){
var callboarTimer;
var callboard = $('#callboard');
var callboardUl = callboard.find('ul');
var callboardLi = callboard.find('li');
var liLen = callboard.find('li').length;
var initHeight = callboardLi.first().outerHeight(true);
win.autoAnimation = function (){
if (liLen <= 1) return;
var self = arguments.callee;
var callboardLiFirst = callboard.find('li').first();
callboardLiFirst.animate({
marginTop:-initHeight
}, 500, function (){
clearTimeout(callboarTimer);
callboardLiFirst.appendTo(callboardUl).css({marginTop:0});
callboarTimer = setTimeout(self, 5000);
});
}
callboard.mouseenter(
function (){
clearTimeout(callboarTimer);
}).mouseleave(function (){
callboarTimer = setTimeout(win.autoAnimation, 5000);
});
}(window));
setTimeout(window.autoAnimation, 5000);
</script>
</body>
</html>

复制代码 代码如下:

            <li><a href="#" title="音讯3”">新闻标题3</a></li>

你大概感兴趣的稿子:

  • jQuery调控li上下循环滚动插件用法实例(附demo源码下载)
  • 多样JQuery循环滚动文字图片效果代码
  • jQuery完毕列表自动滚动循环滚动体现音信
  • jQuery循环滚动音讯列表示例代码
  • jQuery达成列表自动循环滚动鼠标悬停时停下滚动
  • jquery完毕文字由下到上循环滚动的实例代码
  • jQuery循环滚动浮当代码 可应用到文字和图表上
  • JQuery循环滚动图片代码
  • 凭借jquery可配备循环左右滚动例子
  • 依照jquery的内容循环滚动小模块(仿天涯论坛乐乎未登陆首页滚动天涯论坛显示)
  • 使用jquery完结的循环三翻五次可暂停滚动实例

View Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="description" content="jQuery完成无闲暇滚动作效果应">
<title>jQuery demo</title>
<style>
body { font: 12px/1.5 tahoma, "microsoft yahei", "微软雅黑E8F6F96C59ED1"; }
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=";
</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="" target="_blank">在澳中华夏族民共和国留学生涉嫌接送非法色情业者赚外快被罚</a></li>
<li><a href="" target="_blank">孔雀之国西部等今冬遭到极寒天气已致数百人被冻死</a></li>
<li><a href="" target="_blank">意大利共和国警署禁止挂中夏族民共和国红灯笼 被指危险引燃物</a></li>
<li><a href="" target="_blank">日方否认将对中华巡航钓鱼岛飞机</a></li>
<li><a href="" target="_blank">东瀛防守省否认将对中中原人民共和国飞行器警告射击(图)</a></li>
<li><a href="" target="_blank">日否认警告射击中海上安全监督飞机 恐中国和日本因夺岛开张</a></li>
<li><a href="" target="_blank">传解放军举办长太平山军演</a></li>
<li><a href="" target="_blank">中夏族民共和国高新技能6号反潜机问世 反潜艇质量优越美军P-3C</a></li>
<li><a href="" target="_blank">张建刚:2030年中华将圆海洋强国梦</a></li>
<li><a href="" target="_blank">运-20出现试飞中央可代表伊尔-76别的成效</a></li>
<li><a href="" target="_blank">黄海舰队引进大批判无人机饱和口诛笔伐让日难以抗拒</a></li>
</ul>
</div>
</div>
<script>
jQuery.extend({
roll: function(contentCls, contentParentId, configs){
var setTimeID, totalWidth = 0, totalHeight = 0,
firstContent, secondContent, contents;
(function(){
var singleContent, cloneContent, nodeList;
singleContent = $(contentCls, contentParentId);
nodeList = singleContent.children();
if (configs.effect === 'scrollX') {
$.each(nodeList, function(idx, itm) {
totalWidth = $(itm).outerWidth(true);
});
singleContent.css({ 'width': totalWidth 'px' });
}
else if (configs.effect === 'scrollY') {
$.each(nodeList, function(idx, itm) {
totalHeight = $(itm).outerHeight(true);
});
singleContent.css({ 'height': totalHeight 'px' });
}
cloneContent = singleContent.clone();
cloneContent.appendTo(contentParentId);
contents = $(contentCls, contentParentId);
firstContent = contents[0];
secondContent = contents[1];
if (configs.effect === 'scrollX') {
$(firstContent).css({ 'left': 0 });
$(secondContent).css({ 'left': totalWidth 'px' });
}
else if (configs.effect === 'scrollY') {
$(firstContent).css({ 'top': 0 });
$(secondContent).css({ 'top': totalHeight 'px' });
}
})()
function cssAnimate(){
if (configs.effect === 'scrollX') {
$(firstContent).css({ left: parseInt(firstContent.style.left, 10) - 1 'px' });
$(secondContent).css({ left: parseInt(secondContent.style.left, 10) - 1

            <li><a href="#" title="新闻4">音信标题4</a></li>

  • 'px' });
    $.each(contents, function(idx, itm) {
    if (parseInt(itm.style.left,10) === -totalWidth) {
    $(itm).css({ left: totalWidth 'px' });
    }
    });
    }
    else if (configs.effect === 'scrollY') {
    $(firstContent).css({ top: parseInt(firstContent.style.top, 10) - 1 'px' });
    $(secondContent).css({ top: parseInt(secondContent.style.top, 10) - 1 'px' });
    $.each(contents, function(idx, itm) {
    if (parseInt(itm.style.top,10) === -totalHeight) {
    $(itm).css({ top: totalHeight 'px' });
    }
    });
    }
    setTimeId = setTimeout(cssAnimate, configs.duration);
    }
    function rollRun(){
    setTimeId = setTimeout(cssAnimate, configs.delay);
    return jQuery;
    }
    function rollStop(){
    clearTimeout(setTimeId);
    return jQuery;
    }
    return $.extend({
    rollRun: rollRun,
    rollStop: rollStop
    });
    }
    });
    </script>
    <script>
    $(function(){
    var roll_jQuery, contents;
    roll_jQuery = $.roll('.J_Roll_Content', '#J_Roll_Container', { effect: 'scrollY', 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>

            <li><a href="#" title="音信5">新闻标题5</a></li>

您恐怕感兴趣的篇章:

  • 依照Jquery的文字滚动跑马灯插件(一个页面多少个滚动区)
  • jQuery完结公告文字左右轮转的实例代码
  • jquery 单行滚动、批量多行滚动、文字图片翻屏滚动作效果应代码
  • jquery完结marquee效果(文字或许图片的水准垂直滚动)
  • jquery文字上下滚动的实现方式
  • jQuery达成单行文字间歇向上滚动力源代码
  • jQuery文字横向滚动作效果应的兑今世码
  • jquery插件之文字间歇自动进化滚动作效果应代码
  • 何以行使jquery达成文字上下滚动作效果应
  • 圆满协作各大浏览器的jQuery仿知乎图文淡入淡出间歇滚动特效
  • jQuery达成的文字逐行向上间歇滚动作效果应示例

          </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function() {
        var len = $(".img-box li").length;
        var imgW = $(".img-box li").width() * len;
        $(".img-box").width(imgW);
        $(".info_slide_dots span").hide();
    })
    $("#fadImgs").slideImg({
        speed: "slow",
        timer: 5000
    });
</script>
</body>
</html>

本文由巴黎人游戏官网发布于前端开发,转载请注明出处:巴黎人游戏官网一、jQuery.roll 插件使用表明,复

关键词:

上一篇:你可以像使用 CSS,你可以像使用 CSS
下一篇:没有了