Write in front: the blogger is a real combat development after training into the cause of the “hill pig”, nickname from the cartoon “Lion King” in “Peng Peng”, always optimistic, positive attitude towards things around. My technical path from Java full stack engineer all the way to big data development, data mining field, now there are small achievements, I would like to share with you what I have learned in the past, I hope to help you on the way of learning. At the same time, the blogger also wants to build a perfect technical library through this attempt. Any anomalies, errors and matters needing attention related to the technical points of the article will be listed at the end, and everyone is welcome to provide materials in various ways.

  • Please criticize any mistakes in the article and revise them in time.
  • If you have any questions you would like to discuss or learn, please contact me at [email protected].
  • The style of the published article varies from column to column, and all are self-contained. Please correct the deficiencies.

Programmer how to use “heart” to express (end attached source code)

Keywords: Valentine’s day, confession, page slide, player \

The article directories

First, write first

It’s Valentine’s Day again, and whether or not you have someone in your heart right now, it’s always a good idea to make some early preparations. For technical people, how to play their own expertise, to prepare a special gift for the person you like? This article will introduce an H5 project with the functions of turning pages with mouse sliding, playing music on the page, and most importantly, customizing content to the maximum extent. I think, cool effect is just a tool, must use a variety of materials to fill it complete, so that the other party can feel your heart ~

Two, display effect

This case is more suitable for portrait opening on the mobile terminal, and it also supports self-adaptation. When selecting materials, we need to pay attention to the picture proportion.

  • Slide page turning effect

  • Custom text

  • Custom image

  • Custom effects

  • Music player

  • Full effect

Iii. Core documents

1. css/H5_index.css

See h5_index.js for details on how to add pages and components

When adding a page or component, you can define a common style in it (matching the selector name with the parameter works) :

  • Add page:

Page parameters: face -> Full selector name:.h5_page_face

  • Adding a component:

Component parameters: SLOGAN -> Full selector name:.H5_COMPONent_NAME_SLOGAN

2. js/H5_index.js

AddPage () and addComponent() are the files that need to be modified when adding content to a page.

  • No arguments the addPage ()

Add a new div that tiles the entire display area by default introducing a. H5_page style (h5_index.css) in which you can specify the default background image.

  • AddComponent () without name

Add a child element of a div to display in the current area. It can be text, pictures, pictures with a background, etc. The supported parameters are as follows:

{width: pure number, -> center: 2 or more times the true width, otherwise the text may fold, you can use this property to control the image size: pure number, -> center: 2 or more times the true height, add text to omit center:true, -> Center text: 'custom text ', -> Custom text content CSS: {// Custom CSS styles can be directly used by CSS properties, separated by commas
        // The style set here has the highest priority and can be used as the initial effect of the element
        "opacity": 0, -> Initially transparent (no display)"top": "240px"-> Distance from top of page240AnimateIn: animateIn: animateIn: animateIn: animateIn: animateIn: animateIn: animateIn: animateIn: animateIn1, -> Completely opaque (display) top:250-> Final position is250Px (there is no need to write units here), so that one can appear10AnimateOut: {-> animateOut: {-> animateOut: {-> animateOut: {-> animateOut: {-> animateOut: {-> animateOut: {-> animateOut:0,
		top: 300
	},
	delay: 1000-> The delay time for the animation to start executing. You can use this property to control the order of the components, in milliseconds.Copy the code
  • AddPage () with name

The name parameter can be used to bind to the default CSS selector. See H5_index. CSS for the matching rule, and you can specify the background image beforehand.

  • AddComponent () with name

The name parameter can be used to bind the default CSS selector. For the matching rule, see H5_index.css. Note that CSS properties in the incoming JSON object take precedence, and you can add various CSS3 animations to your CSS file.

3. js/index.js

Files to be modified when configuring tracks in the player include albums, trackNames, albumArtworks, and trackUrl.

  • Albums: Name of a song
  • TrackNames: author names
  • AlbumArtworks: Matches the element ID in index.html
  • TrackUrl: Resource path

4. index.html

A direct-run file in which you can introduce additional custom files that need to modify the track in a div with the albumArtworks ID (image, element ID is the same as albumArtworks).

<div id="album-art">
    <img src="mp3/1.jpg" class="active" id="_1">
    <img src="mp3/2.jpg" id="_2">
    <div id="buffer-box">Loading in...</div>
</div>
Copy the code

Iv. Case source code

  • I love artifact

Five, video direct

Video address: www.bilibili.com/video/BV1D5… , like the little partner must be three times to add attention oh ~

How do programmers express their feelings

Write at the end: the author tries to refine each knowledge point and use portal to mount links for related knowledge points. The article adopts the way of “text + picture + video” to show, which is squeezed time to make, hope to see here can leave a comment to like, slightly show support!