CSS3 cross-fade属性使用测试实例页面

展示

代码

HTML代码：

<p>cross-fade的百分比值：<input id="rangeCrossFade" type="range" value="50" min="0" max="100" step="10" /> <span id="valueCrossFade">50</span>%</p>
<div id="crossFadeImage" class="test_image"></div>
<div class="test_div">以上为cross-fade实例，下为opacity测试实例</div>
<p>opacity的百分比值：<input id="rangeOpacity" type="range" value="50" min="0" max="100" step="10" /> <span id="valueOpacity">50</span>%</p>
<div id="opacityImage" class="test_image"></div>
            

JS代码：

(function() {
    if (typeof window.screenX === "number") {
        var $ = function(selector) {
            return document.querySelector(selector);
        };
        // 元素们
        var eleCrossFadeImage = $("#crossFadeImage"), eleCrossFadeRange = $("#rangeCrossFade"), eleCrossFadeValue = $("#valueCrossFade");
        
        var funCrossFade = function() {
            var value = eleCrossFadeRange.value;
            eleCrossFadeValue.innerHTML = value;
            ["-webkit-", "-moz-", "-ms-", "-o-", ""].forEach(function(prefix) {
                eleCrossFadeImage.style.backgroundImage
                    = prefix + "cross-fade(url(//image.zhangxinxu.com/image/study/s/s512/mm1.jpg), url(//image.zhangxinxu.com/image/study/s/s512/mm3.jpg), "+ value +"%)";
            });    
        };
        funCrossFade();
        
        // range控件事件
        eleCrossFadeRange.addEventListener("change", function() {
            funCrossFade();    
        });
        
        // ----------------------------分隔线----------------------
        
        // 元素们
        var eleOpacityImage = $("#opacityImage"), eleOpacityRange = $("#rangeOpacity"), eleOpacityValue = $("#valueOpacity");
        eleOpacityImage.innerHTML = '<img src="//image.zhangxinxu.com/image/study/s/s512/mm1.jpg" /><img src="//image.zhangxinxu.com/image/study/s/s512/mm3.jpg" />';
        
        var eleImages = eleOpacityImage.getElementsByTagName("img");
        
        var funOpacity = function() {
            var value = eleOpacityRange.value;
            eleOpacityValue.innerHTML = value;
            eleImages[1].style.opacity = value / 100;
        };
        funOpacity();
        
        // range控件事件
        eleOpacityRange.addEventListener("change", function() {
            funOpacity();    
        });
    } else {
        alert("叔，虽说国家福利不好，您也不用这么把年纪还出来卖命吧~~");    
    }
})();