网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

jq插件之文字左右滚动后延迟再滚动

用声音读出全文关注我吧
 2014/3/25 14:11:05 阅读次数:9766

今天做了一个关于JQ的文字滚动插件，每条滚动后停顿N秒后继续滚动。效果不错，本插件支持一个页面N个相同的特效。在这里分享给大家。

效果如下图：

jq插件之文字左右滚动后延迟再滚动

源代码如下：

(function(f, d, a) {   
    d.fn.scrollGrid = function(k) {
        var l = d.extend({
            perScroll: 1,
            speed: 14,
            interval: 4000
        },
        k || {});
        return this.each(function() {
            var n = d(this),
            m = n.find(">.listWrap"),
            o;
			s = m.find(">a");//获取多少个a
			var getwidth=s.eq(0).css("width").replace("px","")*s.length+"px";//计算span的
			m.css("width",getwidth);//每个span194px宽，总宽度赋给
            l = d.extend({},
            l);
            l.ul = m;
            l.timer = o;
            n.data("option", l);
            action = function() {
                var t = d(this).data("option"),
                s = 0,
                r = t.ul,
                p = r.find("a:lt(" + t.perScroll + ")").each(function() {
                    s += d(this).outerWidth()
                }),
                q = p.clone().appendTo(r);
                r.animate({
                    marginLeft: "-" + Math.abs(s) + "px"
                },
                s * t.speed,
                function() {
                    p.remove();
                    r.css("marginLeft", "0px")
                })
            };
            n.bind({
                mouseenter: function() {
                    f.clearInterval(d(this).data("option").timer)
                },
                mouseleave: function() {
                    var p = this,
                    q = d(this).data("option");
                    q.timer = f.setInterval(function() {
                        action.call(p)
                    },
                    q.interval)
                }
            });
            n.mouseleave()
        })
    };
})(window, jQuery);

调用代码如下：

jQuery(document).ready(function() {
	c = $("#csfBottm");
	$("#csfBottm,#csfBottm2").scrollGrid()
	//支持多个效果的写法，d("#id1, #id2").scrollGrid()
});

完整实例代码如下：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jq插件之文字左右滚动后延迟再滚动</title>
<style>
*{margin:0;padding:0;}
em{font-style:normal;}
.csfWrap{width:209px;margin:0 auto;font-size:12px;}
.tzMod2{margin:12px 0 0;width:195px;overflow:hidden;white-space:nowrap;}
.listWrap a,.listWrap a:link,.listWrap a:visited,.listWrap a:hover{color:#ffba00;text-decoration:none;line-height:20px;text-align:center}
.tzMod2{height:43px;line-height:18px;margin:10px 7px 0;padding:6px 0 0}
.tzMod2 a{color:#ffba00;display:block;float:left;width:196px}
.tzMod2 .listWrap{overflow:hidden;display:block;width:500px;/*js获取自动宽度*/}
.tzMod2 em{display:block;margin:0 auto;text-align:center;}
</style>
<script src="http://www.86y.org/js/jquery.min.js"></script>
</head>
<body>
<div class="csfWrap" style="background:#f60;">
	<div id="csfBottm" class="tzMod2">	
		<em style="color:#fff;">热门文章</em>
		<span class="listWrap">
			<a title="网页设计，SEO优化很重要" href="http://www.86y.org/art_detail.aspx?id=12">网页设计，SEO优化很重要</a>
			<a title="一生只做一件事" href="http://www.86y.org/art_detail.aspx?id=6">一生只做一件事</a>
			<a title="一辈子的电话和关爱" href="http://www.86y.org/art_detail.aspx?id=5">一辈子的电话和关爱</a>
			<a title="博客国外赚钱—出售文字链接篇" href="http://www.86y.org/art_detail.aspx?id=1">博客国外赚钱—出售文字链接篇</a>
			<a title="有人牵挂真好" href="http://www.86y.org/art_detail.aspx?id=10">有人牵挂真好</a>
			<a title="没有过不去的坎" href="http://www.86y.org/art_detail.aspx?id=9">没有过不去的坎</a>
			<a title="当你扛不住的时候就读一遍" href="http://www.86y.org/art_detail.aspx?id=7">当你扛不住的时候就读一遍</a>
			<a title="asp常识" href="http://www.86y.org/art_detail.aspx?id=11">asp常识</a>
			<a title="一辈子走好一条路" href="http://www.86y.org/art_detail.aspx?id=4">一辈子走好一条路</a>
			<a title="稳定情绪小方法" href="http://www.86y.org/art_detail.aspx?id=2">稳定情绪小方法10</a>
		</span>		
	</div>
</div>
<div class="csfWrap" style="background:#000;">
	<div id="csfBottm2" class="tzMod2">	
		<em style="color:#fff;">推荐文章</em>
		<span class="listWrap">
			<a title="C#.net文件批量上传解决方案附下载(swfupload)" target="_blank" href="http://www.86y.org/art_detail.aspx?id=232">C#.net文件批量上传解决方案附下载</a>
			<a title="如何引导用户评论(用户检验) " target="_blank" href="http://www.86y.org/art_detail.aspx?id=17">如何引导用户评论(用户检验)</a>
			<a title="我收藏的教程及工具 " target="_blank" href="http://www.86y.org/art_detail.aspx?id=109">我收藏的教程及工具</a>
			<a title="ckeditor编辑器加+图片自动上传成功(附源代码)" target="_blank" href="http://www.86y.org/art_detail.aspx?id=658">ckeditor编辑器加+图片自动上传成功</a>
			<a title="前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态" target="_blank" href="http://www.86y.org/art_detail.aspx?id=118">前端设计js+Tab切换可关闭+添加并</a>
			<a title="js文字上下滚动+左右滚动兼容FF/IE" target="_blank" href="http://www.86y.org/art_detail.aspx?id=114">js文字上下滚动+左右滚动兼容FF/IE</a>
			<a title="js给C#控件赋值" target="_blank" href="http://www.86y.org/art_detail.aspx?id=75">js给C#控件赋值</a>
			<a title="ckeditor编辑器+finder配置上传功能" href="http://www.86y.org/art_detail.aspx?id=134">ckeditor编辑器+finder配置上传功能</a>
			<a title="js识别手机访问自动跳转到相应页面" target="_blank" href="http://www.86y.org/art_detail.aspx?id=583">js识别手机访问自动跳转到相应页面</a>
			<a href="http://www.86y.org/art_detail.aspx?id=573" target="_blank" title="css各种通用布局的解决方案">css各种通用布局的解决方案10</a>
		</span>		
	</div>
</div>
<script>
(function(f, d, a) {   
    d.fn.scrollGrid = function(k) {
        var l = d.extend({
            perScroll: 1,
            speed: 14,
            interval: 4000
        },
        k || {});
        return this.each(function() {
            var n = d(this),
            m = n.find(">.listWrap"),
            o;
			s = m.find(">a");//获取多少个a
			var getwidth=s.eq(0).css("width").replace("px","")*(s.length+1)+"px";//计算span的
			m.css("width",getwidth);//每个span194px宽，总宽度赋给
            l = d.extend({},
            l);
            l.ul = m;
            l.timer = o;
            n.data("option", l);
            action = function() {
                var t = d(this).data("option"),
                s = 0,
                r = t.ul,
                p = r.find("a:lt(" + t.perScroll + ")").each(function() {
                    s += d(this).outerWidth()
                }),
                q = p.clone().appendTo(r);
                r.animate({
                    marginLeft: "-" + Math.abs(s) + "px"
                },
                s * t.speed,
                function() {
                    p.remove();
                    r.css("marginLeft", "0px")
                })
            };
            n.bind({
                mouseenter: function() {
                    f.clearInterval(d(this).data("option").timer)
                },
                mouseleave: function() {
                    var p = this,
                    q = d(this).data("option");
                    q.timer = f.setInterval(function() {
                        action.call(p)
                    },
                    q.interval)
                }
            });
            n.mouseleave()
        })
    };
})(window, jQuery);

jQuery(document).ready(function() {
	$("#csfBottm,#csfBottm2").scrollGrid()//d("#csfBottm, #czfdxBottm").scrollGrid()
});

</script>
</body></html>

结束语：

本插件支持一个页面N个相同的特效，调用方法非常简单。欢迎大家讨论与指教。

（完）

大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=704【jq插件之文字左右滚动后延迟再滚动】幸凡学习网
0

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)

相关文章

阅读全文内容关闭

copyright ©2010-86y.org - ALL RIGHTS RESERUED -TEMPLATE CREATED BY CHARRY-may 3,2010
粤ICP备13053249号-1谷歌地图