展示
cross-fade的百分比值: 50%
以上为cross-fade实例,下为opacity测试实例
opacity的百分比值: 50%
代码
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(mm1.jpg), url(mm3.jpg), "+ value +"%)"; }); }; funCrossFade(); // range控件事件 eleCrossFadeRange.addEventListener("change", function() { funCrossFade(); }); // ----------------------------分隔线---------------------- // 元素们 var eleOpacityImage = $("#opacityImage"), eleOpacityRange = $("#rangeOpacity"), eleOpacityValue = $("#valueOpacity"); eleOpacityImage.innerHTML = '<img src="mm1.jpg" /><img src="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("我爱模板网..."); } })();