滚动显示友情链接

1、原理：利用 overflow: hidden;属性只显示一行，调整scrollTop达到滚动目的

<style type="text/css">
.linkDiv {
  width: 870px;
  height: 20px;
  line-height: 20px;
  float: left;
  overflow: hidden;
}
</style>
<div class="friendLink">
    <h3>友情链接：</h3>
    <div id="flink" class="linkDiv">
                <a href="#/" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#/" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#/" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
                    </div>
</div><br/>
<h3>ddddd</h3>
<script type="text/javascript">
    var fscroll = document.getElementById("flink");
    var fheight = fscroll.scrollHeight;
    //fscroll.innerHTML += fscroll.innerHTML;
    function friendScroll() {
        fscroll.scrollTop ++;
        if(fscroll.scrollTop >= fscroll.scrollHeight-20) fscroll.scrollTop=0;
    }
    var MyMar=window.setInterval(friendScroll,100);
    fscroll.onmouseover=function() {clearInterval(MyMar)};
    fscroll.onmouseout=function() {MyMar=setInterval(friendScroll,100)};
</script>

时间： 2024-11-01 11:38:33

滚动显示友情链接的相关文章

External Links Module 友情链接模块

External Links Module 友情链接模块 External Links Module 友情链接模块 2 评价 | 如果您对本商品有什么问题或经验,请在此留下您的意见和建议! 型号: COC-A0007 ￥90.00 税前: ￥90.00购买所需积分: 60 购买数量: +- * 扩充功能安装: --- 请选择 --- 自己安装

HTML基础——网站友情链接显示页面

1.列表标签有序列表:type默认是1,2,3--,reserved指降序排列 <ol type="I" start="" reversed="reversed"> <li></li> </ol> 无序列表:type默认是disc <ul type=""> <li></li> </ul> 2.超链接标签 <a href=&q

dedecms友情链接首页不显示LOGO图片处理方法

dedecms友情链接首页不显示LOGO图片处理方法如下: 进入后台--系统设置---默认模板管理,找到主页模块 index.htm,点修改, 把下面代码: <strong>友情链接</strong> <span class="more"> <a href="plus/flink.php">所有链接</a> | <a href="plus/flink_add.php">申请加

在我们建设网站的过程中有一个程序是我们经常用到的,那就是织梦CMS信息管理系统,这是一个很强大的开源程序,企业站.门户站都可以用他做,但是当我们的织梦程序网站在跟别人换友情链接的时候,我们奇怪的发现当我们的友情链接加到第25个的时候,发现第25个链接无论怎么更新都不显示,很多新手对这个问题很困扰,甚至导致互相换友情的不信任,别人会认为你把链接给隐藏了,造成很多误会,几天就给大家分享几个攻略来解决这个让人情何以堪的友情链接问题.一.修改织梦友情链接的显示个数和每个连接的字数限制默认的织梦的友情链接

友情链接的添加保存

linkaddsave.php (保存php页面) 1 <?php 2 include '../inc/db_mysqli.php'; 3 $ty = $_POST['ty']; 4 if($ty=='Y'){ 5 //纯文字友情链接,不用保存图片 6 $stmt = $m->prepare('insert into hnsc_link(ltype,title,url,flag,atime) values(?,?,?,?,?)'); 7 $stmt->bind_param('ssssi'

dedecms友情链接flink的调用方法

标记名称:flink [标签简介] [功能说明]:用于获取友情链接,其对应后台文件为"includetaglibflink.lib.php". [适用范围]:全局标记,适用V55,V56,V57. [参数说明]: [1]type:链接类型,值: a. textall 全部用文字显示; b. textimage 文字和图得混合排列; c. text 文字链接,仅显示不带Logo的链接; d. image 图片链接,仅显示带Logo的链接. ------------------------

WordPress制作圆形头像友情链接页面的方法

网上看见过很多种友情链接页面,我比较喜欢的是圆形头像的这种,先看看效果吧:传送门就是这种上面是圆形的友链用户头像,下面是友链用户网站名,然后鼠标移上去头像会旋转,怎么实现这种效果呢?我在网上找了很多都不是很详细,于是打算自己写一篇文章方便大家: 操作之前先看看我的另外两篇文章:[这两篇文章很重要,网上很多的方法不详细就是少了很多的步骤] 1.WordPress设置圆形旋转头像的方法这个里面的功能有很多,但是在这里我叫你们查看这篇文章主要是为了利用里面设置友链用户头像大小,不操作这一步的话设置

DEDECMS中，友情链接

友情链接:dede:flink {dede:flink row='24' type='image' titlelen="24" typeid="0"} [field:link /] {/dede:flink} type:链接类型,值: a. textall 全部用文字显示: b. textimage 文字和图得混合排列: c. text 文字链接,仅显示不带Logo的链接: d. image 图片链接,仅显示带Logo的链接. row:链接调用数量. linktyp

数据绑定控件LiisView制作的网站友情链接管理

客户端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FriendLinks.aspx.cs" Inherits="ListView控件的绑定.FriendLinks" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h