【viewer.js插件简单使用说明】的更多相关文章

viewer.js插件简单使用说明

不需要依赖jQuery.js,只需要导入viewer.js和viewer.css文件即可. 插件GitHub地址:https://github.com/fengyuanchen/viewerjs 示例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>viewer.js强大的响应式图片弹出层(360度旋转.放…

Viewer.js插件浏览图片

https://www.jianshu.com/p/e3350aa1b0d0 Viewer.js插件浏览图片 Viewer.js插件浏览图片 Viewer.js插件浏览图片…

使用VIEWER.JS进行简单的图片预览

<script src="../res/js/viewer.min.js"></script><script type="text/javascript"> //F.ready(show());//window.onload = show(); function show() { var viewer = new Viewer(document.getElementById('dowebok'), {url: 'data-orig…

viewer.js的简单练习

html <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/viewer.css"/></head><body> <ul id="myu…

js插件-简单拖拽

前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/  是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话不多说. first: html和css <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title&g…

viewer.js图片查看器插件（可缩放/旋转/切换）

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- <meta name="viewport" content="width=devic…

Viewer.js 图片预览插件使用

一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 支持键盘 支持全屏幻灯片模式(可做屏保) 支持缩略图 支持标题显示 支持多种自定义事件 Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样,但代码不一样,不能通用. 二.下载 纯JS版本:https://github.com/fengyuanchen/viewer…

强大的jQuery图片查看器插件Viewer.js

简介 Viewer.js 是一款强大的图片查看器 Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 支持键盘 支持全屏幻灯片模式(可做屏保) 支持缩略图 支持标题显示 支持多种自定义事件 Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样,但代码不一样,不能通用. 在线演示及下载 在线演示:http://www.jqhtml.com/wp-content/upload…

pdf.js插件使用记录，在线打开pdf

天记录一个js库:pdf.js.主要是实现在线打开pdf功能.因为项目需求需要能在线查看pdf文档,所以就研究了一下这个控件. 有些人很好奇,在线打开pdf文档浏览器不是支持吗.是的你说的都是现代浏览器,例如谷歌,360,edg等. 但是很不幸的是我们这个项目是要使用我们最喜欢(很烦)的浏览器IE.所有要想使IE能够在线读取pdf,我就知道两种办法第一种下载Acrobat Reader插件,第二就是使用js库了. 介绍pdf.js pdf.js是一个开源的js库. 官网:http://mozil…

js插件---Amaze UI dialog如何使用

js插件---Amaze UI dialog如何使用 一.总结 一句话总结:别人给你列出来的参考手册照着用先 1.在哪里去找插件参考资料或者使用手册(一般位置找不到的时候)? github上面啊,非常详细了 2.dialog中如何动态控制弹出框? 方法一:这里可以用将方法赋值给变量的形式,然后再将这个变量show()出来 25 var $actions = AMUI.dialog.actions({ 26 title: '标题啊', 27 items: [ 28 {content: '<a hr…

Viewer.js的inline模式

开始 前几天接到一个小的支持,要做一个有图像预览和操作功能的demo,并且给出了参照的模板.刚开始简单的看了一下给的模板,一个是boxImg.js,另一个是Viewer.js. 问题 其实图片预览的插件有很多,但大多都是点击之后弹出一个模态层显示图片,而本次要求是直接在页面上显示,直接显示在一个div里.刚开始用boxImg做了一版,使用了iframe,直接放到页面当一个div用,效果是挺好,但是副作用感觉也挺大的,而且这个效果比较丑,因为不是我这边使用,是另一个部门的用的,然后就把这一版给pa…

原生JS封装简单动画效果

原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(obj.timer) { //判断定时器是否存在,决定是否清空 clearInterval(obj.timer); } obj.timer = setInterval(function() { var leader = obj.offsetLeft; var step = num;//num为你移动一步…

HTML(.js) – 最简单的方式操作 DOM 的 JS 库

HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 jQuery.YUI.MooTools 等 JavaScript 库已经有这样的功能,这个框架不包裹或隐藏原生 DOM,而是暴露和增强,而且非常轻量. 您可能感兴趣的相关文章 那些让人惊叹的的国外创意404错误页面设计 让人爱不释手的精美 Web 应用程序图标素材 赞!10套精美的免费网站后台管理系统…

一款实用的viewer.js 图片相册

Viewer.js 是一款强大的图片相册插件,像SNS交友网站一般都会用到点击缩略图,弹出层大图片,而且弹出层有多个控制按钮,比如放大缩小.旋转.撤回等,底部有缩略图列表可切换. 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转)支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式(可做屏保)支持缩略图支持标题显示支持多种自定义事件 在线实例 默认效果 jQuery版本 回调函数 自定义方法 使用方法 <ul id="sucaihuo">    …

适用于各浏览器支持图片预览，无刷新异步上传js插件

文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西,我们可以调用它的新的api来做文件的异步上传.但是非常可惜,这个新的api并非每个浏览器都支持. 如果你会flash这当然很好,你可以自己写一个flash的上传插件来支持上传,不过本文不会对flash这个技术做任何的讨论. 好了言归正传,我们还是来讨论下只使用js的情况下如何才能异步无刷新的上传文…

Sea.js提供简单、极致的模块化开发体验

为什么使用 Sea.js ? Sea.js 追求简单.自然的代码书写和组织方式,具有以下核心特性: 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码. 自然直观的代码组织方式:依赖的自动加载.配置的简洁清晰,可以让我们更多地享受编码的乐趣. Sea.js 还提供常用插件,非常有助于开发调试和性能优化,并具有丰富的可扩展接口. 兼容性 Sea.js 具备完善的测试用例,兼容所有主流浏览器: Chrome 3+ ✔ Firefox 2+ ✔ Safa…

图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活

图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=804 一.写此插件的缘由 在现在的web应用中,对上传的图片,例如头像,原始的摄影照片常常需要在web页面上进行一些处理,常见的处理就是剪裁与旋转. 对于剪裁,我之前曾翻译过一个jQuery插件,JCrop插件,…

表单验证的validate.js插件---jQuery Validation Plugin

早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面,插件全名叫jquery.validate.js,在引入jquery.validate.js之前要先将jquery.js引入.这个插件主要用于表单的验证,用户在注册和登录时体验十分不错!由于自己只了解关于validate的皮毛,只会简单的应用rule规则和message自定义提示,事实上,validate还有其…

Bootstrap transition.js 插件

Bootstrap transition.js 插件详解   Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单了解下 CSS 过渡. CSS 过渡 CSS 过渡是指在 CSS 属性发生改变时在一段时间内平滑地过渡,使用 CSS 伪类可以很方便地使用: a { color: #333; transition: color 1s linear; }…

Jquery多级菜单插件Slimmenu使用说明

Jquery多级菜单插件Slimmenu使用说明 现在扁平化设计逐渐的成为了趋势,不管是pc web,还是移动互联网的应用开发,都在研究和设计Flat ui, 这里有一篇文章说明扁平化的设计的一些想法:[jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍] 今天分享几个Jquery的扁平化插件.首先是Jquery 扁平化菜单:SlimMenu. 无图无真像.先上图.样式我做了部分修改. SlimMenu支持的功能有: 轻量级,css+js(压缩后),10k…

Bootstrap入门（二十九）JS插件6：弹出框

Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入CSS文件和JS文件 <link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery-3.1.0.min.js" type="text/javasc…

Bootstrap入门（二十八）JS插件5：工具提醒

Bootstrap入门(二十八)JS插件5:工具提醒 工具提示在使用过程中比较常见,但是实现起来有些麻烦,而bootstrap则很好地解决了这个问题. 我们来写一个简单的实例 先引入CSS文件和JS文件 <link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery-3.1.0.min.js" type="text/javascript"…

Bootstrap入门（二十五）JS插件2：过渡效果

Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js 文件,就无需再单独将其引入了. Transition.js 是针对 transitionEnd 事件的一个基本辅助工具,也是对 CSS 过渡效果的模拟.它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果. 通过代码啦展现一下 先创建一个有id的div,这里div的id为mydiv,内容直接…

toastr.js插件用法

toastr.js插件用法 toastr.js是一个基于jQuery的非阻塞通知的JavaScript库.toastr.js可以设定四种通知模式:成功.出错.警告.提示.提示窗口的位置.动画效果等都可以通过参数来设置,并且可以在官方网站上通过勾选参数来生成JavaScript代码,操作简单,容易上手,推荐使用. https://github.com/CodeSeven/toastr http://www.toastrjs.com 简单调用 简单调用toastr.js插件时,以下几步即可. ①  …

前端开发需要了解的JS插件

excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquery.tagcanvas.js       用途:构建tag云 下载地址:http://www.goat1000.com/tagcanvas.php jquery.fullPage.js      用途:网站整屏轮番 下载地址:http://www.jq22.com/jquery-info1124 案…

AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别

AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就是由CSS渲染和JS来控制行为的组件.比较不好理解就是Web组件,好像跟JS插件意思差不多,都是CSS和JS组成的.它们到底区别在哪?我们重点来讲这个.我们通过学习如何调用Web组件(其中的手风琴组件)来一步一步了解其与JS插件的区别.   示例01.Web组件-直接使用 (请下载附件查看示例) 示…

【干货】教你如何利用fullPage.js以及move.js插件打造高端大气的网站效果！

前言: 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次. 在学习过jQuery插件之后,才发现之前的很多网站特效完全可以借助jQuery插件来实现,今天我们来尝试使用move.js以及fullPage.js插件来制作一个"高端网站". 网站效果展示如下:  fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多…

rewrap-ajax.js插件

很久没有动手写技术的文章,这个过程中间一直在写日记,生活点滴的记录替代了技术文章的编写,可以看出以往的内心是激情或烈火,现在是... 最近写了一个JS插件,用圈内的话说叫造了个轮子,造的好与不好都不是自己说了算,关键还是大家用的好与不好.当然我自己也在使用,由于个人偏爱与喜好,所以未能借签其他Ajax框架的写法,目前的版本都是以版本一进行往上整合的成果,所以你想要全面了解内部的结构,可以先从版本一开始看起. 现在我们说说整体的设计结构,版本一是好友收集整理的方法,基础的写法已经成型,调用nati…

JS的简单用法

JS的简单用法 参考:http://www.w3school.com.cn/js/js_switch.asp JavaScript 是网络的脚本语言 JavaScript 是可插入 HTML 页面的编程代码. JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行. 1. 基础知识 1.1 实现 HTML 中的脚本必须位于 与 标签之间. 脚本可位于 HTML 的 或 部分中,或者同时存在于两个部分中. 通常的做法是把函数放入 部分中,或者放在页面底部.这样就可以把它们安置到同一…

移动端下拉刷新上拉加载-mescroll.js插件

最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小demo记录下来,因为没有过多需要解释说明的,所以直接贴出代码. 1.下载mescroll.js插件. 在页面中引入如下两个文件: mescroll.min.css mescroll.min.js 2.代码 <!DOCTYPE html> <html lang="en">…