首页 > 计算机应用 > PJBLOG优化之友情链接滚动效果实现

PJBLOG优化之友情链接滚动效果实现

你是不是觉得友情链接太多了从而导致页面放不下呢?
那你可以试一下下面的代码,可以让友情链接十分轻松的滚动,不用考虑友情链接太多从而占据了页面的空间。
操作过程是点击后台管理——界面与插件————设置模块,点击links,编辑HTML,里面的源代码是这样的
<div class=”LinkTable”>$Link_Code$ </div>
<div align=”right”><a href=”bloglink.asp”>点击这里交换链接… </a></div>
我们稍微改一下,加些东西进去,把里面原来的代码变成如下内容(注意是替换而不是添加)

复制内容到剪贴板程序代码程序代码
<div id=“link_logo” style=“OVERFLOW: hidden; HEIGHT: 200px”>
<div id=“link_logo1” class=“LinkTable”>$Link_Code$ </div>

<div id=“link_logo2”></div></div>
<script language=“javascript” type=“text/javascript”>
<!
var speed=65
link_logo2.innerHTML=link_logo1.innerHTML
function Marquee2(){
if(link_logo2.offsetToplink_logo.scrollTop<=0)
{
link_logo.scrollTop=link_logo1.offsetHeight
}
else{
link_logo.scrollTop++
}
}
var MyMar2=setInterval(Marquee2,speed)
link_logo.onmouseover=function() {clearInterval(MyMar2)}
link_logo.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
>
</script>
<div align=“right”><a href=“bloglink.asp”>点击这里交换链接… </a></div>

还有一种样式代码:

复制内容到剪贴板程序代码程序代码
<div align=“left” id=“demo” style=“overflow:hidden;height:148px;”>
<div id=“demo1”>
<! 定义内容>
$Link_Code$
</div>
<div id=“demo2”></div>
</div>
<div align=“right”><a href=“bloglink.asp”>更多友链… </a></div>

<script language=“javascript” type=“text/javascript”>
<!
var demo = document.getElementById(“demo”);
var demo1 = document.getElementById(“demo1”);
var demo2 = document.getElementById(“demo2”);
var speed=60; //滚动速度值,值越大速度越慢
demo2.innerHTML = demo1.innerHTML     //克隆demo2为demo1
function Marquee(){
if(demo2.offsetTopdemo.scrollTop<=0) //当滚动至demo1与demo2交界时
demo.scrollTop=demo1.offsetHeight     //demo跳到最顶端
else{
demo.scrollTop++
}
}
var MyMar = setInterval(Marquee,speed); //设置定时器
demo.onmouseover = function(){clearInterval(MyMar)} //鼠标经过时清除定时器达到滚动停止的目的
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)} //鼠标移开时重设定时器
>
</script>

保存,再刷新博客首页即可看到效果。
博主0point注:此方法似乎有一个BUG:在首页滚动一段时间后就会停止滚动,有技术达人望能解决。

转载请尊重版权,出处:秋天博客
本文链接: https://www.cfresh.net/pc-tech/337

  1. 还没有评论
评论提交中, 请稍候...

留言



注意: 您给他人的评论回复将通过邮件通知到对方。

可以使用的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
Trackbacks & Pingbacks ( 0 )
  1. 还没有 trackbacks