完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效

2024-12-08 19:33:16

1、效果及功能说明仿新浪微博图片文字列表上下淡进淡出间歇上下滚动

2、实现原理首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行。

3、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

4、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

5、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

6、代码

代码如下:

<!DOCTYPE HTML">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.demo{width:500px;margin:30px auto 0 auto;}
.demo h2{font-size:16px;color:#333;height:52px;line-height:24px;}
/* sidebar */
#sidebar{color:#AFB0B1;background:#0D171A;float:left;margin:0 0 24px;padding:15px 10px 10px;width:300px;}
#sidebar li{height:90px;overflow:hidden;}
#sidebar li h5{color:#A5A9AB;font-size:1em;margin-bottom:0.5em;}
#sidebar li h5 a{color:#fff;text-decoration:none;}
#sidebar li img{float:left;border:solid 3px #fff;margin-right:8px;display:inline;}
#sidebar li .info{color:#B1B1B1;font-size:1em;}
#sidebar .spyWrapper{height:100%;overflow:hidden;position:relative;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
(function($){
    $.fn.simpleSpy = function (limit, interval){
        limit = limit || 4;
        /*让div始终显示4个单位的高度*/
        interval = interval || 4000;
        /*控制每个动画效果的时间4000毫秒就是4秒从最下面的图片消失到第5张图片的从上面显示出来一个动画2秒一共4秒的时间*/
        return this.each(function(){
            var $list = $(this),
            /*获得所有列表项目的缓存*/
            items = [],
            /*未初始化*/
            currentItem = limit,
            total = 0,
            /*初始化以后*/
            height = $list.find('> li:first').height();
            /*列表限制li元素*/
            $list.find('> li').each(function(){
            /*获得缓存*/
                items.push('<li>' + $(this).html() + '</li>');
                /*获得所有列表的li里面的缓存*/
            });
            total = items.length;
            /*始终显示在缓存里的li*/
            $list.wrap('<div class="spyWrapper" />').parent().css({height : height * limit});
            /*控制div在图片消失的时候依然保持同样的高度不会因为div的消失而变化*/
            $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
            /*通过调用遍历方法获得所有li元素在实现移除的方法*/
            function spy(){
            /*开始第二个图片从最上方插入的效果*/
                var $insert = $(items[currentItem]).css({height : 0,opacity : 0,display : 'none'}).prependTo($list);
                /*插入一个新的div，透明度和高度为零*/
                $list.find('> li:last').animate({ opacity : 0}, 1000, function(){
                /*通过遍历插入一个动画出现的效果时间为1秒*/
                    $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
                    /* 增加新的第一个div的高度*/
                    $(this).remove();
                    /*这个移除的效果是什么呢就是在当我们第一次加载完页面的时候都会有几个只有图片没有属性值的li 清除就是在第一个动画结束后把没有属性的li给删除掉没有属性的就是没有高的没有动画效果的li*/
                });
                currentItem++;
                /*永远在第一个li位置显示出现的是下一个li图片*/
                if(currentItem >= total){
                /*如果4张图片大于或等于所有的大于或等于整个图片的的话*/
                    currentItem = 0;
                    /*那么就从0开始*/
                }
                setTimeout(spy, interval)
                /*在ul和4秒内完成*/
            }
            spy();
            /*效果的整个开关*/
        });
    };
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function(){
    $('ul.spy').simpleSpy();
    /*ul.spy调用simpleSpy()模版方法*/
});
</script>
</head>
<body>
<div class="demo">
    <h2>jquery仿新浪微博图片文字列表间隙滚动淡进淡出滚动</h2>
    <div id="sidebar">
        <ul class="spy">
            <li>
                <a href="http://www.jb51.net/" title="View round"><img width="70" height="70" src="images/1.png" title="" /></a>
                <h5><a href="http://www.jb51.net/" title="View round">round</a></h5>
                <p class="info">Nov 29th 2008 by neue</p>
            </li>
            <li>
                <a href="http://www.jb51.net/" title="View reflet"><img width="70" height="70" src="images/2.png" title="" /></a>
                <h5><a href="http://www.jb51.net/" title="View reflet">reflet</a></h5>
                <p class="info">Nov 29th 2008 by neue</p>
            </li>
            <li>
                <a href="http://www.jb51.net/" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="images/3.png" title="" /></a>
                <h5><a href="http://www.jb51.net/" title="View Kate Moross Little Big Planet">Kate Moross Little Big Planet</a></h5>
                <p class="info">Nov 29th 2008 by neue</p>
            </li>
            <li>
                <a href="http://www.jb51.net/" title="View Untitled"><img width="70" height="70" src="images/4.png" title="" /></a>
                <h5><a href="http://www.jb51.net/" title="View Untitled">Untitled</a></h5>
                <p class="info">Nov 29th 2008 by mike1052</p>
            </li>
            <li>
                <a href="http://www.jb51.net/" title="View My Tutorial's Library"><img width="70" height="70" src="images/5.png" title="" /></a>
                <h5><a href="http://www.jb51.net/" title="View My Tutorial's Library">My Tutorial's Library</a></h5>
                <p class="info">Nov 29th 2008 by FrancescoOnAir</p>
            </li>
            <li>
                <a href="http://www.jb51.net/" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/6.png" title="" /></a>
                <h5><a href="http://www.jb51.net/" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5>
                <p class="info">Nov 29th 2008 by John Doe</p>
            </li>
            <li>
                <a href="http://www.jb51.net/" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/7.png" title="" /></a>
                <h5><a href="http://www.jb51.net/" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5>
                <p class="info">Nov 29th 2008 by John Doe</p>
            </li>
            <li>
                <a href="http://www.jb51.net/" title="View Sandy — your free personal email assistant"><img width="70" height="70" src="images/8.png" title="" /></a>
                <h5><a href="http://www.jb51.net/" title="View Sandy — your free personal email assistant">Sandy — your free</a></h5>
                <p class="info">Nov 29th 2008 by John Doe</p>
            </li>
            <li>
                <a href="http://www.jb51.net/" title="View Values of n Blog"><img width="70" height="70" src="images/9.png" title="" /></a>
                <h5><a href="http://www.jb51.net/" title="View Values of n Blog">Values of n Blog</a></h5>
                <p class="info">Nov 29th 2008 by John Doe</p>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

怎么样，效果相当不错吧。

jquery文字上下滚动的实现方法

复制代码代码如下: //上下滚动 var textRoll=function(){ $('#notice p:last').css({'height':'0px','opacity': '0'}).insertBefore('#notice p:first').animate({'height':'35px','opacity': '1'}, 'slow', function() { $(this).removeAttr('style');}); } $(function(){ //触发上下文
jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.1.单行滚动效果无标题文档 ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} function AutoScroll(obj){ $(obj).find
jQuery实现公告文字左右滚动的实例代码

复制代码代码如下: <!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="
如何使用jquery实现文字上下滚动效果

实现文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文字滚动</title> <style type="text/css"> #sidebar{width:20
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

兼容各浏览器的文本行高复制代码代码如下: (function($){ $.fn.extend({ RollTitle: function(opt,callback){ if(!opt) var opt={}; var _this = this; _this.timer = null; _this.lineH = _this.find("li:first").height(); _this.line=opt.line?parseInt(opt.line,15):parseInt(_t
jQuery实现单行文字间歇向上滚动源代码

使用jQuery实现单行文字间歇向上滚动效果网址:http://www.keleyi.com/keleyi/phtml/textscroll.htm 本效果加强版:http://www.keleyi.com/a/bjac/532bedbffca1affa.htm 主要增加了光标悬停效果以下是源代码: 复制代码代码如下: <script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/j
jquery实现marquee效果(文字或者图片的水平垂直滚动)

原本在前端html代码中,实现文字或者图片的水平垂直滚定,都是使用的marquee,但随着考虑浏览器的兼容性和符合为w3c的标准,后来想想那还是使用javascript代码来实现.后来又喜欢上了jquery,下面写的内容希望对初学者有些帮助,高手勿喷,但欢迎指导,感激不尽. 原理:无缝滚动的原理,就是利用两个内容相同的容器,来达到欺骗人的视觉的效果.然后通过整个大容器滚动条的左右或者上下的移动来实现滚动.下面附上一张手绘的图,来简要阐述下原理.首先,我们的目的是实现框1中的内容水平向左滚动(向右
jQuery文字横向滚动效果的实现代码

很多网站都有公告,并且都喜欢用横向滚动的方式来展现.最近自己用jQuery也写了文字横向滚动,实现了自定义滚动速度,鼠标经过时暂停的功能. HTML代码如下: <div id="s" style="width:100px; position:relative; white-space:nowrap; overflow:hidden; height:20px;"> <div id="noticeList" style="
jQuery实现的文字逐行向上间歇滚动效果示例

本文实例讲述了jQuery实现的文字逐行向上间歇滚动效果.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery文字逐行向上滚动代码</title> <link href="css/index.css" rel=&quo
jquery插件之文字间歇自动向上滚动效果代码

本文实例讲述了jquery插件之文字间歇自动向上滚动效果代码.分享给大家供大家参考,具体如下: 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)

一.jQuery.roll 插件使用说明 jQuery.roll 是模拟百度新闻不间断滚动效果,并支持文字.图片水平垂直滚动,该函数使用方法为: 复制代码代码如下: /* * @module jQuery roll * @param: contentCls 内容容器className * @param: contentParentId 内容容器父元素节点ID * @param: configs 配置参数 * * @config: effect 滚动效果 * @config: duration

完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效

相关推荐

随机推荐