当前位置: 首页» JS特效» 图片效果实例»

CSS渐变背景动画demo

CSS渐变背景动画demo <style> body {background: linear-gradient;background-size: 400% 400%;animation: gradient 15s ease infinite;height: 100vh; }@keyframes gradient { 0% { background-position: 0% 50%
  css 渐变背景 demo 动画
 191  0

js实现imageCompress压缩图片水印和下载demo

js实现imageCompress压缩图片水印和下载demonew Vue({ el: '#app', data: { file:'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1477436123,3577936229&fm=26&gp=0.jpg', width: 500, quality: 1,
  压缩图片 图片水印 图片下载
 218  0

js实现draggable模块拖动效果demo

实现draggable模块拖动效果demo   // 查询draggable和droppable      const draggable = document.querySelector;      const droppables = document.querySelectorAll;    &nbsp
  拖动特效 图片拖动
 145  0

图片模拟gif并可以实时访问demo

图片模拟gif并可以实时访问demo // 支持保存当前图片状态 // 读取url参数可以生成url表示的图片状态 // 图片可以暂停、恢复动画 const DOM = document.querySelector // 这个是x轴展开的图片 // 参数二是最大宽度,参数三是每个图片的宽度,参数四是跑一轮需要的时间 function Animate { let size = 0 var cu
  gif暂停 gif特效 demo
 155  0

css3实现动态摩天轮旋转效果demo

css3实现动态摩天轮旋转效果demo @keyframes left-top { from {transform: translate rotateZ translateY translateY rotateZ rotateZ; } to {transform: translate rotateZ translateY translateY rotateZ rotateZ; } } @
  摩天轮特效 css3特效 demo
 122  0

h5实现动态动画暂停功能demo

h5实现动态动画暂停功能demovar pause = false; $.click { pause = !pause; }) var $box = $; $box.css"); setInterval { if {return; } var rad = Number.match); rad += 1; if {rad -= 360; } $box.css"); }, 10)
  动画暂停 动画特效
 92  0

h5实现将canvas转换成图片demo

###** . 将图片绘制到画布之上**解释:    1. 简单来说,就是将一张图的某个区域,画到画布上的某个区域;    2. 和ctx.fillStyle = pattern不同的是,pattern是将图片作为背景,该背景位置是固定的,画图只是显示那背景某个区域;    3. 而本方法画图是取图的全部/一部分(比如400x400的,取
  canvas图片 转换图片 demo
 131  0

3D房屋特效demo

基于css实现的3d房屋效果,可以使用按键进行移动 function TurnLeft() { //先增加Y轴旋转角度 rotate.rotateY -= 5; if {rotate.rotateY -= 360; } if {rotate.rotateY += 360; } //目前已知旋转角度rotate.rotateY,圆半径1,可以求得点B的X轴和Y轴坐标 rot
  3d 特效 demo
 180  0

基于Jquery实现图片筛选和banner特效排版

基于Jquery实现图片筛选和banner特效排版,本实例可以实现,banner图片特效展示如下图。还有图片分类tab,以及通过顶部分类 点击主动筛选等功能。需要的小伙伴可以下载进行测试使用。本实例已经经过实例吧测试banner特效效果 图片搜索Slick.prototype.removeSlide = Slick.prototype.slickRemove = function { var _
  筛选图片 banner 特效
 115  0

基于js实现OCR拍照功能组件

步骤 #1 - MediaDevices.getUserMedia()MediaDevices.getUserMedia 是一个浏览器 API,它允许 Web 应用程序访问用户的摄像头和麦克风。在MDN上阅读更多内容。第 2 步 - glfx.js,JCrop glfx.js用于图像效果。裁剪功能由 jQuery 插件Jcrop 提供第 3 步 - Tesseract.js&nbsp
  拍照 照片 图片 ocr
 171  0

jQuery的图片展示插件imgZoomAndRotate

imgZoomAndRotate是一款基于jQuery的图片展示插件。该图片展示插件支持图片循环切换,缩放,旋转,拖拽。
  图片预览 图片展示
 304  0

带随机展开动画特效的jquery网格图片布局

这是一款带随机展开动画特效的jquery网格图片布局。该图片网格布局中,每张图片带有一个阴影底色,当鼠标悬停在图片上面时,阴影底色会移动到图片下面。当点击了一副图片,该图片会全屏放大,其它图片则以随机动画的方式变小淡出。
  图片动画 网格布局
 114  0

jQuery和CSS3图片展示动画特效

这是一款jQuery和CSS3图片展示动画特效。该特效使用GSAP和ScrollMagic来制作页面向下或向上滚动时的动画效果。
  图片展示,图片效果
 109  0

js全屏快速预览图片特效

这是一款js全屏快速预览图片特效。该特效在鼠标悬停到第一个菜单项时,会以全屏的方式对一组图片进行快速预览,点击该菜单项,可以显示全部的图片。
  图片预览 纯js
 89  0

js和CSS3图片360度全方位3D预览插件

这是一款js和CSS3图片360度全方位3D预览插件。该插件可以对一张图片进行3D旋转,实现类似在立体空间中查看景物的效果。
  3d 图片预览 360度选择
 93  0

响应式全屏滚动式jQuery图片画廊插件

这是一款响应式全屏滚动式jQuery图片画廊插件。该插件可以创建一组全屏的图片,通过滚动鼠标滚轮,或者使用键盘的上下箭头按钮,或者在移动设备上通过上下滑动来切换图片的显示。
  图片画廊 全屏 滚动
 76  0

支持无限加载的js图片画廊插件

natural-gallery-js是一款支持无限加载的js图片画廊插件。该js图片画廊支持图片的懒加载,可以对图片进行搜索,分类,还可以以轮播图的方式来展示和切换图片。
  图片画廊 纯js 无限加载
 89  0

基于canvas的jQuery图片剪裁插件

imageResizer是一款基于canvas的jQuery图片剪裁插件。它使用简单,可以基于HTML5canvas实现图片的平移和剪裁。
  canvas 图片剪裁
 175  0

功能齐全的jquery图片查看器插件

lightgallery.js是一款功能齐全的jquery图片查看器插件。该jquery图片查看器插件采用响应式设计,提供图片查看,图片轮播,图片放大等功能。
  图片画廊 图片查看器
 196  0

js和CSS3缩略图全屏展开特效

这是一款js和CSS3缩略图全屏展开特效。在该特效中,缩略图排列在页面的底部,当用户点击缩略图之后,所有缩略图会向上移动,被点击图片的大图会被展示出来。
  缩略图 图片放大
 63  0