• 微信号:Zh-y9213
您当前的位置:爱资源分享网 > > 网站源码 > 网页特效

HTML5+CSS仿Instagram应用图片滤镜效果

栏目:网页特效时间:2021-07-08 03:08阅读数:37人阅读
HTML5+CSS实现的一款仿Instagram应用图片滤镜效果,HTML5图片滤镜特效。


js代码

<script>
var inputField = document.querySelector(".demo__input-img")

function pickSample(img) {
  updateImages(img.src)
  inputField.value = img.getAttribute("src")
}

function updateImages(src) {
  var imgs = document.querySelectorAll(".demo__item img")
  for (var i = 0; i < imgs.length; i++) imgs[i].src = src
}

document.addEventListener("click", function(event) {
  if (/demo__option-img/.test(event.target.className)) pickSample(event.target)
}, false)

inputField.addEventListener("input", function() {
  updateImages(this.value)
}, false)

inputField.addEventListener("focus", function() {
  this.select()
}, false)

pickSample(document.querySelector(".demo__option-img"))
</script>


在线预览
资源均来自第三方,谨慎下载,前往第三方网站下载

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:737597453@qq.com