Fine javascript Design Mode (strategy mode)

I try to explain all aspects of the design pattern in the least amount of text and space.Full Text Connection Understanding Strategic Patterns Split the algorithm from the part calling it Let me give you an example: You want to travel to Sanya in many ways: by plane, by train, by car.These methods can all reach the destination, but the process ...

Added by ihcra on Mon, 22 Jun 2020 03:06:10 +0300

Jquery plug-ins (commonly used plug-in libraries)

With the end of Jquery knowledge points, I also began to touch the framework. At the beginning, I always hear the words "plug-in" and "framework". I wonder what's the difference between framework and plug-in? "?? There are countless plug-ins. Any function in a web page can be called a plug-in. It can be extracted separa ...

Added by sdlyr8 on Sat, 25 Apr 2020 20:18:05 +0300

Perfect disconnection of css

css perfect break? ——Does not exist. But it can be relatively less tragic. conclusion In css, the broken lines of the text are rather pitiful. Finally awesome version of how to operate. Let's go to hell with word break: break all. This css can't adapt well to Chinese and English and other situations. It ...

Added by sKunKbad on Fri, 03 Apr 2020 15:25:30 +0300

Implementation of left navigation in mobile terminal

1, Achieving results Home page: Click the navigation key: 2, Implementation plan 0x1 CSS3+javascript scheme 1. Realization ideas Transform transform using css3 translate(x,y),translatex() translatey() Transition transition < transition property >: retrieve or set the properties in the object participating ...

Added by purplehaze on Sun, 02 Feb 2020 19:40:20 +0200

Pure js realizes full screen icon rotation chart, and custom icon display quantity

Home icon carousel Function requirements: automatically generate page content according to the number of icons, complete the rotation chart of icon buttons; with the browser window zooming, make the page content automatically zooming; Extension: the number of icons per page and line can be displayed b ...

Added by colemanm on Tue, 28 Jan 2020 16:20:09 +0200

Using vue to complete the click of mouse to produce the special effect of care

First source code The background color is not good-looking. If you need to change it, please change the inside one <template> <div> <div id="lovesBgc"></div> <!-- click biubiubiu Little heart start--> <div v-for="(item,index) in loves" v-bind:key="index" v-bind: ...

Added by Ramtree on Sun, 12 Jan 2020 16:27:42 +0200

Realization of mind map style with pure css3

Mind mapping is also called brain mapping He looks like this: Most of the implementation on the Internet is implemented by d3.js, which is manually implemented by svg. Recently, I am very lazy, wondering if it can be realized by css3? The answer is yes html code <div class="mainBody" id="node1"> <h1>node1 ...

Added by Azzyh on Wed, 11 Dec 2019 16:42:25 +0200

rem combines with the native function of css3 to complete all kinds of screen adaptation of mobile terminal

It is believed that the first web page size that many people touch is px, which represents the size of a pixel The designer's design draft we received is also based on px But the screen size of the mobile phone is different. The display effect on the iPhone 8 is very good. It may be completely out of shape on the iPhone 5S ...

Added by phpmaverick on Sun, 01 Dec 2019 03:31:27 +0200

Transition animation in vue

Preface Remember to use transition and transition group to set transition animation in vue component once. In summary, it can be divided into name version, js hook operation class name version, js hook operation inline style version. Template template structure // Single element <transition name="Custom name"> <p v-if="show ...

Added by quintin on Thu, 31 Oct 2019 14:43:32 +0200

HTML Introduction Learning Da08 Notes

css animation I. Realizing Animation Style @keyframes Animation name{ from { } to{ } } Or = = = " @ keyframes animation name{ 10% { } 20%{ } ... 100%{ } } II. Animation Applications animation-name: animation name; animation-name: ...

Added by Skippy93 on Mon, 07 Oct 2019 11:12:42 +0300