*. The boss has arranged a new task, to display a paragraph of text that exceeds the content of the page, to hide the redundant part and display it when you want to see it, (the best dynamic display and shrinkable function, pay attention to achieve animation effect ) The brackets are added by myself, O(∩_∩)O haha~.
*, first sort out the knowledge points of DIV height change (in fact, it has been completed, it is in the attachment)
$("#divId").css("height");Get the height
$("#divId").css("height",val+"px"); Set the height, pay attention to the px unit
ps:height can only achieve the smallest unit of at least +-(1) once, anyway I tried it like this
*. Then I found a funny thing when I started to operate the height. The height of the div is changing, but the current page does not move. What can I see? Oh, so you need to absorb the following nutrition points
$(window).height(); represents the actual height of the current window $(document).height(); Represents the current page document and contains the scrolled height $(document).scrollTop(); represents the height of the current scroll bar from the top of the entire document ps: so? Whether to reach the top: $(document).scrollTop()<=0 Whether to reach the bottom: ($(document).height()-$(window).height()-$(document).scrollTop())<=0
*, and then you can't click continuously every second, right, so you have to use a magical timer, but found that it can't be turned off, I fell, I don't know what the problem is, so I used the following method, ε=(´ο｀*))) alas
Yes, that's right, no code this time, haha The solution is to add a state to the function inside setInterval, and then clearInterval(barName) in a specific state. why?why?why?
*, The code in the attachment still has a lot of places to be optimized haha, I have time to dig in and see.
For example, automatically calculate the height of a div or other container based on the length of the content For example, customize the speed of expanding and collapsing For example, the optimization of the timer closing strategy For example, it is written as a closure and provided to others to call directly ε=(´ο｀*))) alas There is still a lot to learn, learning makes me happy, (*^▽^*)
*. A colleague working as a data specialist accidentally saw me debugging, and then I said that the height cannot be accurately detected when unfolding, so there will be a gap in the class. He said that it is not possible to change the method? For example, show them all in an instant, eh~
In fact, I thought about it and realized it, just change the height to auto. Then I adjusted it to auto and tested it, although when it was displayed (I don't know how to say it, it doesn't seem to have any effect) So, just use one line of code to expand, and use dynamic when folded, awesome, haha The good times don't last long. . . For example, the leader said that when you put it away, what kind of animation is needed, it is superfluous, so it becomes instant when you put it away. ε=(´ο｀*))) alas For example, there is actually a bug in the correspondence between the number of displayed characters and the positioning height, so I changed it. --> Then it is changed to the interception method, and the interception encounters the situation where the label is intercepted by half (locating each character of the label, and then special processing, such as relocating the interception address) -->Another idea is: more than 800 characters are intercepted, but the intercepted coordinates are not 800 but 600. In this way, it can be ensured that the displayed action will not hide only one or two characters. -->The intercepted part and the whole part are displayed alternately, so as to realize the effect of expanding and collapsing