javascript写的新闻滚动代码

　　在企业站中，我们会看到很多新闻列表很平滑的滚动，但是这种功能自己写太浪费时间，下面是我整理好的一组很常用的新闻列表滚动，有上下分页哦！

1.body里面

 <div class="tz_tagcgnewcontent">

   <div id="feature-slide-block">

     <div class="tz_newlist">

       <div class="tz_newimg"><img src="data:images/tz_img03.jpg" /></div>

       <div class="tz_newcontent">

         <!--新闻标题只显示2行 截取字符串-->

         <div class="tz_newtitle">为什么说腾讯的兴趣社交必然失败1？</div>

         <!--新闻内容只显示3行 截取字符串-->

         <div class="tz_newdes">腾讯基于强联系的社交关系很难能成为兴趣社交的基石，或许这次尝试将会成为腾讯在社交领域继腾讯微博之后的又一次失败。</div>

       </div>

     </div>

     <div class="tz_newlist" style="display: none; ">

       <div class="tz_newimg"><img src="data:images/tz_img03.jpg" /></div>

       <div class="tz_newcontent">

         <!--新闻标题只显示2行 截取字符串-->

         <div class="tz_newtitle">为什么说腾讯的兴趣社交必然失败2？</div>

         <!--新闻内容只显示3行 截取字符串-->

         <div class="tz_newdes">腾讯基于强联系的社交关系很难能成为兴趣社交的基石，或许这次尝试将会成为腾讯在社交领域继腾讯微博之后的又一次失败。</div>

       </div>

     </div>

     <div class="tz_newlist" style="display: none; ">

       <div class="tz_newimg"><img src="data:images/tz_img03.jpg" /></div>

       <div class="tz_newcontent">

         <!--新闻标题只显示2行 截取字符串-->

         <div class="tz_newtitle">为什么说腾讯的兴趣社交必然失败3？</div>

         <!--新闻内容只显示3行 截取字符串-->

         <div class="tz_newdes">腾讯基于强联系的社交关系很难能成为兴趣社交的基石，或许这次尝试将会成为腾讯在社交领域继腾讯微博之后的又一次失败。</div>

       </div>

     </div>

     <div class="tz_newlist" style="display: none; ">

       <div class="tz_newimg"><img src="data:images/tz_img03.jpg" /></div>

       <div class="tz_newcontent">

         <!--新闻标题只显示2行 截取字符串-->

         <div class="tz_newtitle">为什么说腾讯的兴趣社交必然失败4？</div>

         <!--新闻内容只显示3行 截取字符串-->

         <div class="tz_newdes">腾讯基于强联系的社交关系很难能成为兴趣社交的基石，或许这次尝试将会成为腾讯在社交领域继腾讯微博之后的又一次失败。</div>

       </div>

     </div>

     <div id="feature-slide-list" class="tz_newpage"> <a href="#" id="feature-slide-list-previous" class="tz_newpre"></a>

       <div id="feature-slide-list-items" class="tz_newpg"> </div>

       <a href="#" id="feature-slide-list-next" class="tz_newnext"></a> </div>

   </div>

   <script type="text/javascript">

       initFeatureSlide();

   </script>

 </div>

2.样式

 .tz_tagcgnewcontent{ width:680px; height:230px; overflow:hidden; position:relative;}

 .tz_newlist{ width:680px; height:230px; overflow:hidden; float:left;}

 .tz_newimg{ width:380px; height:228px; overflow:hidden; float:left; margin:10px 20px 0 0;}

 .tz_newimg img{ width:380px; height:228px; overflow:hidden;}

 .tz_newcontent{ width:270px; height:228px; overflow:hidden; float:left; margin:10px 0 0 0;}

 .tz_newtitle{ width:100%; height:84px; overflow:hidden; line-height:34px; border-bottom:1px dashed #d2d0d1; font-size:24px; color:#333;}

 .tz_newdes{ width:100%; height:68px; overflow:hidden; line-height:23px; color:#666; margin-top:16px;}

 .tz_newpage{ width:100px; height:17px; overflow:hidden; position:absolute; bottom:10px; right:100px;}

 .tz_newpre{ width:17px; height:17px; overflow:hidden; float:left; background:url(../images/tz_bj04.png) no-repeat;}

 .tz_newpre:hover{ background:url(../images/tz_bj04.png) no-repeat -34px 0;}

 .tz_newpg{ width:56px; height:7px; overflow:hidden; margin:5px 0 0 10px; float:left;}

 .tz_newpg a{ width:7px; height:7px; overflow:hidden; display:block; float:left; margin-right:5px; background:url(../images/tz_bj03.png) no-repeat;}

 .tz_newpg a:hover{ background:url(../images/tz_bj03.png) no-repeat -7px 0;}

 .tz_newpg a.current{ background:url(../images/tz_bj03.png) no-repeat -7px 0;}

 .tz_newnext{ width:17px; height:17px; overflow:hidden; float:right; background:url(../images/tz_bj04.png) no-repeat -17px 0;}

 .tz_newnext:hover{ background:url(../images/tz_bj04.png) no-repeat -51px 0;}

3.javascript

 function initFeatureSlide(strId) {

     var domRoot = document.getElementById('feature-slide-block');

     if (!domRoot) return;

     domRoot.list = [];

     var children = domRoot.childNodes;

     var offset = 0;

     for (var i in children) {

         var domItem = children[i];

         if (domItem && domItem.className == 'tz_newlist') {

             domRoot.list.push(domItem);

             domItem.offset = offset;

             offset++;

         }

     }

     var domList = document.getElementById('feature-slide-list-items');

     if (!domList) return;

     domList.innerHTML = '';

     domList.items = [];

     for (var i = 0; i < domRoot.list.length; i++) {

         var temp = domRoot.list[i];

         var domItem = document.createElement('a');

         domList.appendChild(domItem);

         domItem.href = '#';

         domItem.onclick = function(){

             return false;

         }

         domList.items.push(domItem);

         domItem.offset = i;

     }

     var domPreviousBtn = document.getElementById('feature-slide-list-previous');

     var domNextBtn = document.getElementById('feature-slide-list-next');

     domPreviousBtn.onclick = function(evt) {

         evt = evt || window.event;

         var target = evt.target || evt.srcElement;

         var offset = domList.current.offset;

         offset--;

         if (offset >= domList.items.length || offset < 0)

             offset = domList.items.length - 1;

         target.blur();

         doSlide(offset);

         return false;

     }

     domNextBtn.onclick = function(evt) {

         evt = evt || window.event;

         var target = evt.target || evt.srcElement;

         var offset = domList.current.offset;

         offset++;

         if (offset >= domList.items.length || offset < 0)

             offset = 0;

         target.blur();

         doSlide(offset);

         return false;

     }

     domRoot.current = domRoot.list[0];

     domList.current = domList.items[0];

     domRoot.current.style.display = 'block';

     domList.current.className = 'current';

     function doSlide(offset, timeStamp) {

         if (

             timeStamp &&

             (

                 domRoot.boolHover ||

                 timeStamp != domRoot.timeStamp

                 )

                 ) return;

         if (typeof(offset) != 'number') {

             offset = domList.current.offset - (-1);

             if (offset >= domList.items.length || offset < 0)

                 offset = 0;

         }

         domRoot.current.style.display = 'none';

         domList.current.className = '';

         domRoot.current = domRoot.list[offset];

         domList.current = domList.items[offset];

         domRoot.current.style.display = 'block';

         domList.current.className = 'current';

         if (domRoot.boolHover) return;

         var now = new Date();

         domRoot.timeStamp = now.valueOf();

         window.setTimeout(function() {

             doSlide(null, now.valueOf());

         }, 5000);

     }

     domList.onmouseover = domList.onclick = function (evt) {

         evt = evt || window.event;

         var target = evt.target || evt.srcElement;

         while (target && target != domList) {

             if (target.tagName.toLowerCase() == 'a') {

                 target.blur();

                 doSlide(target.offset);

                 return false;

             }

             target = target.parentNode;

         }

     }

     domRoot.onmouseover = domRoot.onmousemove = function() {

         domRoot.boolHover = true;

     }

     domRoot.onmouseout = function(evt) {

         domRoot.boolHover = false;

         var now = new Date();

         domRoot.timeStamp = now.valueOf();

         window.setTimeout(function() {

             doSlide(null, now.valueOf());

         }, 5000);

     }

     var now = new Date();

     domRoot.timeStamp = now.valueOf();

     window.setTimeout(function() {

         doSlide(null, now.valueOf());

     }, 5000);

 }

这段代码能用，但是可以优化的地方还有很多，大家可以提提意见

javascript写的新闻滚动代码的更多相关文章

JavaScript写倒计时
在网页中,特别是电商网站中,倒计时的出现频率很高,接下来给大家介绍一下怎么用JavaScript写一个倒计时.代码如下: 首先我们通过Date构造函数的方法创建一个倒计时的结束的时间.并将其转换为毫秒 ...
html+css+javascript实现列表循环滚动示例代码
使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下说明:设置时间定时,在规定的时间内替换前一个节点的内 ...
多行滚动jQuery循环新闻列表代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
使用JavaScript实现新闻滚动效果
最近要实现一个滚动新闻效果,在网上查了一些资料,发现基本的实现方法有两种: 使用Marquee标签.这个标签的使用我已经转载了一篇比较详细的文章,这个标签的优点是便于使用,缺点是人们已经逐渐不适用它了 ...
javascript 写一段代码，判断一个字符串中出现次数最多的字符串，并统计出现的次数
javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数 function test(){ var bt = document.getElementById(" ...
HTML滚动字幕代码参数详解及Js间隔滚动代码
html文字滚动代码 <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" dire ...
原生javascript写的侧栏跟随效果
浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...
微信小程序调用后台接口+热点新闻滚动展示
1.微信JS文件,发送请求调用: //将返回接口数据,写入Page({data})里面 //获取热点新闻,这个也是写在onload:function(){//code)里面的 wx.request( ...
Js上下左右无缝隙滚动代码
转载:http://www.cnblogs.com/chenjt/p/4193464.html 主要用到dom.offsetWidth 这个表示实际的宽度. dom.scrollLeft 这个表示这个 ...

随机推荐

linux修改密码
情景:Linux 服务器上用户的密码被服务器管理员发现太过简单,需要重置密码.处理时为了方便记忆,就直接使用普通用户登录,修改密码时,在原密码的基础上增加一串特定的数字,结果提示不通过.例如出现错误提 ...
Python基础第四天
必须掌握的内置函数 bytes() divmod() eval() exec() isinstance() range() 常用函数 1.数学相关 abs(x) abs()返回一个数字的绝对值.如果给 ...
cocos2d-js 入门一（[isNaN()和isFinite()，字符和Number之间的转化）
isNaN() : 用于检查其参数是否是非数字值.// 提示:是非数字哦.(not a number)document.write(isNaN(0) ) //返回falsedocument.writ ...
Monkey and Banana（HDU 1069 动态规划）
Monkey and Banana Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
bzoj 3238 Ahoi2013 差异
3238: [Ahoi2013]差异 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 2357 Solved: 1067[Submit][Status ...
LeetCode_Subsets
Given a set of distinct integers, S, return all possible subsets. Note: Elements in a subset must be ...
c# aes 加密解密
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
Android学习总结——Popup menu：弹出式菜单
PopupMenu,弹出菜单,一个模态形式展示的弹出风格的菜单,绑在在某个View上,一般出现在被绑定的View的下方(如果下方有空间). 注意:弹出菜单是在API 11和更高版本上才有效的. 核心步 ...
LR使用Java User协议环境报错Please add the <JDK>\bin to the path and try again
看标题报错信息就知道,这是java编译及运行环境配置问题,运行LR脚本时,LR代理找不到java的JDK环境,当然,可能有人会遇到说,我在cmd窗口javac 环境是没问题的呀,是的,这就要看你的jd ...
Hacker（十一）----黑客常用入侵方法
Internet中,为了防止黑客入侵自己的电脑,就必须了解黑客入侵目标计算机的常用方法.黑客常用的入侵方法有数据驱动攻击.系统文件非法利用.伪造信息攻击.远端操纵等. 一.数据驱动攻击数据驱动攻击是 ...

javascript写的新闻滚动代码

javascript写的新闻滚动代码的更多相关文章

随机推荐

热门专题