Greasy Fork

Greasy Fork is available in English.

Seach All ImageWeb

Easy for myself

目前为 2019-05-08 提交的版本,查看 最新版本

// ==UserScript==
// @name         Seach All ImageWeb
// @namespace    http://tampermonkey.net/
// @version      0.8
// @description  Easy for myself
// @author       You
// @match        https://www.google.com/search?*
// @require      https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js
// @run-at       document-end
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var styleStr = `
    .myK{
        margin-left:645px;
    }
    .mybtnWoW{
        height:44px;
        width:70px;
        border-radius: 24px;
        border: 1px solid #dfe1e5;
        text-align:center;
        line-height:45px;
        cursor:pointer;
        float:left;
        margin-top:-46px;
        background:#fff;
        font-size:16px;
        font-weight: bold;
        position: relative;
        z-index:500;
    }
    .mybtnWoW:hover{
        box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
        border-color: rgba(223,225,229,0);
    }
    .myck{
        position: absolute;
        display:none;
    }
    .mysk01{
        position: relative;
        width:58px;
        height:30px;
        border-bottom: 1px solid #dfe1e5;
        border-right: 1px solid #dfe1e5;
        border-radius: 0 0 29px 0; 
        margin-top:-24px;
        margin-left:20px;
        z-index:100;
    }
    .mysk02{
        border-radius: 0 30px 0 0; 
        border-top: 1px solid #dfe1e5;
        border-right: 1px solid #dfe1e5;
        width:30px;
        height:30px;
        margin-top:-31px;
        margin-left:79px;
        background:#fff;
        z-index:90;
        box-shadow: 2px 5px 6px rgba(32, 33, 36, 0.28);
    }
    .mysk03{
        border-radius:24px 0 0 0; 
        border-top: 1px solid #dfe1e5;
        border-left: 1px solid #dfe1e5;
        border-right: 1px solid #dfe1e5;
        width:108px;
        height:24px;
        background:#fff;
        margin-top:-1px;
        z-index:80;
        box-shadow: 2px 5px 6px rgba(32, 33, 36, 0.28);
    }
    .mysk04{
        width:85px;
        height:1px;
        background: #fff;
        top: 6px;
        left:24px;
        position: absolute;
        z-index:75;
    }
    .mysk05{
        border-radius:0 0 24px 24px; 
        border-left: 1px solid #dfe1e5;
        border-right: 1px solid #dfe1e5;
        border-bottom: 1px solid #dfe1e5;
        width:108px;
        height:187px;
        background:#fff;
        z-index:70;
        box-shadow: 2px 5px 6px rgba(32, 33, 36, 0.28);
    }
    .myxk{
        width:90px;
        height:180px;
        z-index:110;
        top: 17px;
        left:10px;
        position: absolute;
    }
    .myinput{
        float:left;
        width:90px;
        border-radius:6px;
        color: #3C4043;
    }
    .myinput:hover{
        color: #000;
        background:#eee;
    }
    `;
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = styleStr;
    document.getElementsByTagName('HEAD').item(0).appendChild(style);

    //$("#sbtc").after("<div class='mybtnWoW' id='myJPG'>JPG</div><div class='mybtnWoW' id='myPNG'>PNG</div><div class='mybtnWoW' id='myOther'>Other</div>");
    //$("#sbtc").after("<div class='mybtnWoW' id='myJPG'>More</div>");
    $("#sbtc").after("<div class=myK><div class=mybtnWoW id=myJPG><span style='color:#4285F4'>M</span><span style='color:#EA4335'>o</span><span style='color:#FBBD07'>r</span><span style='color:#34A853'>e</span></div><div class=myck><div class=mysk01></div><div class=mysk02></div><div class=mysk03></div><div class=mysk04></div><div class=mysk05></div><div class=myxk><form action=''><label class=myinput><input name=pixabay type=checkbox value='' checked=checked>pixabay</label><label class=myinput><input name=pexels type=checkbox value='' checked=checked>pexels</label><label class=myinput><input name=freeimages type=checkbox value='' checked=checked>freeimages</label><label class=myinput><input name=unsplash type=checkbox value='' checked=checked>unsplash</label><label class=myinput><input name=stocksnap type=checkbox value='' checked=checked>stocksnap</label><label class=myinput><input name=picjumbo type=checkbox value='' checked=checked>picjumbo</label><label class=myinput><input name=visualhunt type=checkbox value='' checked=checked>visualhunt</label><label class=myinput><input name=everypixel type=checkbox value='' checked=checked>everypixel</label><label class=myinput><input name=gratisography type=checkbox value='' checked=checked>gratisog...</label><label class=myinput><input name=lifeofpix type=checkbox value='' checked=checked>lifeofpix</label></form></div></div></div>");

    $('body').on('click','#myJPG',function(){
        $('.myinput input').each(function(){
            if($(this).prop('checked')==true){
                mySelect($(this).prop('name'));
            }
        });
    });
    function mySelect(name){
        var keyword = $('.gLFyf.gsfi').val();
        switch(name){
            case 'pixabay':
                openNewWindow("https://pixabay.com/images/search/"+ keyword +"/");
                break;
            case 'pexels':
                openNewWindow("https://www.pexels.com/search/"+ keyword +"/");
                break;
            case 'freeimages':
                openNewWindow("https://cn.freeimages.com/search/"+ keyword);
                break;
            case 'unsplash':
                openNewWindow("https://unsplash.com/search/photos/"+ keyword);
                break;
            case 'stocksnap':
                openNewWindow("https://stocksnap.io/search/"+ keyword);
                break;
            case 'picjumbo':
                openNewWindow("https://picjumbo.com/?s="+ keyword);
                break;
            case 'visualhunt':
                openNewWindow("https://visualhunt.com/search/instant/?q="+ keyword);
                break;
            case 'everypixel':
                openNewWindow("https://www.everypixel.com/search?q="+ keyword +"&stocks_type=free&meaning=&media_type=0&page=1");
                break;
            case 'gratisography':
                openNewWindow("https://gratisography.com/?s="+ keyword);
                break;
            case 'lifeofpix':
                openNewWindow("https://www.lifeofpix.com/search/"+ keyword + "?");
                break;
        }
    }
    function openNewWindow(webstr) {
        //var a = $('a')[0];
        let a = $("<a href='"+ webstr +"' target='_blank'>baidu</a>").get(0);
        let e = document.createEvent('MouseEvents');
        e.initEvent( 'click', true, true );
        a.dispatchEvent(e);
    }
    $.fn.hoverDelay = function(options){
		var defaults = {
			hoverDuring:200,
			outDuring:200,
			hoverEvent:function(){
				$.noop();
			},
			outEvent:function(){
				$.noop();
			}
		};
		var sets = $.extend(defaults,options || {});
		var hoverTimer,outTimer;
		return $(this).each(function(){
			$(this).hover(function(){
				clearTimeout(outTimer);
				hoverTimer = setTimeout(sets.hoverEvent,sets.hoverDuring);
			},function(){
				clearTimeout(hoverTimer);
				outTimer = setTimeout(sets.outEvent,sets.outDuring);
			});
		});
    }
    $(".mybtnWoW").hoverDelay({
        hoverDuring:500,
        outDuring:500,
        hoverEvent: function(){
            $('.myck').css('display','inline');
        },
        outEvent: function(){
        }
    });
    $('body').click(function(){
        $('.myck').css('display','none');
    });
    $('body').on('click','.myck',function(){
        return false;//JS阻止事件冒泡,及不触发外面click事件
    });
    $('body').on('click','.myinput',function(){
        if($(this).children('input').prop('checked')==true){
            $(this).children('input').prop('checked',false);
        }else{
            $(this).children('input').prop('checked',true);
        }
    });
    // $('.myinput').hover(function(){
    //     $(this).css('background',RanColor());
    // },function(){
    //     $(this).css('background','none');
    // });
    // function RanColor(){
    //     var a = parseInt(Math.random()*5);
    //     switch(a){
    //         case 1:
    //             return 'rgba(66,133,244,.1)';
    //             break;
    //         case 2:
    //             return 'rgba(234,67,53,.1)';
    //             break;
    //         case 3:
    //             return 'rgba(251,189,7,.1)';
    //             break;
    //         default:
    //             return 'rgba(52,168,83,.1)';
    //             break;
    //     }
    // }
    $('.myinput input').hover(function(){
            if($(this).prop('checked')==true){
                $(this).prop('checked',false);
            }else{
                $(this).prop('checked',true);
            }
        },function(){
    });
})();