欢迎光临
我的个人博客网站

js实现长按显示全部内容


js实现文字超出省略号显示时长按显示全部

元素内容超出省略号显示时长按该元素,生成toast弹窗(id:toolkitContainer),以显示全部内容

#toolkitContainer {   max-width: 150px;   position: absolute;   z-index: 999;   background-color: #f6f6f6;   border-radius: 5px;   color: #000;   padding: 5px 15px;   border: solid 1px #ddd;   opacity: .95;   font-size: 12px; } 
window.onload = () => { 	initListener(); 	//调用 	$('td').each(function() { 	   if($(this).width() < $(this).text().length * 14) { 	      $(this).addClass('toolkit'); 	   } 	}); };  //字浮动显示逻辑 var initListener = function() {    $('body').on('touchstart', '.toolkit', function(e) {       var toolkit = $('#toolkitContainer');       var body = $('body');       var _this = $(this);        if(toolkit.length == 0) {          toolkit = $('<div></div>').attr('id', 'toolkitContainer')             .appendTo($('body'));       }        _this.on('touchend', function() {          $('#toolkitContainer').remove();           _this.off('touchend');          _this.off('touchcancel');       });        _this.on('touchcancel', function() {          $('#toolkitContainer').remove();           _this.off('touchend');          _this.off('touchcancel');       });        toolkit.html($(this).attr('tText') || $(this).html());        if(!toolkit.html()) {          return;       }        var tx = e.originalEvent.touches[0].pageX - toolkit.width() / 2;       tx = tx < 0 ? 0 : tx;       tx = tx + toolkit.width() > body.width() ? tx - toolkit.width() : tx;       var ty = e.originalEvent.touches[0].pageY - toolkit.height() - 30;       ty = ty < 0 ? 0 : ty;        toolkit.css('top', ty + 'px');       toolkit.css('left', tx + 'px');       toolkit.css('opcaity', '0.2');       toolkit.show();       toolkit.animate({          opcaity: 1       }, 300);    }); }; 
赞(0) 打赏
未经允许不得转载:张拓的天空 » js实现长按显示全部内容
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏