基于js原生封装的点击显示完整文字

柔光的暖阳◎ 2022-03-31 12:16 284阅读 0赞

基于js原生封装的点击显示完整文字

(function(window) {
    	var inner = '';
    	var showCont_s = function(ele) {
    		this.init.apply(this, arguments);
    	}
    	showCont_s.prototype = {
    		//初始化,显示
    		init : function(ele, dom) {
    			var els = ele.dom;
    			var h = els.offsetWidth, fh = els.innerText.length;
    			if (this.whether(h, fh)) {
    				return;
    			}
    			if (els.querySelector('p')) {
    				this.hiddCont_s(els)
    			} else {
    				inner = '<p>' + els.innerText + '</p>';
    				els.innerHTML = inner;
    				this.abs_rihgt(els, ele.w)
    			}
    		},
    		//是否点击
    		whether : function(h, fh) {
    			var h = h, fh = fh;
    			return Math.ceil(h / 14) > fh
    		},
    		//隐藏
    		hiddCont_s : function(els) {
    			var els = els;
    			var p = els.querySelector('p')
    			els.innerHTML = p.innerText;
    		},
    		//定位
    		abs_rihgt : function(els, w) {
    			var els = els, w = w;
    			p = els.querySelector('p'), distance = els.offsetLeft;
    			p.style.left = this.computed(distance, w, p.innerText.length*15) + 'px';
    		},
    		//计算
    		computed : function(d, w, p) {
    			var d = d, w = w, p = p;
    			var j = d + p - w;
    			var num;
    			if (j < 0) {
    				num = 0;
    			} else if (j > 0) {
    				num = w - p;
    			}
    			return num;
    		}
    	}
    	window.showCont_s = showCont_s;
    })(window)

发表评论取消回复

表情：

评论列表（有 0 条评论，284人围观）

还没有评论，来说两句吧...

相关阅读

相关鼠标点击网页出现文字

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runa

港控/mmm°/ 2023年10月02日 03:27/ 0 赞/ 22 阅读

相关 js点击屏幕出现文字

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js点击屏幕出现

电玩女神/ 2023年08月17日 16:24/ 0 赞/ 159 阅读

相关鼠标点击不选中文字

前言：经常遇见很讨厌的事情，就是在鼠标双击或者连续单击的时候会选中问题，这次在做图片滚动的时候，左边采用了<，没有采用图片，在用户连续点击的时候就会选中这个箭头，用户体验非常

╰半夏微凉°/ 2022年06月05日 08:51/ 0 赞/ 318 阅读

相关鼠标点击显示冒泡文字

逛网站的时候遇到一个有趣的鼠标点击事件： ![这里写图片描述][Image 1] 点击鼠标会有文字不显示，上漂一定时间后消失。现记录作为收藏具体代码：

谁践踏了优雅/ 2022年05月29日 06:57/ 0 赞/ 317 阅读

相关原生js点击轮播点击切换图片

![20180413143155395][] <!DOCTYPE html> <html> <head> <meta charset=

╰+哭是因爲堅強的太久メ/ 2022年05月27日 06:51/ 0 赞/ 318 阅读

相关基于js原生封装的点击显示完整文字

基于js原生封装的点击显示完整文字 (function(window) { var inner = ''; var showCont_s =

柔光的暖阳◎/ 2022年03月31日 12:16/ 0 赞/ 285 阅读

相关原生js点击按钮切换图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态切换图片</

谁借莪１个温暖的怀抱￠/ 2022年01月05日 11:27/ 0 赞/ 440 阅读

相关 js封装的一行半显示省略号。（字数自由控制）

$(function() \{ //控制一行半隐藏 (function ($) \{ $.fn.displayPart = function (opts) \{

朱雀/ 2021年12月15日 17:19/ 0 赞/ 277 阅读

相关原生js封装的一些常用方法

// 1.输入一个值，返回其数据类型 function type(para) { return Object.prototype.toStrin

r囧r小猫/ 2021年09月20日 11:42/ 0 赞/ 407 阅读

相关原生js封装的常用方法

JS常用方法 // html字符串转化为dom function parseToDOM(str){ var div = document.

本是古典何须时尚/ 2021年09月03日 08:06/ 0 赞/ 494 阅读