jquery插件之无缝循环新闻列表

一、效果图:

newslist效果图

    tips源码下载:http://files.cnblogs.com/waitingbar/newslist.rar

二、jquery源码:

(function($){$.fn.extend({newsList:function(options){var defaults ={actName:'li',          //显示条数名;maxShowNum:'6',       //最多的显示条数;actNameH:'28',       //一次移动的距离;ulClass:'.ul_news_list',           //被复制层的classcopyUlClass:'.ul_news_list2',     //复制层的classautoTime:'1500',  //自动运行时间;clickGoUpC:'.go_uplist',        //点击向上class; clickDownUpC:'.go_downlist',   //点击向下class; goStart:'go_tart',autoCloss:'flase'    //自动运行开关,当为'flase'时为开,其它则关;} ;options = $.extend(defaults, options);return this.each(function(){var o = options;var counts =1;var linum = $($(this).find(o.actName),$(this)).size();var ul_class = $($(this).find(o.ulClass),$(this));var copy_ul_class = $($(this).find(o.copyUlClass),$(this));var click_go_up_c = $($(this).find(o.clickGoUpC),$(this));var click_go_down_C = $($(this).find(o.clickDownUpC),$(this));var go_start = $($(this).find(o.goStart),$(this));if(linum > o.maxShowNum){$(copy_ul_class).html($(ul_class).html());goStartList();}var thiswrap = $($(ul_class).parent().parent(),$(this));//自动运行函数function auto_function(){if(counts <= linum){$(ul_class).animate({top:'-=' + o.actNameH},o.autoTime);$(copy_ul_class).animate({top:'-=' + o.actNameH},o.autoTime);counts++;}else{$(ul_class).animate({top:0},0);$(copy_ul_class).animate({top:0},0);counts = 1;    }}//点击向上移动时;if(linum > o.maxShowNum){$(click_go_up_c).click(function(){if(counts <= linum){$(ul_class).animate({top:'-=' + o.actNameH},0);$(copy_ul_class).animate({top:'-=' + o.actNameH},0);counts++;}else{$(ul_class).animate({top:0},0);$(copy_ul_class).animate({top:0},0);counts = 1;}});}//点击向下移动时;if(linum > o.maxShowNum){$(click_go_down_C).click(function(){if(counts > 1){counts--;$(ul_class).animate({top:'-'+ counts*o.actNameH},0);$(copy_ul_class).animate({top:'-'+ counts*o.actNameH},0);}else{$(ul_class).animate({top:0},0);$(copy_ul_class).animate({top:0},0);counts = linum+1;}});}//鼠标经过所发生的开始停止;if(linum > o.maxShowNum){$(thiswrap).hover(function(){goStopList();},function(){goStartList();});}function goStartList(){if(o.autoCloss === 'flase'){go_start = setInterval(auto_function,o.autoTime);}}function goStopList(){clearInterval(go_start);}});}});
}(jQuery));

三、HTML:

<script language="javascript">
$(document).ready(function(){
    $("#newslist").newsList();
});
</script>

<div id="newslist">
      <div class="go_upanddown"><span class="go_uplist"><img src="images/newslist/goupbtn.gif" /></span><span class="go_downlist"><img src="images/newslist/godownbtn.gif" /></span></div>
    <div class="news_list_bar">
       <ul class="ul_news_list">
          <li><a href="#">1、曾参加过唐山、汶川、玉树地震救援的援</a><a href="#">曾参加过唐,又来到了舟曲参加救援</a></li>
          <li><a href="#">2、摩洛哥塞拉,艺术家在一场为流浪儿童为流浪儿童为流浪儿童为流浪儿童募捐的马戏节目中表演</a></li>
          <li><a href="#">3、昆明警方近日县的“洪兴甸县的“洪兴甸县的“洪兴甸县的“洪兴帮”黑恶势力团伙,缴获...</a></li>
          <li><a href="#">4、印度克什知自己的孩子在骚乱中丧生时痛不欲生..</a><a href="#">曾参加过唐曾参加过唐到了舟曲参加救援</a></li>
          <li><a href="#">5、明昆明警方近日捣毁了寻甸县的“洪兴帮”黑恶势力团伙,缴获...</a></li>
          <li><a href="#">6、曾参加过唐曾参加过唐曾参加过唐曾参加过唐</a></li>
          <li><a href="#">7、湖北武汉汉口汉口曾参加过唐曾参加过唐曾参加过唐曾参加过唐观看两江洪峰过</a></li>
          <li><a href="#">8、湖北武汉汉曾参加过唐曾参加过唐曾参加过唐曾参加过唐集在江边观</a></li>
          <li><a href="#">9、湖北武汉汉口汉口龙王庙景区观景平台上,市民聚集在江边观看两江洪峰过汉</a></li>
      </ul>
       <ul class="ul_news_list2"></ul>
  </div>
</div>

四、CSS:

body { font-family:"微软雅黑",Arial,"Lucida Grande", Verdana, Lucida; font-size:12px; }
*{ padding:0; margin:0;}
img { border:0;}
.clear { clear:both;}
a { color:#000; text-decoration:none;}
a:hover { color:#EC6104;  text-decoration:none;}
.undis { display:none;}/*news_list*/
.news_list_bar { position:relative;  width:560px; height:168px; overflow:hidden; background:url(../images/slideshow2/v3_picture6.gif) repeat-y; background-color:#F00;}
.ul_news_list,
.ul_news_list2{ position:relative; list-style:none;}
.ul_news_list li,
.ul_news_list2 li{line-height:28px;  height:28px; width:500px; overflow:hidden; white-space:nowrap;padding:0 20px;}
.ul_news_list li a,
.ul_news_list2 li a{ padding-right:20px;}
.go_upanddown { position:absolute; margin:-20px 0 0 500px;}
.go_upanddown span { padding-right:10px; cursor:pointer;}

转载于:https://www.cnblogs.com/waitingbar/archive/2011/03/04/1970959.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275637.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

素描的几大基础知识点_2020年让您感到惊奇的5大素描资源

素描的几大基础知识点Sketch is my favorite stand-alone software that I use every day. It is simple, stable, and fast. During my working process, I use other resources that allow me to create UX/UI design faster. These tools have a different direction, but s…

ESMap+Html5+SpringBoot+FastDFS实现导航导购App

github链接 项目实现的简要概述 服务器部分 测试阶段使用的是双系统的开发模式&#xff0c;在Linux服务器上部署了轻量级分布式文件系统fastdfs&#xff0c;且整合了高性能的HTTP和反向代理服务器nginx&#xff1b;在本地的服务器上使用Spring Boot框架&#xff0c;使用其内置的…

你不知道的 Chrome DevTools 玩法

大家好&#xff0c;我是若川。今天再分享一篇 chrome devtools 的文章。之前分享过多篇。Chrome DevTools 全攻略&#xff01;助力高效开发 前端容易忽略的 debugger 调试技巧‍笔者在前段时间的开发时&#xff0c;需要通过 Chrome DevTools来分析一个接口&#xff0c;调试中发…

matlab拟合四次函数表达式,用matlab编写程序求以幂函数作基函数的3次、4次多项式的最小二乘曲线拟合,画出数据散点图及拟合曲线图...

共回答了18个问题采纳率&#xff1a;83.3%x[0.0 0.1 0.2 0.3 0.5 0.8 1.0]; %输入数组>> y[1.0 0.41 0.50 0.61 0.91 2.02 2.46];>> f1inline(poly2sym(polyfit(x,y,3))); %polyfit拟合得到系数,poly2sym由系数得到多项式,inline转换内联函数>> f2inline(pol…

排版人员 快速排版_选择排版前应了解的事项

排版人员 快速排版Design is everywhere, and with design comes text and the content that you’re trying to reach the user with. But before creating your design and choosing what font you want to use, there are some things you should know that will help you a…

matlab光顺拐点,基于MATLAB的最大误差双圆弧逼近曲线的算法及实现.pdf

基于MATLAB的最大误差双圆弧逼近曲线的算法及实现.pdf第31卷第6期 基于MⅢB的最大误差双圆弧逼近曲线的算法及实现文章编号&#xff1a;1004—2539120町】06一唧一∞基于MAⅡ&#xff0e;AB的最大误差双圆弧逼近曲线的算法及实现淮海工学院机械工程系&#xff0c;扛苏连云港笠a…

若川诚邀你加源码共读群,帮助更多人学会看源码~

小提醒&#xff1a;若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮&#xff0c;欢迎点击阅读&#xff0c;也可以星标我的公众号&#xff0c;便于查找。回复pdf&#xff0c;可以获取前端优质书籍。最近我创建了一个源码共读的前端交流群&#xff0c;希望尝试帮…

体育木地板的施工

文章来源&#xff1a;http://www.bjfhrd.com 体育木地板上有许多暗门&#xff0c;以制造特殊效果&#xff0c;如火焰、烟雾&#xff0c;使房屋、树木、山或人物在一瞬间出现或销售。这种特殊的要求&#xff0c;对于专业体育木地板德施工就有了一定的要求。 专业体育木地板施工&…

imessage_重新设计iMessage以获得更好的用户体验— UX案例研究

imessage体验设计 (EXPERIENCE DESIGN) Communication is a vital part of our everyday lives. We almost don’t even have to think about it. With social media and our devices as prime tools, we’re constantly finding new ways to stay connected. Instant messagin…

mysql 生成时间轴,MYSQL 时间轴数据 获取同一天数据的前3条

创建表数据CREATE TABLE praise_info (id bigint(20) NOT NULL AUTO_INCREMENT COMMENT ID,pic_id varchar(64) DEFAULT NULL COMMENT 图片ID,created_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间,PRIMARY KEY (id),KEY pic_id (pic_id) USING BTREE) ENGINEInn…

【招聘】永辉招前端

大家好&#xff0c;我是若川。这应该招聘第六期。友情帮好友宣传招聘。之前在跟各位读者朋友分享下公众号运营策略 文中提到 公众号主旨是帮助5年内前端小伙伴提升&#xff0c;找到好工作&#xff0c;所以有招聘文。上海 高级前端 本科 25k-50k 16薪岗位职责&#xff1a;1、…

C语身教程第三章: C说话挨次筹算匹面(1)

&#xff23;说话挨次筹算本课先容&#xff23;说话挨次筹算的根基要领和根基的挨次语句。从挨次流程的角度来看&#xff0c;挨次可以分为三种根基构造&#xff0c; 即挨次构造、分支构造、循环构造。 这三种根基构造可以组玉成部的种种重年夜挨次。&#xff23;说话供给了多种…

插图 引用 同一行两个插图_插图的目的

插图 引用 同一行两个插图If you’re a designer in tech you’ve likely come across them. Any search for UI or product design on Dribbble will yield at least a few. Amid the sea of pastel blues and pinks, accented neon purples and gamboge yellows, these facel…

php 转码iconv,PHP iconv()函数转字符编码的问题(转)

在php函数库有一个函数&#xff1a;iconv()&#xff0c;iconv函数库能够完成各种字符集间的转换&#xff0c;是php编程中不可缺少的基础函数库。最近在做一个小偷程序&#xff0c;需要用到iconv函数把抓取来过的utf-8编码的页面转成gb2312&#xff0c;发现只有用iconv函数把抓取…

VSCode 竟然可以无缝调试浏览器了!

大家好&#xff0c;我是若川。今天周末&#xff0c;分享一篇相对比较简单的文章。学习源码系列、面试、年度总结、JS基础系列。2021-07-16 微软发布了一篇博客专门介绍了这个功能&#xff0c;VSCode 牛逼&#xff01;在此之前&#xff0c;你想要在 vscode 内调试 chrome 或者 e…

最少的编码

Knowing how to code HTML email can bring you many opportunities, such as working as a digital designer, collaborating with front end developers, finding freelancing projects.知道如何对HTML电子邮件进行编码可以为您带来许多机会&#xff0c;例如担任数字设计师&a…

Hulu CEO预计网站本年营收将达5亿美元

网易科技讯 3月2日动静&#xff0c;据国外媒体报道&#xff0c;美国在线视频网站Hulu CEO杰森吉拉尔&#xff08;Jason Kilar&#xff09;明天不日发挥分析&#xff0c;Hulu本年告白及订阅营收将达5亿美元&#xff0c;是去年的两倍。吉拉尔周一在由互联网告白局举办的“2011年年…

webRTC——浏览器里的音视频通话

背景 webRTC是Google在2010年收购GIP公司之后获得的一项技术。如下图所示&#xff0c;它提供了音视频的采集、处理(降噪&#xff0c;回声消除等)、编解码、传输等技术。webRTC的目标是实现无需安装任何插件就可以通过浏览器进行P2P的实时音视频通话及文件传输&#xff0c;来看看…

面对 this 指向丢失,尤雨溪在 Vuex 源码中是怎么处理的

1. 前言大家好&#xff0c;我是若川。好久以前我有写过《面试官问系列》&#xff0c;旨在帮助读者提升JS基础知识&#xff0c;包含new、call、apply、this、继承相关知识。其中写了 面试官问&#xff1a;this 指向 文章。在掘金等平台收获了还算不错的反馈。最近有小伙伴看我的…

转:Python: threading.local是全局变量但是它的值却在当前调用它的线程当中

原文地址:http://www.cnblogs.com/fengmk2/archive/2008/06/04/1213958.html 在threading module中&#xff0c;有一个非常特别的类local。一旦在主线程实例化了一个local&#xff0c;它会一直活在主线程中&#xff0c;并且又主线程启动的子线程调用这个local实例时&#xff0c…