Форум

ainur777 · #1 (**permalink**) 04.04.2016, 16:15

Здравствуйте!
КОД:

$.firefly({
		color: '#993399', minPixel: 1, maxPixel: 3, total : 145, on: '.into_firefly'
	});

Суть кода - летающие пиксели по странице. Как можно поменять на картинки?

рони · #2 (**permalink**) 04.04.2016, 16:36

ainur777,
в плагине нужно менять, а не в его инициализации

ainur777 · #3 (**permalink**) 04.04.2016, 16:38

Сообщение от рони

ainur777,
в плагине нужно менять, а не в его инициализации

цу

рони · #4 (**permalink**) 04.04.2016, 16:39

ainur777,
а где плагин???

ainur777 · #5 (**permalink**) 04.04.2016, 16:39

Сообщение от рони

ainur777,
а где плагин???

(function(e){var t={total:10,ofTop:0,ofLeft:0,on:"document.body",tw inkle:.2,minPixel:1,maxPixel:2,color:"#fff"};

ainur777 · #6 (**permalink**) 04.04.2016, 16:40

Сообщение от рони

ainur777,
а где плагин???

Полностью

(function(e){var t={total:10,ofTop:0,ofLeft:0,on:"document.body",twinkle:.2,minPixel:1,maxPixel:2,color:"#fff"};e.firefly=function(n){e.firefly.settings=e.extend({},t,n);e.firefly.eleHeight=e(e.firefly.settings.on).height();e.firefly.eleWidth=e(e.firefly.settings.on).width();if(e.firefly.settings.on!=="document.body"){var r=e(e.firefly.settings.on).offset();e.firefly.offsetTop=r.top;e.firefly.offsetLeft=r.left;e.firefly.eleHeight=e(e.firefly.settings.on).height();e.firefly.eleWidth=e(e.firefly.settings.on).width()}else{e.firefly.offsetTop=0;e.firefly.offsetLeft=0;e.firefly.eleHeight=e(document.body).height();e.firefly.eleWidth=e(document.body).width()}for(i=0;i<e.firefly.settings.total;i++){e.firefly.fly(e.firefly.create(e.firefly.randomPixel(e.firefly.settings.minPixel,e.firefly.settings.maxPixel)))}return};e.firefly.create=function(t){spark=e("<div>").hide();if(e.firefly.settings.on==="document.body")e(document.body).append(spark);else e(e.firefly.settings.on).append(spark);return spark.css({position:"absolute",width:t,height:t,"background-color":e.firefly.settings.color,"z-index":e.firefly.random(20),top:e.firefly.offsetTop+e.firefly.random(e.firefly.eleHeight-50),left:e.firefly.offsetLeft+e.firefly.random(e.firefly.eleWidth-50)}).show()};e.firefly.fly=function(t){e(t).animate({top:e.firefly.offsetTop+e.firefly.random(e.firefly.eleHeight-50),left:e.firefly.offsetLeft+e.firefly.random(e.firefly.eleWidth-50),opacity:e.firefly.opacity(e.firefly.settings.twinkle)},(e.firefly.random(10)+5)*2e3,function(){e.firefly.fly(t)})};e.firefly.stop=function(t){e(t).stop()};e.firefly.randomPixel=function(e,t){return Math.floor(Math.random()*(t-e+1)+e)};e.firefly.random=function(e){return Math.ceil(Math.random()*e)-1};e.firefly.opacity=function(e){op=Math.random();if(op<e)return 0;else return 1}})(jQuery)

рони · #7 (**permalink**) 04.04.2016, 16:56

ainur777,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .into_firefly, body, html{
     height: 100%;
   }
   .fly{
      background-image: url(http://javascript.ru/forum/images/smilies/dance3.gif);
      background-size:  contain;
       background-repeat: no-repeat;
   }

</style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
(function(e) {
    var t = {
        total: 10,
        ofTop: 0,
        ofLeft: 0,
        on: "document.body",
        twinkle: .2,
        minPixel: 1,
        maxPixel: 2,
        color: "#fff"
    };
    e.firefly = function(n) {
        e.firefly.settings = e.extend({}, t, n);
        e.firefly.eleHeight = e(e.firefly.settings.on).height();
        e.firefly.eleWidth = e(e.firefly.settings.on).width();
        if (e.firefly.settings.on !== "document.body") {
            var r = e(e.firefly.settings.on).offset();
            e.firefly.offsetTop = r.top;
            e.firefly.offsetLeft = r.left;
            e.firefly.eleHeight = e(e.firefly.settings.on).height();
            e.firefly.eleWidth = e(e.firefly.settings.on).width()
        } else {
            e.firefly.offsetTop = 0;
            e.firefly.offsetLeft = 0;
            e.firefly.eleHeight = e(document.body).height();
            e.firefly.eleWidth = e(document.body).width()
        }
        for (i = 0; i < e.firefly.settings.total; i++) {
            e.firefly.fly(e.firefly.create(e.firefly.randomPixel(e.firefly.settings.minPixel, e.firefly.settings.maxPixel)))
        }
        return
    };
    e.firefly.create = function(t) {
        spark = e("<div>", {"class" : "fly"}).hide();
        if (e.firefly.settings.on === "document.body") e(document.body).append(spark);
        else e(e.firefly.settings.on).append(spark);
        return spark.css({
            position: "absolute",
            width: t,
            height: 25,
            "background-color": e.firefly.settings.color,
            "z-index": e.firefly.random(20),
            top: e.firefly.offsetTop + e.firefly.random(e.firefly.eleHeight - 50),
            left: e.firefly.offsetLeft + e.firefly.random(e.firefly.eleWidth - 50)
        }).show()
    };
    e.firefly.fly = function(t) {
        e(t).animate({
            top: e.firefly.offsetTop + e.firefly.random(e.firefly.eleHeight - 50),
            left: e.firefly.offsetLeft + e.firefly.random(e.firefly.eleWidth - 50),
            opacity: e.firefly.opacity(e.firefly.settings.twinkle)
        }, (e.firefly.random(10) + 5) * 2e3, function() {
            e.firefly.fly(t)
        })
    };
    e.firefly.stop = function(t) {
        e(t).stop()
    };
    e.firefly.randomPixel = function(e, t) {
        return Math.floor(Math.random() * (t - e + 1) + e)
    };
    e.firefly.random = function(e) {
        return Math.ceil(Math.random() * e) - 1
    };
    e.firefly.opacity = function(e) {
        op = Math.random();
        if (op < e) return 0;
        else return 1
    }
})(jQuery);
 $(function(){
 $.firefly({
        color: 'transparent', minPixel: 45, maxPixel: 45, total : 145, on: '.into_firefly'
    });
   })


  </script>
</head>

<body>
<div class="into_firefly"></div>
</body>
</html>

ainur777 · #8 (**permalink**) 04.04.2016, 17:04

Спасибо

ainur777 · #9 (**permalink**) 04.04.2016, 17:12

Ссылки не работают и все остальное!
z-index: 3;
position: absolute;
НЕ помогло

рони · #10 (**permalink**) 04.04.2016, 17:14

Сообщение от ainur777

Ссылки не работают и все остальное!

???

Форум

Справочник

Discord чат

Курсы javascript