Cấp bậc tác giả:

HTML

Tự động cuộn nội dung với JS

Được viết bởi webmaster ngày 21/07/2015 lúc 01:58 PM
Mục đích để cuộn nội dung cần hiển thị, chạy theo đoạn script cho sẵn
  • 0
  • 8742
Tải tệp tin: Click ở đây

Tự động cuộn nội dung với JS

Demo Online

Bước 1: Chèn đoạn mã dưới đây vào trong <head>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="sagscroller.css" />

<script src="sagscroller.js">

/***********************************************
* DOTNET GROUP
* Visit http://dotnet.edu.vn
* Please keep this notice intact
***********************************************/

</script>

<style type="text/css">

/* #SAG scroller demo #1 */

div#mysagscroller{
width: 200px;  /*width of scroller*/
height:250px;
}

div#mysagscroller ul li{
background:navy;
color:white;
padding:5px;
margin-bottom:5px; /*bottom spacing between each LI*/
}

div#mysagscroller ul li:first-letter{
font-size:28px;
background:white;
color:black;
padding:0 2px;
margin-right:2px;
}


/* #SAG scroller demo #2 */

div#mysagscroller2{
width: 250px; /*width of scroller*/
height:300px;
border:7px solid #C0C0C0;
}

div#mysagscroller2 ul li img{
border-width:0;
display:block; /*this causes each image to be flush against each other*/
}

</style>

<script>

//SAG scroller demo #1:

var sagscroller1=new sagscroller({
id:'mysagscroller',
mode: 'manual' //<--no comma following last option
})

//SAG scroller demo #2:

var sagscroller2=new sagscroller({
id:'mysagscroller2',
mode: 'auto',
pause: 2500,
animatespeed: 400 //<--no comma following last option
})

</script>

Bước 2:

Bước 3:

Chèn đoạn Code sau vào phần BODY, để hiển thị:

<div id="mysagscroller" class="sagscroller">
<ul>
<li>Ajax is a group of interrelated web development techniques used on the client-side to create interactive web applications.</li>
<li>XML's design goals emphasize simplicity, generality, and usability over the Internet.</li>
<li>SVG and HTML5's canvas element allow for the creation of simple graphical objects using programming.</li>
<li>The new audio and video elements of HTML5 offer an alternative to flash for embedding multimedia on the web.</li>
<li>CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.</li>
</ul>
</div>

<br />


<div id="mysagscroller2" class="sagscroller">
<ul>
<li><a href="#"><img src="http://i29.tinypic.com/xp3hns.jpg" /></a></li>
<li><a href="#"><img src="http://i26.tinypic.com/11l7ls0.jpg" /></a></li>
<li><a href="#"><img src="http://i31.tinypic.com/119w28m.jpg" /></a></li>
<li><a href="#"><img src="http://i27.tinypic.com/34fcrxz.jpg" /></a></li>
</ul>
</div>

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML