`
天涯海角tour
  • 浏览: 169491 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

html 制作彩信未完

 
阅读更多 

<!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=gb2312" />   
<title>超级经典一套鼠标控制左右滚动图片带自动翻滚</title>   
</head>   
<body>   
<div>
 
 <div style="width:318px;height:538px;background:url(mobile.gif);zoom:1;overflow:hidden;float:left">
     <div style="margin-top:100px;margin-left:25px;width:270px;height:342px;overflow:auto;overflow-x:hidden;background:#CFC;white-space:normal; text-indent:24px;" id="image">
     </div>
	 
     
  </div>
 
  
  
  <div class="zheng">
   <p align="right" id="zhen">1/20</p>
  </div>
<div class="rollBox" >   
     <div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>   
     <div class="Cont" id="ISL_Cont">   
      <div class="ScrCont">   
       <div id="List1">   
          
        <!-- 图片列表 begin -->   
         <div class="pic">   
          <img   name='im' onclick="chang(this,0);" src="http://i0.sinaimg.cn/edu/deco/2007/0928/aiying.jpg" width="109" height="87" alt="周宪环" />
		   <input type="hidden" id="text_0" />
		   <input type="hidden" id="video_0" />
         </div>          
           

         <div class="pic">   
         <img  name='im'
		  onclick="chang(this,1); "src="http://i2.sinaimg.cn/edu/deco/2007/0928/zhangying.jpg" width="109" height="87" alt="张颖" />
         <input type="hidden" id="text_1" />
		   <input type="hidden" id="video_1" />
         </div>   
         <div class="pic">   
         <img   name='im' 
		   onclick="chang(this,2);" src="http://i3.sinaimg.cn/edu/deco/2007/0928/wangnaichao.jpg" width="109" height="87" alt="王乃超" />  
           <input type="hidden" id="text_2" />
		   <input type="hidden" id="video_2" />
         </div>   
         <div class="pic">   
         <img  name='im' 
		  onclick="chang(this,3);"  src="http://i1.sinaimg.cn/edu/deco/2007/0928/xiewenxiu.jpg" width="109" height="87" alt="谢雯琇" /> 
          <input type="hidden" id="text_3" />
		   <input type="hidden" id="video_3" />
         </div>   
<div class="pic">   
         <img  name='im' onclick="chang(this,4);"   src="http://i1.sinaimg.cn/edu/deco/2007/0928/lvge.jpg" width="109" height="87" alt="吕铬" />   
          <input type="hidden" id="text_4" />
		   <input type="hidden" id="video_4" />
         </div>         
         <div class="pic">   
         <img id='name' onclick="chang(this,5);"   src="http://i2.sinaimg.cn/edu/deco/2007/0928/zhengru.jpg" width="109" height="87" alt="贾正如" />  
           <input type="hidden" id="text_5" />
		   <input type="hidden" id="video_5" />
         </div>   
        <!-- 图片列表 end -->   
           
       </div>   
       <div id="List2"></div>   
      </div>   
     </div>   
     <div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>   
    </div>   
	 <div>
    
   </div>
   </div>  
  
   <div class="table" align="center">
   <p style="height:2px;"></p>
      <table >
	   
		<tr align="center"> 
	      <Td >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button>设置图片</button></td>
		 <Td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="setText();">设置文字</button></td>
		 <Td >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button>设置声音</button></td>
	    </tr>
		<tr align="center"> 
	      <Td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button>删除图片</button></td>
		 <Td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="delText();">删除文字</button></td>
		 <Td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button>删除声音</button></td>
	    </tr>
	  </table>
   </div>
  <div style="clear:both"></div>
    <div style="margin-top:40px;margin-left:136px;"><button onclick="display();">预览</button> </div>
   </div>

<style type="text/css">   
<!--   
.rollBox{width:704px;overflow:hidden;margin-left:60px;float:left;}   
.table{width:704px;overflow:hidden;margin-left:60px;float:left;}   
.zheng{width:704px;overflow:hidden;margin-left:60px;float:left;}   
.rollBox .LeftBotton{height:52px;width:19px;background:url(http://i3.sinaimg.cn/edu/deco/2007/0924/career/job_mj_069.gif) no-repeat 11px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}   
.rollBox .RightBotton{height:52px;width:20px;background:url(http://i3.sinaimg.cn/edu/deco/2007/0924/career/job_mj_069.gif) no-repeat -8px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}   
.rollBox .Cont{width:663px;overflow:hidden;float:left;}   
.rollBox .ScrCont{width:10000000px;}   
.rollBox .Cont .pic{width:132px;float:left;text-align:center;}   
.rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;}   
 
.rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}   
.rollBox .Cont a:hover{color:#f00;text-decoration:underline;}   
.rollBox #List1,.rollBox #List2{float:left;}   
-->   
</style>   
<script language="javascript" type="text/javascript">   
<!--//--><![CDATA[//><!--   
//图片滚动列表 mengjia 070816   
var Speed = 10; //速度(毫秒)   
var Space = 5; //每次移动(px)   
var PageWidth = 132; //翻页宽度   
var fill = 0; //整体移位   
var MoveLock = false;   
var MoveTimeObj;   
var Comp = 0;   
var AutoPlayObj = null;   
GetObj("List2").innerHTML = GetObj("List1").innerHTML;   
GetObj('ISL_Cont').scrollLeft = fill;   
function chang(image,zhen)
{
  
  document.getElementById("zhen").innerHTML=(zhen+1)+"/20";
    var rows=document.getElementsByName("im").length; 
	for(var i=0;i<rows;i++)
   {
     document.getElementsByName("im")[i].style.border ="";
   }
      image.style.border =" 1px solid #fc6";
    
}
function  display()
{
  var rows=document.getElementsByName("im").length; 
  var t=0;
	for(var i=0;i<rows;i++)
   {
    if(document.getElementsByName("im")[i].style.border.toString()=="#fc6 1px solid")
        t=i;
   }
   
  document.getElementById("image").innerHTML="<img  src='"+document.getElementsByName("im")[t].src+"'/><br>"+document.getElementById("text_"+t).value+"";
}
function setText()
{
 var rows=document.getElementsByName("im").length; 
  var t=0;
	for(var i=0;i<rows;i++)
   {
    if(document.getElementsByName("im")[i].style.border.toString()=="#fc6 1px solid")
        t=i;
   }
  var text= window.prompt();
  document.getElementById("text_"+t).value=text;
  
}
 
 function delText()
 {
  var rows=document.getElementsByName("im").length; 
  var t=0;
	for(var i=0;i<rows;i++)
   {
    if(document.getElementsByName("im")[i].style.border.toString()=="#fc6 1px solid")
        t=i;
   }
   document.getElementById("text_"+t).value="";
 }
function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}   
  
function ISL_GoUp(){ //上翻开始   
if(MoveLock) return;   
clearInterval(AutoPlayObj);   
MoveLock = true;   
MoveTimeObj = setInterval('ISL_ScrUp();',Speed);   
}   
function ISL_StopUp(){ //上翻停止   
clearInterval(MoveTimeObj);   
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){   
  Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);   
  CompScr();   
}else{   
  MoveLock = false;   
}   
 
}   
function ISL_ScrUp(){ //上翻动作   
if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}   
GetObj('ISL_Cont').scrollLeft -= Space ;   
}   
function ISL_GoDown(){ //下翻   
clearInterval(MoveTimeObj);   
if(MoveLock) return;   
clearInterval(AutoPlayObj);   
MoveLock = true;   
ISL_ScrDown();   
MoveTimeObj = setInterval('ISL_ScrDown()',Speed);   
}   
function ISL_StopDown(){ //下翻停止   
clearInterval(MoveTimeObj);   
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){   
  Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;   
  CompScr();   
}else{   
  MoveLock = false;   
}   
  
}   
function ISL_ScrDown(){ //下翻动作   
if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}   
GetObj('ISL_Cont').scrollLeft += Space ;   
}   
function CompScr(){   
var num;   
if(Comp == 0){MoveLock = false;return;}   
if(Comp < 0){ //上翻   
  if(Comp < -Space){   
   Comp += Space;   
   num = Space;   
  }else{   




   num = -Comp;   
   Comp = 0;   
  }   
  GetObj('ISL_Cont').scrollLeft -= num;   
  setTimeout('CompScr()',Speed);   
}else{ //下翻   
  if(Comp > Space){   
   Comp -= Space;   
   num = Space;   
  }else{   
   num = Comp;   
   Comp = 0;   
  }   
  GetObj('ISL_Cont').scrollLeft += num;   
  setTimeout('CompScr()',Speed);   
}   
}   
//--><!]]>   
</script>   
</body>   
</html>




  
  

    
      
        
    
          
    • 
          
          
  • 大小: 14.2 KB
    • 
        

      
    
      
        
    
          
    • 
          
          
  • 大小: 216.2 KB
    • 
        

      
    
    
      
    
  




  

    
    
分享到：
      
      
    

  


  

    

      
      |
      ibatis 列名无效
    

  

  

        
  

    
  

    
评论

    
    
    
    
  


  

    
发表评论

            
   您还没有登录,请您登录后再发表评论 

      

  

  





  

    
相关推荐

    
    
  





  
    Magicbox
  













      

      
        

          

            

              

                

                
              

            

            


            

          

        

            
    

    
    
  

  



   Global site tag (gtag.js) - Google Analytics