最近浏览了不少网站的图片裁切效果,大部分的做法如下图所示(借用一张脚本之家的图片),通过改变裁切框的大小来选取合适的位置. 但本文介绍的是另外一种裁切方式,裁切框由开发者决定,图片大小由用户决定,通过缩放.拖动图片来选取合适位置,并且在这一过程中始终保持图片宽高比,demo如下. 这样做法主要有以下优点: 裁切框的宽高与跟实际使用的处宽高比一致,防止出现图片变形问题 不限制图片的显示大小,保证图片原始比例,通过缩放可得到原始尺寸 对于局部的裁切更加友好,比如截取一张高清图片中很小的一个部位,我们…

预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.…

Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视区域的时候,它就会改变图像的 src 属性,从服务端加载所需的图片,这也是一个异步的过程. 您可能感兴趣的相关文章 那些让人惊叹的的国外创意404错误页面设计 让人爱不释手的精美 Web 应用程序图标素材 赞!10套精美的免费网站后台管理系统模板 期待已久的2012年度最佳 jQuery 插件揭晓…

javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载.懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力. 懒加载的意义及实现方式有: 意义: 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 实现方式:…

JavaScript 图片滑动切换效果 作者:cloudgamer 时间: 2009-09-25 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript 图片滑动切换效果 [1] 第 2 页 JavaScript 图片滑动切换效果 [2] 序一(08/07/06)看到 alibaba 的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧.由于有了做 图片滑动展示效果 的经验,做这个就容易得多了. 序二(09/03/19)自写了 Tween缓动 之后就很想重新写…

介绍 在应用开发中,如果涉及到个人信息,头像一般是不可避免的,类似这种情况,我们就需要用到图片裁切的功能,实现头像裁切,然后上传给服务器. 一般裁切的做法就是图层叠加选取框,然后根据坐标,计算裁切区域,通过图形函数裁切,既然了解大概原理,造轮子的事情就不做了,上github找开源库,发现了一个叫做edmodo/cropper的库,是原生实现的裁切. 地址:https://github.com/edmodo/cropper 但是使用后发现这个库还存以下两个主要问题,体验就很不好了. 1.图片太大会…

在这一篇里,我来具体讲讲代码该如何写. 下面是jCrop的初始化代码 //图片裁剪插件Jcrop初始化 function initJcrop() { // 图片加载完成 document.getElementById('originalImg').onload = function () { var imgWidth = $("#originalImg").width(); var imgHeight = $("#originalImg").height(); //…

上一篇简单的介绍了一下开发的背景以及一些学习资料,下面开始介绍如何上手. 一.下载jCrop http://deepliquid.com/content/Jcrop_Download.html 直接去官网下载就好了. 二.将插件部署到项目中. 一般引入这两个文件就可以了. 三.开始初始化插件. 最简单的初始化 $(document).ready( function(){ $("#xuwanting").Jcrop(); } ); 这块就要好好说说了,网上的demo大部分都是像这样直接对…

javascript 代码: <script type="text/javascript"> function select_play() { var select_play_box = document.getElementById("select_play_box"); var aUl = select_play_box.getElementsByTagName("ul"); var aImg = aUl[0].getElemen…

当前情况,移动端的开发占比越来越高,单指的拖拽触碰等操作是常规需要.特殊的多指操作与手势操作还需另做处理,而且还涉及到兼容性问题. // 屏幕上存在两根或两根以上的手指 时触发 仅IOS存在手势事件,安卓不存在需要另外封装 // gesturestart 多指操作触发时 // gesturechange 两根手指发生变化时 // gestureend 两根手指全部抬起时 * 首先是手势操作的参数说明 init:{ el: 要添加事件的元素, start: 摁下时 要操作的事情(gesturest…