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="/UploadFiles/2021-04-02/jquery-1.9.1.js">
<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="https://www.jb51.net/" title="View round"><img width="70" height="70" src="/UploadFiles/2021-04-02/1.png">
<h5><a href="https://www.jb51.net/" title="View round">round</a></h5>
<p class="info">Nov 29th 2008 by neue</p>
</li>
<li>
<a href="https://www.jb51.net/" title="View reflet"><img width="70" height="70" src="/UploadFiles/2021-04-02/2.png">
<h5><a href="https://www.jb51.net/" title="View reflet">reflet</a></h5>
<p class="info">Nov 29th 2008 by neue</p>
</li>
<li>
<a href="https://www.jb51.net/" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="/UploadFiles/2021-04-02/3.png">
<h5><a href="https://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="https://www.jb51.net/" title="View Untitled"><img width="70" height="70" src="/UploadFiles/2021-04-02/4.png">
<h5><a href="https://www.jb51.net/" title="View Untitled">Untitled</a></h5>
<p class="info">Nov 29th 2008 by mike1052</p>
</li>
<li>
<a href="https://www.jb51.net/" title="View My Tutorial's Library"><img width="70" height="70" src="/UploadFiles/2021-04-02/5.png">
<h5><a href="https://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="https://www.jb51.net/" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="/UploadFiles/2021-04-02/6.png">
<h5><a href="https://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="https://www.jb51.net/" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="/UploadFiles/2021-04-02/7.png">
<h5><a href="https://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="https://www.jb51.net/" title="View Sandy — your free personal email assistant"><img width="70" height="70" src="/UploadFiles/2021-04-02/8.png">
<h5><a href="https://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="https://www.jb51.net/" title="View Values of n Blog"><img width="70" height="70" src="/UploadFiles/2021-04-02/9.png">
<h5><a href="https://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,图文特效
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。