现在位置首页 / 生活多美好 /正文

Jquery 仿新浪微博几个亮点功能--文字放大、置顶提示、字数限制提示

作者: IT小兵 | 2013年8月27日| 热度:℃ | 评论: |参与:

一直用新浪微博web版本,倒是客户端2012没有怎么用过。也许是习惯吧。

新浪微博的web版本,有几个功能比较新颖和人性化。这里和大家分享一下。

1、发布微博后,微博数放大提醒:

可以用在监控告警界面。

先看图(貌似新浪现在去掉这个功能了)。

QQ截图20130827102332.jpg

您可以先狠狠地单击这里,高仿真新浪围脖的demo页面,进行测试。

这个页面还是实现了字数限制的提示,超过字数限制后,字体变成红色提醒。

Jquery仿新浪微博字数限制

您可以单击这里:demo页面 | 源文件下载(3.88K)

代码解析:

var number = function(node,aim,minnum,maxnum){
var num = parseInt(aim.innerHTML,10);
aim.style.zoom = 1;
node.style.display = "inline-block";
node.innerHTML = num;
var fontSize = minnum;
var opacity = 1;
var step = function(){
fontSize+=1;
opacity-=0.09;
node.style.fontSize = fontSize + "px";
node.style.opacity = opacity;
aim.style.opacity = opacity;
node.style.filter = "Alpha(opacity="+opacity*100+")";
aim.style.filter = "Alpha(opacity="+opacity*100+")";
node.style.zoom = 1;
if(fontSize < maxnum){
setTimeout(step,40);
}else{
num+=1;
node.innerHTML = num;
aim.innerHTML = num;
setTimeout(step2,40);
}
};
setTimeout(step,10);
var step2 = function(){
fontSize-=1;
opacity+=0.09;
node.style.fontSize = fontSize + "px";
node.style.opacity = opacity;
aim.style.opacity = opacity;
node.style.filter = "Alpha(opacity="+opacity*100+")";
aim.style.filter = "Alpha(opacity="+opacity*100+")";
if(fontSize > minnum){
setTimeout(step2,40);
}else{
node.style.display = "none";
}
};

2.仿新浪微博置顶提示,新信息提醒效果。

用来做cms的消息通知不错。

效果图:

仿新浪微博置顶提示,新信息提醒效果

当浏览器滚动的时候,要浮层要移除浏览器界面视区的时候,修改其position属性,

让其浮动在窗口的上沿显示就可以了,position:fixed,可以在IE7+和其他浏览器下浮动层平滑固定定位,

由于IE6前辈不支持fixed属性,使用position:absolute属性代替,重新计算top值。

HTML代码:
<div class="float" id="float"><p id="WB_unread_msg_1303891276971">1条新私信,
<a href="http://www.css88.com/">查看私信</a></p>

<p id="WB_unread_msg_1303891276972">10条新消息,<a href="http://www.css88.com/">查看消息</a></p>

<p id="WB_unread_msg_1303891276973">108个新粉丝,<a href="http://www.css88.com/">查看粉丝</a>

</p><a href="#" title="关闭" id="" class="close-ico">关闭</a></div>
CSS代码:
.float { width:200px; padding:5px 10px; border:1px solid #ffecb0; font-size:12px; background-color:#fffee0;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2);
box-shadow:1px 1px 2px rgba(0,0,0,.2); position:absolute; -moz-border-radius:5px;
-webkit-border-radius:5px; border-radius:5px; }.float .close-ico{ position:absolute; top:5px;
 right:5px; display:block; width:16px; height:16px; background-image:url(img/close-ico.png);
 text-indent:-900px; overflow:hidden; }.float .close-ico:hover{ background-position:0 -16px;}
 .float p{ line-height:22px}
JS代码:
/** * @author 愚人码头 * 类似于新浪微博新消息提示的定位框 * 更多 */(function($){
   $.fn.capacityFixed = function(options) {
       var opts = $.extend({},$.fn.capacityFixed.deflunt,options);    
           var FixedFun = function(element) {
           var top = opts.top;          
             var right = ($(window).width()-opts.pageWidth)/2+opts.right;        
                element.css({
               "right":right,
               "top":top
           });
           $(window).resize(function(){
               var right = ($(window).width()-opts.pageWidth)/2+opts.right;        
                       element.css({
                   "right":right
               });            });
           $(window).scroll(function() {
               var scrolls = $(this).scrollTop();        
                      if (scrolls > top) {

                   if (window.XMLHttpRequest) {
                       element.css({
                           position: "fixed",
                           top: 0
                       });                    } else {
                       element.css({
                           top: scrolls
                       });                    }
               }else {
                   element.css({
                       position: "absolute",
                       top: top
                   });                }
           });            element.find(".close-ico").click(function(event){
               element.remove();                event.preventDefault();            })
       };        return $(this).each(function() {
           FixedFun($(this));        });    };
   $.fn.capacityFixed.deflunt={
right : 100,//相对于页面宽度的右边定位
       top:100,
       pageWidth : 960
};})(jQuery);

调用代码:

      $("#float").capacityFixed({    
       right : 100,//相对于页面宽度的右边定位    
           top:100,    
           pageWidth : 960    
      });    


转发请注明:IT分享 http://suchso.com

点击阅读本文所属分类的更多文章: 生活多美好 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询