Jquery特效十:新闻纵向滚动、淡入淡出

最新推荐文章于 2022-09-04 23:56:48 发布

chengly0129

最新推荐文章于 2022-09-04 23:56:48 发布

阅读量2k

点赞数

分类专栏： Jquery特效文章标签： jquery function div stylesheet border dell

本文链接：https://blog.csdn.net/chengly0129/article/details/6184199

版权

Jquery特效专栏收录该内容

13 篇文章 0 订阅

订阅专栏

效果图及代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="jqNews.js" type="text/javascript"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <div>
        <div id="jqnews">
            <div><a href="#">Tutto su msn</a><br />
                <img src="images/amsn.png" />
            </div>
            <div>
                <a href="#">Nuove fotocamere da 150 Mila px</a><br />
                <img src="images/camera.png" />
            </div>
            <div>
                <a href="#">Accesso Negato</a> <br />
                <img src="images/error.png" />Cosa fare?
            </div>
            <div>
                <a href="#">Nuovo sw per Note</a> <br />
                <img src="images/knotes.png" />
            </div>
            <div>
                <a href="#">Trovare casa</a> <br />
                <img src="images/kfm_home.png" />
            </div>
            <div>
                <a href="#">Ms-Dos</a> <br />
                <img src="images/konsole.png" />
            </div>
        </div>
    </div>
<br />

</body>
</html>

jqNews.js：

/*
* JqNews - JQuery NewsTicker
* Author: Gravagnola Saverio and Iuliano Renato
* Version: 1.0
*/

var newsVisual = 4; // Numero di news da visualizzare - news to be displayed
var intervallo = 5000; // >1500

$(document).ready(function() {
    // Totale news
    var numNews = $("#jqnews").children().length;

    // Controllo di overflow
    if (newsVisual > numNews) {
        newsVisual = numNews;
    }

    // Hide delle news superflue all'inizializzazione
    for (var i = newsVisual; i < numNews; i++) {
        $($("#jqnews").children()[i]).css("opacity", "0");
    }

    var gestInter = setInterval(jqNewsRotate, intervallo);

    // Gestione del mouseover-mouseout
    $("#jqnews").mouseover(function() { clearInterval(gestInter) });
    $("#jqnews").mouseout(function() { gestInter = setInterval(jqNewsRotate, intervallo); });
});

function jqNewsRotate(_newsVisual) {

    // Inserire lo stesso valore utilizzato per definire l'altezza ed i margini dei div nel file css/style.css
    var altezzaDiv = -118;
    var margineDiv = 5;

    // Hide della prima news
    $($("#jqnews").children()[0]).animate({ opacity: 0 }, 1000, "linear", function() {
    // Movimento verso l'alto
        $($("#jqnews").children()[0]).animate({ marginTop: altezzaDiv }, 1000, "linear", function() {
        // Ripristino posizione elemento nascosto
            $($("#jqnews").children()[0]).css("margin", margineDiv);
            // Spostamento in coda dell'elemento nascosto
            $("#jqnews").append($($("#jqnews").children()[0]));
            // Visualizzazione dell'ultima news
            $($("#jqnews").children()[(newsVisual - 1)]).animate({ opacity: 1 }, 1500);
        });
    });
}

style.css:

#jqnews
{
overflow: hidden;
height: 500px;
width: 160px;
border: solid 1px #000;
}

#jqnews div
{
display: block;
overflow: hidden;
background-color: #def;
height: 118px;
width: 150px;
margin: 5px;
}

#jqnewsVert
{
overflow: hidden; height: 500px; width: 160px; border: solid 1px #000; margin:auto;
}

#jqnewsVert div
{
display: block; overflow: hidden; background-color: #def; height: 118px; width: 150px; margin: 5px;
}

#jqnewsOriz
{
border: solid 1px #000; height: 130px; width: 650px; overflow: hidden; margin:auto;
}

#jqnewsOriz div
{
float:left; border: solid 1px #000; background: #def; height: 118px; width: 150px; margin: 5px; display:block;
}

chengly0129

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery特效十:新闻纵向滚动、淡入淡出

<br />效果图及代码如下：<br /><br /><br /><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /> <title></title><br /> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script><br /><script src="jqNews.js" type="text/javascript"><
复制链接

扫一扫

专栏目录