機端左右滑動導航,html正常寫,css超出不換行,隱藏滾動條
lt;marquee></marquee>文字滑動
<marquee behavior="slide"></marquee>滑動
<marquee behavior="scroll"></marquee>預設卷動
<marquee behavior="alternate"></marquee>來回卷動
<marquee direction="down"></marquee>向下卷動
<marquee direction="up"</marquee>向上卷動
<marquee direction="right"></marquee>向右卷動
<marquee direction="left"></marquee>向左卷動
<marquee loop="2"></marquee>循環次數, 默認值為:-1, 表示一直滾動下去。
<marquee width="180"></marquee>設定寬度
<marquee height="30"></marquee>設定高度
<marquee bgcolor="#FF0000"></marquee>設定背景顏色
<marquee scrollamount="30"></marquee>設定卷動距離(px)
<marquee scrolldelay="300"></marquee>設定卷動時間(毫秒)
<marquee hspace="100"></marquee> hspace 水平頁邊距
<marquee vspace="80"></marquee> vspace 垂直頁邊距
<marquee direction="left" behavior="scroll" width="300" height="400" bgcolor="#ff0" scrollAmount="50" scrollDelay="1000">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>JQ</li>
<li>BOOTSTRAP</li>
</ul>
</marquee>
以上整數涉及的單位是像素px
<marquee>
<img src="images/03.jpg" />
<img src="images/04.jpg" />
<img src="images/05.jpg" />
<img src="images/06.jpg" />
<img src="images/07.jpg" />
<img src="images/08.jpg" />
<img src="images/09.jpg" />
</marquee>
marquee常用到的兩個事件:
onmouseout="this.start()" 當鼠標移出該區域時
onbmouseover="this.stop()" 當鼠標移入該區域時
上看過很多圖片左右切換滑動的效果,不過大都是使用插件實現。插件雖方便,但是對于新手的學習并不是最好的。本文使用jquery這個由原生的JavaScript封裝的庫,用最簡短的代碼實現此功能
效果預覽如下圖:
代碼如一下部分:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>超簡單的圖片左右切換滑動</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <script> var cot=0;//設置一個計數器,初始值為0;作用是用來監聽點擊切換的時候哪一個圖片應該隱藏或者顯示 function nex(){ if(cot<=2){ $('.imgs img').eq(cot).animate({'margin-left':'-305px'},500); cot++; } } function pre(){ if(cot>0){ cot--; $('.imgs img').eq(cot).animate({'margin-left':'0'},500); } } </script> </head> <body> <div style="width:900px;margin:auto;overflow:hidden"> <!-- 這個最外圍的容器div寬度為900px,每張圖寬為300px,所以只顯示3張,剩下的圖超出容器隱藏起來 --> <div class="imgs" style="width:50000px;"><!--這個div的作用是讓所有的圖片都排在同一水平上,這樣子切換的時候效果會更好--> <img src="1.jpg" /><!--這里的圖片換上到時候自己對應的圖片--> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /> <img src="6.jpg" /> </div> <div> <div onclick="pre()" style="float:left;cursor:pointer">上一頁</div> <div onclick="nex()" style="float:right;cursor:pointer">下一頁</div> </div> </div> </body> </html>
如果你想要在短時間內掌握HTML5專業技術,不妨就選擇千鋒重慶HTML5技術開發培訓。千鋒重慶HTML5技術開發培訓課程采用100%全程面授教學,拒絕視頻同步授課,拒絕雙元視頻班教學,拒絕直播授課,教師一對一指導學員做項目,全新打造“主流技術+前沿技術+企業級聯動”教學課程,重新優化和定義編程語言,采用最新版本技術開展教學,致力于為學員打造最牛的、最新的技術,助力學員拿下BAT級企業Offer。
千鋒重慶HTML5技術開發培訓,讓你在同樣的起跑線,跑出不一樣的高度。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。