Advertise

This is a library that can quickly generate ads on your web page.

FullScree

Banner

Illustration

InsertScreen

PcBottomRight

Popups

TextCarousel

install

$ npm install advertise --save

use

Create a full screen ad

// import Advertise and AdTemplate
import Advertise from 'advertise'
import {FullScreen} from 'advertise/lib/Template'

// import css
import 'advertise/lib/advertise.min.css'

// registry AdTemplate
FullScreen.registry()

let options = {
    template: "FullScreen",
    templateOptions: {
     params: [{
       href: "http://www.baidu.com",
       img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww3.sinaimg.cn%2Fmw690%2F9b3ad0bfly1glqs1xkwohj20yi22ogzd.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612599913&t=ee4b8e945e5b12db0e8a8b209276ee4c"
     }]
    }
}

// create Advertise
new Advertise(options)

options

Create an ad configuration item！

options.template

Advertising template.

"FullScreen" | "Banner" | "Popups" | "TextCarousel" | "InsertScreen" | "PcBottomRight" | "Illustration"

example: "FullScreen"

require:true

options.templateOptions

Configuration item of advertisement template

options.templateOptions.params

Some parameters are needed to display advertisements. Different types of advertisements require different parameters

Array<Object>

example:

[{
 href:'Click the link of advertisement jump',
 img:'Picture of advertisement display',
 text:'The text of advertisement display'
}]

require:true

options.templateOptions.title

The title of the advertisement (some advertisements may need this parameter)

string

example:"Hello Advertise"

require:false

options.templateOptions.target

Which element is the advertisement added to.(The default is the block level element with the largest area in the document, or body)

string | Element

example:".box" | document.body

require:false

options.templateOptions.animation

Binding animation to advertisement

{name:'zoom' | 'zoomIn' | 'heartBeat' | 'backInUp' | '', loop:boolean}

name:animation name

loop:Cycle or not

example:{name:'zoom',loop:false}

require:false

options.templateOptions.insertPosition

representing the position relative to the targetElement(similar targetElement.insertAdjacentElement The position parameter of the method)

'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend'

example:"beforebegin"

require:false

options.templateOptions.style

Modify the default advertising style

string

example:

  style = '<style>.ad-desc{background: red;}</style>'

require:false

options.templateOptions.autoCloseTime

Some ads you may need to automatically close time.

number

example:10

require:false