欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js+div實現(xiàn)文字滾動和圖片切換效果代碼

 更新時間：2015年08月27日 12:25:02   作者：企鵝  
這篇文章主要介紹了js+div實現(xiàn)文字滾動和圖片切換效果代碼,涉及javascript鼠標事件及頁面元素圖片滾動效果實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了js+div實現(xiàn)文字滾動和圖片切換效果代碼。分享給大家供大家參考。具體如下：

這里演示js+div文字滾動和圖片切換代碼，為了演示方便，去掉了圖片調用，用數字代替了，用時候再加上就可以了，本效果實現(xiàn)了兩種效果，Div切換，TAB切換，和文字滾動，鼠標移上后文字停止?jié)L動，兩種功能可任意剝離出來，這不影響代碼使用。

運行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes/

具體代碼如下：

<!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>TAB切換和文字滾動</title>
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
width: 600px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<link href="images/css.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
// <!CDATA[
function lunTab(m)
{
 for(var j=1;j<=4;j++)
 {
  if(m==j)
  {
   document.getElementById("div"+j).style.display="block";
   document.getElementById("3"+j).className="on";
  }
  else{
   document.getElementById("div"+j).style.display="none";
   document.getElementById("3"+j).className="";
  }
 }
}
// ]]>
 </script>
</head>
<body>
<div class="main-center clearfix"> 
  <div class="txt">
  <div class="tit">
 <a href="#" id="31" onmouseover="lunTab(1)">急速提分一對一</a> | <a href="#" id="32" onmouseover="lunTab(2)">集訓營</a> | <a href="#" id="33" onmouseover="lunTab(3)">協(xié)議包括VIP</a> | <a href="#" id="44" onmouseover="lunTab(4)">一卡通</a></div>
<div class="box-b" id="div1" style="display: block;">
<div id="demo">
<div id="indemo">
<div id="demo1">
<div style=" border:1px solid #000; overflow:hidden;height:155px;width:170px;text-align:center;float:left"><div style="height:135px;width:170px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;"></div>1333333333</div>
<div style=" border:1px solid #000; overflow:hidden;height:155px;width:170px;text-align:center; float:left"><div style="height:135px;width:170px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;float:left"></div>14444444444</div>
<div style=" border:1px solid #000; overflow:hidden;height:155px;width:170px;text-align:center;float:left"><div style="height:135px;width:170px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;"></div>1555555555</div>
<div style=" border:1px solid #000; overflow:hidden;height:155px;width:170px;text-align:center;float:left"><div style="height:135px;width:170px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;"></div>6666666666</div>
</div>
<div id="demo2"></div>
</div>
</div>
</div>
 <div class="box-b" id="div2" style="display: none;">
<div style=" width:170px; height:135px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;">3</div>
<div style=" width:170px; height:135px; background-color:#000; font-size:24px; color:#FFF;float:left; ">4</div>
   </div> 
   <div class="box-b" id="div3" style="display: none;">
<div style=" width:170px; height:135px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;">5</div>
<div style=" width:170px; height:135px; background-color:#000; font-size:24px; color:#FFF;float:left; ">6</div>
   </div> 
   <div class="box-b" id="div4" style="display: none;">
<div style=" width:170px; height:135px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;">7</div>
<div style=" width:170px; height:135px; background-color:#000; font-size:24px; color:#FFF;float:left; ">8</div>
   </div>
  </div>
 </div>
<script>
<!--
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</body>
</html>

希望本文所述對大家的javascript程序設計有所幫助。

相關文章

  • javascript執(zhí)行上下文詳解

    javascript執(zhí)行上下文詳解

    執(zhí)行上下文可以說是js代碼執(zhí)行的一個環(huán)境，存放了代碼執(zhí)行所需的變量，變量查找的作用域鏈規(guī)則以及this指向等。同時，它也是js很底層的東西，很多的問題如變量提升、作用域鏈和閉包等都可以在執(zhí)行上下文中找到答案，所以這也是我們學習執(zhí)行上下文的原因
    2023-05-05
  • 微信小程序按鈕點擊跳轉頁面詳解

    微信小程序按鈕點擊跳轉頁面詳解

    這篇文章主要介紹了微信小程序按鈕點擊跳轉頁面，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • javascript抽象工廠模式詳細說明

    javascript抽象工廠模式詳細說明

    這篇文章主要介紹了javascript抽象工廠模式詳細說明,需要的朋友可以參考下
    2014-12-12
  • 解決layer彈出層的內容頁點擊按鈕跳轉到新的頁面問題

    解決layer彈出層的內容頁點擊按鈕跳轉到新的頁面問題

    今天小編就為大家分享一篇解決layer彈出層的內容頁點擊按鈕跳轉到新的頁面問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JavaScript Window.open彈窗使用詳解

    JavaScript Window.open彈窗使用詳解

    這篇文章主要為大家介紹了JavaScript Window.open 彈窗使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-11-11
  • JS Math對象與Math方法實例小結

    JS Math對象與Math方法實例小結

    這篇文章主要介紹了JS Math對象與Math方法,結合實例形式總結分析了javascript中math對象常用屬性與方法相關使用技巧,需要的朋友可以參考下
    2019-07-07
  • 原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)

    原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)

    這篇文章主要介紹了原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2016-06-06
  • Bootstrap Table 雙擊、單擊行獲取該行及全表內容

    Bootstrap Table 雙擊、單擊行獲取該行及全表內容

    這篇文章主要介紹了Bootstrap Table 雙擊、單擊行獲取該行內容及獲取全表的內容,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
    2018-08-08
  • 實例講解JavaScript中call、apply、bind方法的異同

    實例講解JavaScript中call、apply、bind方法的異同

    這篇文章主要以實例講解的方式為大家總結了JavaScript中call、apply、bind方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-09-09
  • JavaScript中的普通函數與構造函數比較

    JavaScript中的普通函數與構造函數比較

    這篇文章主要介紹了JavaScript中的普通函數與構造函數比較,需要的朋友可以參考下
    2015-04-04

最新評論