zoukankan      html  css  js  c++  java
  • 一组图片+文字向上滚屏特效代码

    代码简介:

    一组图片成批向上滚屏特效,在新浪、QQ网经常会看到这种特效。实际上是运用了Iframe嵌入页面,也就类似于DIV区域,这个用的时候尽量改成DIV,IFRAME有很多不太好的地方,希望你喜欢。

    代码内容:

    View Code
    <html>
    <head>
    <title>一组图片+文字向上滚屏特效代码 - www.webdm.cn</title>

    <SCRIPT language=JavaScript>
    var dde_para = new Array();
    var dde_aa = new Array();
    var dde_url = document.location.href;
    var dde_pp = dde_url.split("#")[1];
    var jspfile = 1;
    var para = null;

    //滚动页面的宽
    var scrollwidth = 705;

    //滚动页面的高
    var scrollheight = 120;

    if(dde_pp!=null&& dde_pp.length>0){
    dde_para
    = dde_pp.split("&");}
    for(i=0; dde_para!=null&& i<dde_para.length;i++){
    dde_aa
    = dde_para[i].split("=");
    eval(
    "var "+dde_aa[0] +"='"+dde_aa[1]+"'");}
    var car_num = 5;
    var i=1;
    //默认滚动时间10秒
    var pausebetweenimages=800 * 8;
    var slideimages=new Array();
    //滚动页面1的URL
    slideimages[0]="<iframe border=0 vspace=0 hspace=0 bgcolor=#888888 Name=union163com align=center marginwidth=0

    marginheight=0 framespacing=0 frameborder=0 scrolling=no width=
    "+scrollwidth+" height="+scrollheight+"

    src='http://news.qq.com/photon/08photojdlm1.htm'></iframe>
    ";
    //滚动页面2的URL
    slideimages[1]="<iframe border=0 vspace=0 hspace=0 bgcolor=#888888 Name=union163com align=center marginwidth=0

    marginheight=0 framespacing=0 frameborder=0 scrolling=no width=
    "+scrollwidth+" height="+scrollheight+"

    src='http://news.qq.com/photon/08photojdlm2.htm'></iframe>
    ";
    function move1(whichdiv){
    tdiv
    =eval(whichdiv)
    if (tdiv.style.pixelTop>0 && tdiv.style.pixelTop<=car_num){
    tdiv.style.pixelTop
    =0
    setTimeout(
    "move1(tdiv)",pausebetweenimages)
    setTimeout(
    "move2(second2)",pausebetweenimages)
    return}
    if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
    tdiv.style.pixelTop
    -=car_num
    setTimeout(
    "move1(tdiv)",50)}
    else{
    tdiv.style.pixelTop
    =scrollheight
    tdiv.innerHTML
    =slideimages[0]
    if (i==slideimages.length-1)
    i
    =0
    else i++}}
    function move2(whichdiv){
    tdiv2
    =eval(whichdiv)
    if (tdiv2.style.pixelTop>0 && tdiv2.style.pixelTop<=car_num){
    tdiv2.style.pixelTop
    =0
    setTimeout(
    "move2(tdiv2)",pausebetweenimages)
    setTimeout(
    "move1(first2)",pausebetweenimages)
    return}
    if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
    tdiv2.style.pixelTop
    -=car_num
    setTimeout(
    "move2(second2)",50)}
    else{
    tdiv2.style.pixelTop
    =scrollheight
    tdiv2.innerHTML
    =slideimages[1]
    if (i==slideimages.length-1)
    i
    =0
    else i++}}
    function conmouse(){car_num=0;}
    function cmouseout(){car_num=5;}
    function startscroll(){
    if (document.all){
    move1(first2)
    second2.style.top
    =scrollheight
    }
    else if (document.layers){
    move1(document.main.document.first)
    document.main.document.second.top
    =scrollheight+5
    document.main.document.second.visibility
    ='show'}}
    //-->
    </SCRIPT>
    <ILAYER id=main height=" && #123;scrollheight};"
    width
    =" && #123;scrollwidth};">
    <LAYER name="first" left="0"
    top
    ="1" width=" && #123;scrollwidth};" id=first>
    <SCRIPT language=JavaScript1.2>
    if (document.layers)
    document.write(slideimages[
    0])
    </SCRIPT>
    </LAYER>
    <LAYER id=second width=" && #123;scrollwidth};" top="0" left="0"
    visibility
    ="hide">
    <SCRIPT language=JavaScript1.2>
    if (document.layers)
    document.write(slideimages[
    1])
    </SCRIPT>
    </LAYER>
    </ILAYER>
    <script language=JavaScript1.2>
    if (document.all){
    document.writeln(
    '<span id="main2" style="position:relative;'+scrollwidth+';height:'+scrollheight

    +';overflow:hiden;background-color:#ffffff">')
    document.writeln(
    '<div onMouseOver="conmouse()" onMouseOut="cmouseout()"

    style="position:absolute;
    '+scrollwidth+';height:'+scrollheight+';clip:rect(0 '+scrollwidth+' '+scrollheight+'

    0);left:0;top:0">
    ')
    document.writeln(
    '<div id="first2" style="position:absolute;'+scrollwidth+';left:0;top:1;">')
    document.write(slideimages[
    0])
    document.writeln(
    '</div>')
    document.writeln(
    '<div id="second2" style="position:absolute;'+scrollwidth+';left:0;top:0">')
    document.write(slideimages[
    1])
    document.writeln(
    '</div>')
    document.writeln(
    '</div>')
    document.writeln(
    '</span>')}
    startscroll();
    </script>
    </head>
    <body>
    在新浪、QQ网经常会看到这种特效。
    </body>
    </html>
    <br />
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!

    </p>

    代码来自:http://www.webdm.cn/webcode/f2d731fc-5bd2-4d0b-a6ff-509c16d426e0.html

  • 相关阅读:
    2019 年值得关注的 23 个开发者博客
    牛津词典 2018 年度词汇 ——「有毒」!
    17 个关于雪花的有趣事实🌨❄️❄️❄️
    Google 里的软件工程学
    作为软件工程师,如何进行知识管理
    x == (x = y) 不等于 (x = y) == x ?
    Docker-compose编排微服务顺序启动
    Ubuntu 20.04 修改字体、调整缩放
    How To Upgrade Ubuntu To 20.10
    写给工程师的 Ubuntu 20.04 最佳配置指南
  • 原文地址:https://www.cnblogs.com/webdm/p/2308588.html
Copyright © 2011-2022 走看看