js实现固定显示区域内自动缩放图片的方法
本文实例讲述了js实现固定显示区域内自动缩放图片的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #img{ width:600px; height:400px; position:relative; overflow:hidden; background:#996699;} </style> </head> <body> <div id="img"><img src="dsds.JPG" onload="resize_img(this,600,400)" /></div> </body> </html> <script type="text/javascript"> function resize_img(pic,w,h){ var re_new_size=function(r){ //根据比率重新计算宽度 return {w:pic.width/r,h:pic.height/r}; }; var re_offset=function(n){ //根据新的宽高度返回偏移量 return {off_l:(n.w-w)*0.5,off_t:(n.h-h)*0.5}; }; var re_position=function(o,n){ //重新定位图片 pic.style.cssText="position:absolute;top:"+-o.off_t+"px;left:"+-o.off_l+"px;width:"+n.w+"px;height:"+n.h+"px;"; }; var execute=function(rate){ var new_size=re_new_size(rate), offset_new=re_offset(new_size); re_position(offset_new,new_size); }; var rate_of_w=pic.width/w, rate_of_h=pic.height/h, rate; if(rate_of_w>=1){ //图片宽度大于显示区域宽度 if(rate_of_h>=1){ //且图片高度大于显示区域高度 rate=Math.min(rate_of_w,rate_of_h); }else{ //图片高度小于显示区域 rate=pic.height/h; } }else{ //图片宽度小于显示区域宽度 if(rate_of_h>=1){ //且图片高度大于显示区域高度 rate=pic.width/w; }else{ //图片高度小于显示区域高度 rate=Math.min(rate_of_w,rate_of_h); } } execute(rate); //执行入口 } </script>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
js实现鼠标滚轮控制图片缩放效果的方法
本文实例讲述了js实现鼠标滚轮控制图片缩放效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm
-
js实现兼容IE、Firefox的图片缩放代码
本文实例讲述了js实现兼容IE.Firefox的图片缩放代码.分享给大家供大家参考,具体如下: function SetSize(obj, width, height) { myImage = new Image(); myImage.src = obj.src; if (myImage.width > 0 && myImage.height > 0) { var rate = 1; if (myImage.width > width || myImage.height
-
JS实现按比例缩放图片的方法(附C#版代码)
本文实例讲述了JS实现按比例缩放图片的方法.分享给大家供大家参考,具体如下: js版本: function resizeImage(obj, MaxW, MaxH) { var imageObject = obj; var state = imageObject.readyState; if(state!='complete') { setTimeout("resizeImage("+imageObject+","+MaxW+","+MaxH+&
-
利用javascript解决图片缩放及其优化的代码
一个客户跟我联系说,刚给他做的网站,显示不正常,我顿时一紧张,这是我独立完成的第一个项目,于是赶紧打开他的网站看了看,没看出什么不正常来.我又问他怎么不正常,他说和交接项目时的效果不一样,晕,交接时要是不正常,项目肯定交接不了啊,干脆让他截个图过来.果然不正常,是他刚上传的一张图片把显示内容的窗口撑开了.查看代码,明明写好了max-width,怎么还会出现这种情况.突然发现他发来的图上,那个浏览器看着不顺眼,像是古老的而神圣的IE6!经过确认,果然是它,又是它!我真是疏忽,没给他在IE6下测试就
-
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
最近的项目里面需要对书籍的封面进行处理,就是加一条阴影线形成书脊的凹凸感,然后将书脊切出,分成两部分,以便客户端实现打开动画.由于需要在服务器端处理,使用就研究使用imagemagick来进行.同时准备封装了一个Node.js和Python的方法,主要还是讲一下然后使用imagemagick来对图片进行缩放.合成后进行裁剪吧. 首先素材文件如下(左边未处理封面,右边为需要合成上去的阴影): 安装ImageMagick的过程就不讲了,可以参考官网的安装方法:http://www.imagemagi
-
js 图片缩放(按比例)控制代码
缩放代码: 复制代码 代码如下: 缩放代码: <script type="text/javascript"> //图片按比例缩放 var flag = false; function DrawImage(ImgD, iwidth, iheight) { //参数(图片,允许的宽度,允许的高度) var image = new Image(); image.src = ImgD.src; if (image.width > 0 && image.heig
-
js 图片缩放特效代码
图片特效 .lightbox{width:300px;background:#FFFFFF;border:1px solid #ccc;line-height:25px; top:5%; left:5%;} .lightbox dt{background:#f4f4f4;} var isIE = (document.all) ? true : false; var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0]
-
JS 图片缩放效果代码
复制代码 代码如下: <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>onMouseWheel</TITLE> <SCRIPT> var count = 10; function Picture() { count = Counting(count); Resize
-
js实现头像图片切割缩放及无刷新上传图片的方法
本文实例讲述了js实现头像图片切割缩放及无刷新上传图片的方法.分享给大家供大家参考.具体如下: fname:后台接收时用的名字, 必填 funstr:开始上传执行的函数, 默认无 funbak:上传成功后的回调函数, 必填 furl:上传地址: 默认当前form的提交页面 注意:上传地址和当前地址必须为同意域名否则回调函数获取不到 上传成功发回的地址. a.php: $path='a.jpg'; move_uploaded_file($_FILES['uimg']['tmp_name'],$
-
js实现固定显示区域内自动缩放图片的方法
本文实例讲述了js实现固定显示区域内自动缩放图片的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
-
jquery实现根据浏览器窗口大小自动缩放图片的方法
本文实例讲述了jquery实现根据浏览器窗口大小自动缩放图片的方法.分享给大家供大家参考.具体如下: (function($){ $.fn.resizeimage = function(){ var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if (img.complete) { callback(img.width, img.height); } else { img.onload =
-
JS实现先显示大图后自动收起显示小图的广告代码
本文实例讲述了JS实现先显示大图后自动收起显示小图的广告代码.分享给大家供大家参考.具体如下: 这是一个非常不错的JavaScript图片特效,当最初打开网页的时候,显示的是大图片,就像遮屏广告一样,停留一会后,自动缓慢收起,这时由JS控制更换广告图片,始终显示在网页顶部,在一些大门户网站我们经常见到这种效果,个人感觉挺酷哦! 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-big-to-small-pic-adv-codes/ 具体代
-
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
本文实例讲述了JS实现放大.缩小及拖拽图片的方法.分享给大家供大家参考,具体如下: var divId; var v_left; var v_top; window.onload=function(){ divId = document.getElementById("block1"); var height1 = images1.height;//图片的高度 var width1 = images1.width;//图片的宽度 v_left=(document.body.client
-
php随机显示指定文件夹下图片的方法
本文实例讲述了php随机显示指定文件夹下图片的方法.分享给大家供大家参考.具体如下: 此代码会从指定的服务器文件夹随机选择一个图片进行显示,非常有用,图片格式为.gif,.jpg,.png <?php //This will get an array of all the gif, jpg and png images in a folder $img_array = glob("/path/to/images/*.{gif,jpg,png}",GLOB_BRACE); //Pi
-
JS中使用FormData上传文件、图片的方法
关于FormData XMLHttpRequest Level 2添加了一个新的接口 ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件 FormData对象 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用F
-
jQuery实现按比例缩放图片的方法
本文实例讲述了jQuery实现按比例缩放图片的方法.分享给大家供大家参考,具体如下: 做网站的时候,相信有很多朋友都会遇到图片过大,导致页面撑开变形的问题,如果强制设置width,height,图片则会因为强制变形而走样.在这里我介绍一种简单的按比例缩放图片的方法. 对于一堆图片 <img src="1.jpg" border="1"></img> <img src="2.jpg" border="1&qu
-
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
本文实例讲述了jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法.分享给大家供大家参考.具体如下: 左右拖拽切换对比图片效果,运行效果后,图片中间有个拖动条,拖动左右滑动,可看到图片不一样的效果,女模特的脸变嫩了,呵呵,其实是用了两张背景图片实现的,这就需要jquery.beforeafter.js插件了,拖动时候的小图标不见了,路径可以在jquery.beforeafter.js中设置,不多说了. 运行效果截图如下: 在线演示地址如下: http://d
-
python自动下载图片的方法示例
近日闲来无事,总有一种无形的力量萦绕在朕身边,让朕精神涣散,昏昏欲睡. 可是,像朕这么有职业操守的社畜怎么能在上班期间睡瞌睡呢,我不禁陷入了沉思.... 突然旁边的IOS同事问:'嘿,兄弟,我发现一个网站的图片很有意思啊,能不能帮我保存下来提升我的开发灵感?' 作为一个坚强的社畜怎么能说自己不行呢,当时朕就不假思索的答应:'oh, It's simple. Wait for me a few minute.' 点开同事给的图片网站, 网站大概长这样: 在朕翻看了几十页之后,朕突然觉得有点上头.心
随机推荐
- python实现博客文章爬虫示例
- 恶意批处理.bat
- LUA中的闭包(closure)浅析
- telnet连接操作memcache服务器详解
- AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
- 批处理中直接执行vbs的方法
- python基础教程之面向对象的一些概念
- asp.net GridView控件中模板列CheckBox全选、反选、取消
- 表格 隔行换色升级版
- Cocos2d-x 3.0中集成社交分享ShareSDK的详细步骤和常见问题解决
- MySQL循环语句之while循环测试
- js实现图片无缝滚动特效
- IIS中ASP.NET连接SQL Server出错的解决方法
- sqlserver关于分页存储过程的优化【让数据库按我们的意思执行查询计划】
- 宝塔Linux面板 2.8.9稳定版介绍
- 举例讲解JavaScript中关于对象操作的相关知识
- Android AndBase框架内部封装实现进度框、Toast框、弹出框、确认框(二)
- 采集操作使用详细说明
- 浅析Java编程中枚举类型的定义与使用
- Android App中实现相册瀑布流展示的实例分享