经典的间隔时间滚动新闻（图片），可控制滚动

经典的间隔时间滚动新闻（图片），可控制滚动

*{margin:0;padding:0;border:0;list-style:none;}
body{font:12px Verdana, Geneva, sans-serif;line-height:18px;color:#333;}
a{text-decoration:none;color:#004285;font-size:14px;font-weight:bold;}
a:hover{text-decoration:underline;color:#C33;}
.rig{border:1px solid #dedede;width:282px;margin-bottom:5px;position:relative;background:#fff;}
#qy a{font-size:12px;}
h5 span a{font-size:12px;font-weight:normal;color:#333;}
h5{padding:0 10px;font-size:14px;height:30px;line-height:30px;background:url(/upload/201005/20100530223157155.jpg?1259835263) left center repeat-x;border-bottom:1px solid #dedede;}
span{float:right;}

更多>>精彩企业专题

#btm{position:absolute;right:0;top:60px;width:12px;height:43px;background:url(/upload/201005/20100530223157574.gif) no-repeat;overflow:hidden;}
#btm a{display:block;height:22px;}
#btm a#up:hover{background:url(/upload/201005/20100530223157574.gif) -13px top no-repeat;}
#btm a#dw:hover{background:url(/upload/201005/20100530223157574.gif) -26px -22px no-repeat;}

var qoMarquee = document.getElementById("qy"); //滚动对象
var tab1 = document.getElementById("tab1");
var tab2 = document.getElementById("tab2");
var qiLineHeight = 94;//单行高度，像素IE
var qiLineCount = 0; //实际行数
var qiScrollAmount = 2; //每次滚动高度，像素（速度）
var speed1=3000;//每次停留时间
var speed2=1;//滚动速度
var num=qoMarquee.getElementsByTagName('img').length;//总数
tab2.innerHTML=tab1.innerHTML;
var alink=document.getElementById('btm').getElementsByTagName('a');
for(var i=0;i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • jQuery实现自动与手动切换的滚动新闻特效代码分享

    jQuery实现自动与手动切换的滚动新闻特效代码分享

    本文实例讲述了jQuery实现滚动新闻特效.分享给大家供大家参考.具体如下: jQuery实现滚动新闻代码是一款基于bootstrup 3实现的响应式jQuery滚动新闻插件.有三种展示新闻的方式,自动向下循环展示,自动向上循环展示以及手动循环展示,总有一款适合你的. 运行效果图:                                -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式.

  • WinForm实现仿视频播放器左下角滚动新闻效果的方法

    本文实例讲述了WinForm实现仿视频播放器左下角滚动新闻效果的方法.分享给大家供大家参考.具体实现方法如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using Syst

  • 基于jquery的滚动新闻列表

    基于jquery的滚动新闻列表

    呵呵,效果图如下:   ps:gif做的不是很好,大家将就一下吧,呵呵. 下面来看代码: 复制代码 代码如下: <div class="news-container" style="width: 260px; margin: auto;"> <ul> <li style="height:40px"> <!--这里可以换成是动态的新闻--> <a href="NewsRead.aspx

  • jQuery实现列表自动滚动循环滚动展示新闻

    jQuery实现列表自动滚动循环滚动展示新闻

    需要在页面中一个小的区域循环滚动展示新闻(公告.活动.图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动. 效果图: 上干货 html: 复制代码 代码如下: <div id="news"> <ul> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofol

  • jQuery循环滚动新闻列表示例代码

    最近由于项目原因,学习了下jquery,实现了一个小小的功能,就是点击公告的上一条下一条来查看滚动条.具体代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta ht

  • 用Jquery实现滚动新闻

    此文主要用Jquery实现滚动新闻,如此少的代码就能实现这个功能真的是不由得感叹Jquery的强大功能. 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication244.Default" %> <!DOCTYPE html PUBLIC "

  • javaScript实现滚动新闻的方法

    本文实例讲述了javaScript实现滚动新闻的方法.分享给大家供大家参考.具体如下: rolling_new.html页面如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </ti

  • Flash+XML滚动新闻代码 无图片 附源码下载

    用flash实现读取新闻连接的代码,方便一个50高度的地方显示外部连接,不错的黑色效果index.html 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="Copyright" content="我们 http://www.jb5

  • 经典的间隔时间滚动新闻（图片），可控制滚动

    经典的间隔时间滚动新闻（图片），可控制滚动

    经典的间隔时间滚动新闻(图片),可控制滚动 *{margin:0;padding:0;border:0;list-style:none;} body{font:12px Verdana, Geneva, sans-serif;line-height:18px;color:#333;} a{text-decoration:none;color:#004285;font-size:14px;font-weight:bold;} a:hover{text-decoration:underline;co

  • jQuery左右滚动支持图片放大缩略图图片轮播代码分享

    jQuery左右滚动支持图片放大缩略图图片轮播代码分享

    本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果,常用的jQuery图片左右轮播效果,同时支持底部缩略图左右滚动展示,点击大图片后支持放大效果. 运行效果图:                                     -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大

  • javascript实现图片左右滚动效果【可自动滚动，有左右按钮】

    本文实例讲述了javascript实现图片左右滚动效果.分享给大家供大家参考,具体如下: html代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <

  • Android高仿京东垂直循环滚动新闻栏

    Android高仿京东垂直循环滚动新闻栏

    实现思路其实很简单,就是一个自定义的LinearLayout,并且textView能够循环垂直滚动,而且条目可以点击,显示区域最多显示2个条目,并且还有交替的属性垂直移动的动画效果,通过线程来控制滚动的实现. 不多说看效果: 代码实现 我们先来为控件设置自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="JDAdv

  • 基于JQuery打造无缝滚动新闻步骤详解

    本文实例讲述了基于JQuery打造无缝滚动新闻的方法.分享给大家供大家参考,具体如下: 首先,我们这里有这么一段html代码,很简洁,如下所示: <ul> <li>你说我是好人吗,我是好人啊</li> <li>哈哈,我真的不知道说什么了</li> <li>生活就是应该平淡的</li> <li>像上学一样的工作</li> </ul> </div> 然后我们要做的就是使它无缝滚动

  • Jquery实现图片左右自动滚动示例

    复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <title>基于jQuery的控制左右滚动效果_自动滚动版本</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <style> body{font-size:0.8em;l

  • jQuery动画效果实现图片无缝连续滚动

    jQuery动画效果实现图片无缝连续滚动

    本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下 效果图如下: 一.HTML代码 <body> <div id="container"> <ul id="content"> <li><a href="#"><img src="images/0.png"/></a></li> <

  • 原生js页面滚动延迟加载图片

    本文实例为大家讲解了javascript瀑布流代码,即js页面滚动延迟加载图片,分享给大家供大家参考,具体代码如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生Js页面滚动延迟加载图片</title> <style t

随机推荐