- 浏览: 332212 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (354)
- 学习 (219)
- 工作 (69)
- 前端技术 (188)
- 个人评论 (1)
- 工作总结 (1)
- 工作的方法 (1)
- 代码库 (1)
- jQuery (63)
- javascript (4)
- css (4)
- 网络通信协议 (3)
- web (7)
- 服务端性能 (1)
- 优化 (1)
- html5 (4)
- serialize (1)
- 上线页面 (1)
- ie6 (6)
- js (1)
- iframe (1)
- flash (1)
- a (1)
- img (1)
- 页面tms的要求 (1)
- kissy (3)
- 需求也页面 (0)
- 需求页面 (2)
- 视频插件 (1)
- 切图片 (1)
- map (1)
- display (1)
- 浮动定位 (1)
- 大小图片的切换功能 (2)
- demo (1)
- margin (1)
- a标签 (1)
- border (1)
- 侧导航 (1)
- 切换PNG格式的css (1)
- padding (1)
- 显示添加和删除 (1)
- 滚动条 (1)
- 和图片处理 (1)
- 移动端 (1)
- 定位 (1)
- 移动端的包的引入作用与直接拨打电话的A标签 (1)
- git (1)
- node.js (1)
- Zepto (1)
最新评论
-
幻紫1992:
还有分页的功能、、(⊙o⊙)嗯
[JS代码库] -
幻紫1992:
就是没有返回顶部的按钮,这个页面、、
[JS代码库] -
幻紫1992:
很受用,O(∩_∩)O谢谢啦~
[JS代码库] -
nlnl520coco:
想下个东西 规则太苛刻了 网站得改进
[JS代码库] -
hxp520520:
new Limiter() 这个对象是kissy API里面的 ...
Limiter的简单demo--20131029
1、效果及功能说明
仿新浪微博图片文字列表上下淡进淡出间歇上下滚动
2、实现原理
首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
仿新浪微博图片文字列表上下淡进淡出间歇上下滚动
2、实现原理
首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
<!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.17sucai.com/" title="View round"><img width="70" height="70" src="images/1.png" title="" /></a> <h5><a href="http://www.17sucai.com/" title="View round">round</a></h5> <p class="info">Nov 29th 2008 by neue</p> </li> <li> <a href="http://www.17sucai.com/" title="View reflet"><img width="70" height="70" src="images/2.png" title="" /></a> <h5><a href="http://www.17sucai.com/" title="View reflet">reflet</a></h5> <p class="info">Nov 29th 2008 by neue</p> </li> <li> <a href="http://www.17sucai.com/" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="images/3.png" title="" /></a> <h5><a href="http://www.17sucai.com/" 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.17sucai.com/" title="View Untitled"><img width="70" height="70" src="images/4.png" title="" /></a> <h5><a href="http://www.17sucai.com/" title="View Untitled">Untitled</a></h5> <p class="info">Nov 29th 2008 by mike1052</p> </li> <li> <a href="http://www.17sucai.com/" title="View My Tutorial's Library"><img width="70" height="70" src="images/5.png" title="" /></a> <h5><a href="http://www.17sucai.com/" 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.17sucai.com/" 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.17sucai.com/" 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.17sucai.com/" 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.17sucai.com/" 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.17sucai.com/" title="View Sandy — your free personal email assistant"><img width="70" height="70" src="images/8.png" title="" /></a> <h5><a href="http://www.17sucai.com/" 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.17sucai.com/" title="View Values of n Blog"><img width="70" height="70" src="images/9.png" title="" /></a> <h5><a href="http://www.17sucai.com/" 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>
发表评论
-
Zepto
2015-08-15 13:49 1207Zepto Zepto,是一个比较 ... -
node.js的学习-20140611
2014-06-11 23:17 736//创建一个h1方法里面舒服一个nihao functi ... -
node.js的学习-20140609
2014-06-09 23:01 537Node.js 是一个基于Chrome JavaScript ... -
git的学习-20140604
2014-06-04 23:30 482Git使用 首先 开启"G ... -
PC和移动端的页面的一些差距-20140525
2014-05-25 23:46 855首先 1、标签、描述等描述清晰准确 2、网站结构3层树状结构 ... -
Bootstrap排版基础样式和响应式图片-20140521
2014-05-22 00:41 2712Bootstrap基础排版样式 .col-xs-* // ... -
Bootstrap特性、设计和组件-20140519
2014-05-19 22:22 686特点 Bootstrap是基于jQuery框架开发的,它在j ... -
Bootstrap流式布局-20140515
2014-05-16 00:26 14712流布局是一种适应屏幕的做法。即不固定块的宽度,而是采用百分比作 ... -
Bootstrap的宽度和分辨率的差别-20140514
2014-05-14 23:05 6214首先在bootstrap里面所有 ... -
Bootstrap的认识-20140513
2014-05-14 00:09 1346通过公司的两个比较大 ... -
jquery初步认识-20140123
2014-01-24 01:30 658一、原型模式结构 // 定义一个jQuery构造函数 ... -
html5的特殊标签作用-20140114
2014-01-15 01:04 886<base>、定义页面中所有链接的基准URL & ... -
ie下的指定样式-20140106
2014-01-08 00:00 7311. <!--[if !IE]><!--&g ... -
margin-left在IE6下左浮动加倍-20140102
2014-01-02 23:04 718一、IE6下如果line-height超出本身区块的heigh ... -
浮动存在的问题-20131229
2013-12-29 23:00 515看一个正常的浮动案例 <!DOCTYPE h ... -
在ie6下同张图片不能外面包有a标签后在画热区-20131223
2013-12-23 23:47 827最近在做页面有的发现一个问题 <div class ... -
ie6下导航存在的问题和-2013-12-20
2013-12-21 00:51 605最近在做事的时候发现一个有趣的问题,在上网也找过但是都没有很好 ... -
按比例展示的小js-20131217
2013-12-18 00:41 407做需求的做到一个关于这个功能的项目所以记下来 Math.ra ... -
定位需要注意-20131214
2013-12-15 01:07 667在CSS中关于定位的内容 ... -
flash在Safari下的BUG-20131212
2013-12-12 01:09 737<object width="940&qu ...
相关推荐
jquery新浪微博图片文字列表间歇上下滚动淡进淡出滚动
jQuery仿新浪微博高度自适应滚动代码是一款调用方式很简单的自适应无缓动滚动代码。
jquery仿新浪微博评论回复交互表单代码,jquery仿新浪微博评论回复交互表单代码
完全仿照 新浪微博图片 显示 制作 公司要制作这样一个东东 花了一个礼拜写的 稍微改改完全满足你的需求的
jquery仿新浪微博动态显示
1、效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2、实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果...
jQuery仿新浪微博大厅滚动效果v2.0 jQuery仿新浪微博大厅滚动效果v2.0,分别调用了jQuery动画暂停插件和滚动效果js,具体见代码,源码库推荐下载。
jQuery仿新浪微博评论回复交互表单代码是一款实用的用户评论回复交互式留言表单网页特效,还有点赞功能。
jquery仿新浪微博鼠标滚动到底部加载内容
jQuery仿新浪微博图片顺时针(逆时针)旋转效果,供大家一起共同分享学习。
jQuery仿新浪微博@功能代码是一款输入@就会出现下拉列表插件At.js的网页特效。
这是一款仿新浪微博首页的jQuery文字滚动留言板插件。这款留言板插件使用户发布的信息不断的滚动显示,并且无缝衔接,效果非常不错。
jquery新浪微博图文列表滚动切换效果代码