📄 13-17.txt

📁 开发王代码代码
💻 TXT
字号:
<head>
<style type="text/css">
<!--
img{
	width:67px;/* 只需定义宽度和高度就可以了 */
	height:96px;
}
body {
	font: 12px 宋体, Verdana, Arial, Helvetica, sans-serif;
	background: #FFFFFF;
	margin: 0; 
	padding: 0;
	text-align: center;
	color: #000000;
}
div.div_header{
	width: 243px;
	height: 16px;
	vertical-align: top; 
	text-align: left;
	font-size: 14px;
	padding: 6px;
}
div.div_top_root{
	width: 255px;
	height:134px;
	background:url(pic/bg_news.gif); 
	background-repeat: no-repeat;
}
#scrollContainer{
    margin-left:10pt;
	margin-top:2pt;
	overflow:hidden;
	text-align:left;
}
-->
</style>
</head>	
<body>
<div class="div_top_root">
  <div class="div_header">今日新闻</div>
  <div id="scrollContainer">
    <div id="scrollContent">
      <!-- 字幕的内容 -->
      <table cellspacing="0" cellpadding="5" border="0">
        <tr align="middle">
         <td id="firstCol">
           <table cellspacing="0" cellpadding="5" border="0">
             <tr align="middle">
               <td><img src="pic/bill_001.jpg" alt="访问我的BLOG" onMouseMove="javascript:displayDetail(this);"/></td>
               <td><img src="pic/bill_002.jpg" alt="www.zhang-yafei.com" onMouseMove="javascript:displayDetail(this);"/></td>
               <td><img src="pic/bill_003.jpg" alt="访问我的BLOG" onMouseMove="javascript:displayDetail(this);"/></td>
               <td><img src="pic/bill_004.jpg" alt="www.zhang-yafei.com" onMouseMove="javascript:displayDetail(this);"/></td>
               <td><img src="pic/bill_005.jpg" alt="访问我的BLOG" onMouseMove="javascript:displayDetail(this);"/></td>
               <td><img src="pic/bill_006.jpg" alt="www.zhang-yafei.com" onMouseMove="javascript:displayDetail(this);"/></td>
               <td><img src="pic/bill_007.jpg" alt="访问我的BLOG" onMouseMove="javascript:displayDetail(this);"/></td>
               <td><img src="pic/bill_008.jpg" alt="www.zhang-yafei.com" onMouseMove="javascript:displayDetail(this);"/></td>
             </tr>
           </table>
         </td>
         <td id="lastCol"></td>
        </tr>
      </table>
    </div>
  </div>
</div>
<div id="displayPic">
</div>
<script type="text/javascript" language="javascript">
  <!--
  var stopscroll = false;
  var scrollContHeight = 95; //滚动区域的高度
  var scrollContWidth = 230; //滚动区域的宽度
  var scrollSpeed = 25; //这个参数用来确定滚动速度的，数值越小滚动速度越快
  //获取scrollContainer
  var scrollContainer = document.getElementById("scrollContainer"); 
  //获取scrollContent
  var scrollContent = document.getElementById("scrollContent");
  var firstCol = document.getElementById("firstCol");
  var lastCol = document.getElementById("lastCol");
  //注意这里，将第一列的内容复制到第二列，这样可以保证滚动看起来更连续
  lastCol.innerHTML = firstCol.innerHTML;
  //下面对scrollContainer进行设置，主要就是宽度和高度，以及换行
  scrollContainer.style.width = scrollContWidth + "px";
  scrollContainer.style.height = scrollContHeight + "px";
  scrollContainer.noWrap = true;
  //下面是两个事件：[01]鼠标经过，停止滚动[02]鼠标离开，开始滚动
  scrollContainer.onmouseover = new Function("stopscroll=true;"); 
  scrollContainer.onmouseout = new Function("stopscroll=false;");   
  //进行初始化
  function init(){
    scrollContainer.scrollLeft = 0;
	//按时间间隔不断执行函数scrollLeft()
    setInterval("scrollLeft()", scrollSpeed);
  }
  init(); 
  //下面就是改变滚动位置，如果滚出区域，则判断当前位置进行初始化调整
  var currLeft = 0; 
  function scrollLeft(){
    if(stopscroll == true) return; //如果变量"stopscroll"为真，则停止滚动
    currLeft = scrollContainer.scrollLeft;
    scrollContainer.scrollLeft += 1;//每次左移一个像素
    if(currLeft == scrollContainer.scrollLeft){
	  //如果滚动到最左侧了就初始化
      scrollContainer.scrollLeft = 0;
      scrollContainer.scrollLeft += 1;
    }
  }
  //-->
</script>
<script type="text/javascript" language="javascript">
  <!--
  function displayDetail(who){
    var displayPic = document.getElementById("displayPic");
	displayPic.style.marginTop = "10px";
	displayPic.style.padding = "10px 0px";
	displayPic.style.width = "255px";
	displayPic.style.height = "134px";
	displayPic.style.border = "1px #DCDCDC solid";
	displayPic.innerHTML = '<img src="' + who.src +'" alt="访问我的BLOG" style="width:134px;height:193px;" />';
  }
  //-->
</script>
</body>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -