简体   繁体   中英

How to include jquery plugin (HTML) into JS code

I am confused about one thing. I want to use jQuery plugin, but I want to active it in my JS function. So in my JS i want to add the code of plugin:

JS

var kontaktOffset = $('.kontakt').offset().top + 100;

if (wScroll > kontaktOffset - ($(window).height() / 1.05)) {

    $('.eboy').css("display", "none");
}

But instead display: none I want this HTML and CSS code :

<div class="scrollme">
<div class="effect_box effect_box_translate animateme"
    data-translatey="500"
    data-translatex="-650"
    data-to="0.85" 
    data-from="0.45"
    data-when="view" 
    style="opacity: 1; 
    transform: translate3d(0px, 0px, 0px)
    rotateX(0deg) 
    rotateY(0deg)   
    rotateZ(0deg) 
    scale3d(1, 1, 1);">
<img src ="images/eboy.png" alt="" class="img-responsive center-block" width="auto" height="300" style="padding-top:50px">
</div>
</div>

SO can someone help me how to include this plugin code into my JS?
And I hope to this is properly question.

You can use this code:

var eboy = $('.eboy').addClass('scrollme');
ebody.append('<div class="effect_box effect_box_translate animateme"'+
    'data-translatey="500"'+
    'data-translatex="-650"'+
    'data-to="0.85" '+
    'data-from="0.45"'+
    'data-when="view" '+
    'style="opacity: 1;'+ 
    'transform: translate3d(0px, 0px, 0px)'+
    'rotateX(0deg) '+
    'rotateY(0deg) '+
    'rotateZ(0deg) '+
    'scale3d(1, 1, 1);">'+
'<img src ="images/eboy.png" alt="" class="img-responsive center-block" width="auto" height="300" style="padding-top:50px">'+
'</div>');

Try this:

    if (wScroll > kontaktOffset - ($(window).height() / 1.05)) {

    $('.eboy').html('<div class="scrollme">
<div class="effect_box effect_box_translate animateme"
    data-translatey="500"
    data-translatex="-650"
    data-to="0.85" 
    data-from="0.45"
    data-when="view" 
    style="opacity: 1; 
    transform: translate3d(0px, 0px, 0px)
    rotateX(0deg) 
    rotateY(0deg)   
    rotateZ(0deg) 
    scale3d(1, 1, 1);">
<img src ="images/eboy.png" alt="" class="img-responsive center-block" width="auto" height="300" style="padding-top:50px">
</div>
</div>');
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM