簡單的內容移動展示 

<!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" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<title>slides</title>
</head>

<body>
<style type="text/css">
#slides{ width:960px; overflow:hidden; position:relative; float:left;}
.ruzhu{ width:15px; height:85px; position:absolute; z-index:6;color:#FFF;background:#999; opacity:0.7;filter:alpha(opacity=70);-moz-opacity:0.7; text-align:center; padding-top:25px; display:none;}
.ruzhu a{ color:#000; text-decoration:none;}
.content{width:960px; height:116px; float:left;}
.content div{width:230px; padding:0 5px; height:116px; float:left; word-break:break-all;}
</style>
<div id="slides">
    <div class="ruzhu"><a href="#">顯示文字</a></div>
    <div class="ruzhu" style="right:0;"><a href="#">顯示文字</a></div>
    <div class="content">
            <div>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
            <div>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
            <div>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
            <div>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>
            <div>EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</div>
            <div>FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</div>
            <div>GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</div>
            <div>HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH</div>  
    </div>
</div>
<script type="text/javascript">
(function($) {
    var option = {
        obj:'slides',
        play: 5000,
        shownum:4
    };
    var elem = $('#'+option.obj),
    divobjs  = $('.content div', elem),
    content  = $('.content',elem),
    total    = divobjs.size(),
    width    = divobjs.outerWidth(),
    height   = divobjs.outerHeight(),
    divLeft,
    moveact,
    playInterval;
    if (total < option.shownum) {return;};
    content.css({'width':width*total+'px','position':'relative'});
    elem.bind('mouseover',function() {
        $('.ruzhu', elem).fadeIn();
        stop();
    });
    elem.bind('mouseleave',function() {
        $('.ruzhu', elem).fadeOut();
        play();
    });
    function stop() { clearInterval(playInterval) };
    function play() { playInterval = setInterval(function(){animate();},option.play); }
    function animate() {
        divLeft = parseInt(content.css('left'));
        divLeft = isNaN(divLeft) ? 0 : Math.abs(divLeft);
        moveact = divLeft >= (total - option.shownum) * width ? 0 : '-='+width;
        content.animate({left:moveact});
    }
    play();
})(jQuery);
</script>
</body>
</html>

 

 

 

posted @ 2013-07-30 17:47  Vhelin  阅读(280)  评论(0)    收藏  举报