zoukankan      html  css  js  c++  java
  • 图片横向移动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    HTML {
        PADDING-RIGHT: 0px;
        PADDING-LEFT: 0px;
        FONT-SIZE: 12px;
        BACKGROUND: #fff;
        PADDING-BOTTOM: 0px;
        MARGIN: 0px;
        PADDING-TOP: 0px;
        FONT-FAMILY: "Arial", "Helvetica", "sans-serif";
        TEXT-ALIGN: center
    }
    BODY {
        PADDING-RIGHT: 0px;
        PADDING-LEFT: 0px;
        BACKGROUND: #fff;
        PADDING-BOTTOM: 0px;
        MARGIN: 0px auto;
        WIDTH: 1003px;
        PADDING-TOP: 0px
    }
    A:link {
        FONT-SIZE: 12px;
        COLOR: #464646;
        TEXT-DECORATION: none
    }
    A:visited {
        FONT-SIZE: 12px;
        COLOR: #464646;
        TEXT-DECORATION: none
    }
    A:active {
        FONT-SIZE: 12px;
        COLOR: #000000;
        TEXT-DECORATION: underline
    }
    A:hover {
        FONT-SIZE: 12px;
        COLOR: #000000;
        TEXT-DECORATION: underline
    }
    .box_border {
        BORDER-RIGHT: #dcdddf 1px solid;
        BORDER-TOP: #dcdddf 1px solid;
        MARGIN-TOP: 1px;
        BACKGROUND: #fff;
        BORDER-LEFT: #dcdddf 1px solid;
        WIDTH: 989px;
        BORDER-BOTTOM: #dcdddf 1px solid;
        TEXT-ALIGN: left
    }
    .tj {
        PADDING-RIGHT: 10px;
        PADDING-LEFT: 10px;
        BACKGROUND: #f3f4f6;
        PADDING-BOTTOM: 10px;
        WIDTH: 969px;
        PADDING-TOP: 10px;
        TEXT-ALIGN: left
    }
    .tj LI {
        BORDER-RIGHT: #dcdddf 1px solid;
        PADDING-RIGHT: 3px;
        BORDER-TOP: #dcdddf 1px solid;
        PADDING-LEFT: 3px;
        BACKGROUND: #fff;
        FLOAT: left;
        PADDING-BOTTOM: 3px;
        MARGIN: 0px;
        OVERFLOW: hidden;
        BORDER-LEFT: #dcdddf 1px solid;
        WIDTH: 150px;
        PADDING-TOP: 3px;
        BORDER-BOTTOM: #dcdddf 1px solid;
        WHITE-SPACE: nowrap;
        LIST-STYLE-TYPE: none;
        TEXT-ALIGN: center;
        lfist-style-position: outside
    }
    .tj IMG {
        BORDER-TOP-WIDTH: 0px;
        BORDER-LEFT-WIDTH: 0px;
        BORDER-BOTTOM-WIDTH: 0px;
        WIDTH: 150px;
        HEIGHT: 178px;
        BORDER-RIGHT-WIDTH: 0px
    }
    .clear {
        CLEAR: both;
        FONT-SIZE: 1px;
        VISIBILITY: hidden;
        WIDTH: 1px;
        LINE-HEIGHT: 1px
    }
    .clear6 {
        CLEAR: both;
        FONT-SIZE: 1px;
        VISIBILITY: hidden;
        WIDTH: 1px;
        LINE-HEIGHT: 6px
    }
    </style>
    </head>
    
    <body scroll="no">
    <DIV class=box_border>
      <div id=demo style="OVERFLOW: hidden; WIDTH: 990px; COLOR: #ffffff">
        <table cellspacing=1 cellpadding=0 width=990 align=center bgcolor=#ffffff
    border=0>
          <tbody>
            <tr>
              <td id=demo1 align=middle><table cellspacing=0 cellpadding=3 width="100%" border=0>
                  <tbody>
                    <tr>
                      <td class=tj align=middle width=150><li><a href="#"><img
                src="nygxcn/images/ad1.png"></a><br>
                          <a
                href="#">男人帮Amaia比基尼杂志照</a></li></td>
                      <td class=tj align=middle width=150><li><a href="#"><img
                src="nygxcn/images/ad3.png"></a><br>
                          <a
                href="#">Leah Dizon写真壁纸</a></li></td>
                      <td class=tj align=middle width=150><li><a href="#"><img
                src="nygxcn/images/buy.png"></a><br>
                          <a
                href="#">世界环保裸骑大赛</a></li></td>
                      <td class=tj align=middle width=150><li><a href="#"><img
                src="nygxcn/images/content_img.png"></a><br>
                          <a
                href="#">11位明星热辣泳装大比拼</a></li></td>
                      <td class=tj align=middle width=150><li><a href="#"><img
                src="nygxcn/images/footerpic.png"></a><br>
                          <a
                href="#">比基尼性感也要与众不同</a></li></td>
                      <td class=tj align=middle width=150><li><a href="#"><img
                src="nygxcn/images/joinShop.png"></a><br>
                          <a
                href="#">Armani闲妆淡匀
                          唇“色”出彩</a></li></td>
                      <td class=tj align=middle width=150><li><a href="#"><img
                src="nygxcn/images/buy.png"></a><br>
                          <a
                href="#">花湖:又寂寞,又美丽</a></li></td>
                    </tr>
                  </tbody>
                </table></td>
              <td id=demo2></td>
            </tr>
          </tbody>
        </table>
        <div align=center> 
          <script language=JavaScript>
    var speed=40;
    demo2.innerHTML=demo1.innerHTML; //克隆demo1为demo2
    function Marquee(){
     if(demo2.offsetWidth  <= demo.scrollLeft){ //当滚动至demo1与demo2交界时
      demo.scrollLeft = demo.scrollLeft - demo1.offsetWidth;  //demo跳到最顶端
     }
     else{
      demo.scrollLeft++;
     }
    }
    var MyMar=setInterval(Marquee,speed); //设置定时器
    demo.onmouseover=function() {clearInterval(MyMar);}//鼠标移上时清除定时器达到滚动停止的目的
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed);}//鼠标移开时重设定时器
      </script> 
        </div>
        <div class=clear></div>
      </div>
    </DIV>
    </body>
    </html>
  • 相关阅读:
    SSH框架学习笔记(六)----hibernate关联映射注解
    1. Elasticsearch startup on local
    Oracle PL/SQL 入门
    单例模式的两种实现方式对比:DCL (double check idiom)双重检查 和 lazy initialization holder class(静态内部类)
    单例模式中用volatile和synchronized来满足双重检查锁机制
    Java反射机制可以动态修改实例中final修饰的成员变量吗?
    left join 条件区别
    Java应用程序项目的打包与发行(run.bat形式)
    Eclipse调试常用技巧(转)
    PhoneGap: Android 自定义组件
  • 原文地址:https://www.cnblogs.com/Akishimo/p/2978238.html
Copyright © 2011-2022 走看看