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…

你不知道的 Chrome DevTools 玩法

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

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

排版人员 快速排版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…

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

小提醒&#xff1a;若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮&#xff0c;欢迎点击阅读&#xff0c;也可以星标我的公众号&#xff0c;便于查找。回复pdf&#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、…

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

插图 引用 同一行两个插图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…

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年年…

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

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

单选按钮步骤流程向导 js_创建令人愉快的按钮的6个步骤

单选按钮步骤流程向导 jsThere is no modern interactive UI without buttons. They are an fundamental part of every digital solution. Learn how to improve the style of your buttons and delight users with perfect style.没有按钮&#xff0c;就没有现代的交互式UI。…

axios怎么封装,才能提升效率?

大家好&#xff0c;我是若川。今天分享一篇axios封装的文章。学习源码系列、面试、年度总结、JS基础系列。作为前端开发者&#xff0c;每个项目基本都需要和后台交互&#xff0c;目前比较流行的ajax库就是axios了&#xff0c;当然也有同学选择request插件&#xff0c;这个萝卜白…

护肤产生共鸣_通过以人为本的设计编织共鸣的20个指针

护肤产生共鸣Deep into a project right now, I can’t help but reflect on how I practice empathy in design. Human centered design means empathising with and designing for people, keeping our focus on people throughout. It is not just one stage, it is a minds…

谷歌已推送 Android Q Beta 1

开发四年只会写业务代码&#xff0c;分布式高并发都不会还做程序员&#xff1f; >>> 今日凌晨&#xff0c;谷歌正式推送了 Android Q 的首个 Beta 版本&#xff0c;Pixel 全系列手机可以尝鲜体验这款最新的系统。 据官方博客介绍&#xff0c;Android Q 为用户带来了…

对使用CodeSmith模板生成NHibernate的代码的分析

CodeSmith是我们常用的代码生成工具&#xff0c;其跟据不同的模板生成不同代码的方式能大大加快我们的项目开发&#xff0c;减少重复劳动。NHibernate模板就是其常用模板之一。从这里可以下载到最新的模板文件。现在最新的版本为NHibernate-v1.2.1.2125&#xff0c;可以生成NHi…

若川诚邀你加源码共读群,每周一起学源码

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

matlab 规范,matlab-代码-规范

matlab-代码-规范 1. 标识符命名原则 标识符的名字应当直观&#xff0c;其长度应当符合“最小长度&#xff0c;最大信息量”原则。 1) 非矩阵变量&#xff1a; 变量名应该以小写字母开头的大小写混合形式 譬如&#xff1a;shadowFadingTable&#xff0c;servingSector&#xf…

zoom视频会议官网_人性化视频会议的空间(Zoom等)

zoom视频会议官网第二部分&#xff1a;房间的创造力 (Part Two: The Creativity of Rooms) In Part One I shared thoughts on how virtual spaces can often leave little room to embody our most human selves. The lack of a public sphere that parallels our shared publ…