// ==UserScript==
// @name         新闻网图片透明度0.1
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  baidu,qq,sohu,zhihu,douban网站图片默认透明度0.1，方便摸鱼
// @author       winner800
// @license MIT
// @match        https://new.qq.com/*
// @include      *://new.qq.com/*
// @include      *://baijiahao.baidu.com/*
// @include      *://baijiahao.baidu.com/*
// @include      *://jingyan.baidu.com/article/*
// @include      *://*.baidu.com/*
// @include      *://www.sohu.com/a/*
// @include      *.zhihu.com/*
// @include      *movie.douban.com/*
// @grant        none
// @require      https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js
// @require      https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
// @downloadURL none
// ==/UserScript==
/**
   * example:
   * addNewStyle('.box {height: 100px !important;}')
   *
   * @param {*} newStyle string
   */
function addNewStyle(newStyle) {
    var styleElement = document.getElementById('styles_js')

    if (!styleElement) {
        styleElement = document.createElement('style')
        styleElement.type = 'text/css'
        styleElement.id = 'styles_js'
        document.getElementsByTagName('head')[0].appendChild(styleElement)
    }

    styleElement.appendChild(document.createTextNode(newStyle))
}
addNewStyle(`.opacity1 {opacity:1!important;}`);
(function() {
    'use strict';
    //目标dom元素
    var targetDomStr = 'img,.videoPlayer';

    var _style = document.createElement('style');
    _style.innerHTML = `${targetDomStr} {opacity:0.1}`;
    document.body.appendChild(_style);


    //    $(targetDomStr).css('opacity','0.1');

    //鼠标触摸清除透明度
    document.addEventListener('mouseover',function(){
        document.querySelectorAll(targetDomStr).forEach(function(item, index){
            item.onmouseover=function(){
                this.style.opacity= '1';
            }
            item.onmouseout=function(){
                this.style.opacity= '0.1';
            }
        })
    });
    //双击取消透明度效果
    document.addEventListener('dblclick',function(){
        var _style = document.createElement('style');
        _style.innerHTML = `${targetDomStr} {opacity:1!important;}`;
        document.body.appendChild(_style);
    });

    //单击图片透明度1
    $('img').on('click',function(){
        $(this).addClass('opacity1');
    });

    function layer1(){
        try{
        $('.read-whole').click();
        $('.s-img-mask').remove();
        // Your code here...
        //引入layer弹窗css
        $(document.body).append(`<link href="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/theme/default/layer.min.css" rel="stylesheet">`)
        layer.open({
            type: 1,
            shade: false,
            title: false,
            closeBtn: 0, //不显示关闭按钮
            shadeClose: false, //开启遮罩关闭
            offset: 'rb', //右上角弹出
            maxmin: true, //开启最大化最小化按钮
            content: '<div style="padding:20px;">test</div>', //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon: 6});
            }
        });
    }catch(e){
        console.error(e);
    }
    }
})();