Javascript检查图片大小不要让大图片撑破页面
如何用Javascript判断图片大小,其实只要写一个简单的函数就可以了,当然这么判断要怎么写很多人可能不知道。发觉用 ASP 判断图片大小比数牛毛还繁复, 且判断了就判断了, 还要逻辑显示。..烦。 用 Javascript 判断, 轻松搞定, 最终效果无非就是不要让大图片撑破页面。
<script LANGUAGE=“JAVASCRIPT”> //检查图片大小是否大于预期大小, 大于则显示为预期大小 function show(chkw) { //chk images width if(chkw>500) { chkw=500; } else { chkw=chkw; } return chkw; }//shawl.qiu script //example <img src=“images/teach/opera/01.jpg” onload=“this.width=show(this.width)” > </script> 1.鼠标经过自动选取的复选框: <input TYPE=“checkbox” onMouseMove=“checked=true”> <input TYPE=“checkbox” onMouseMove=“checked=true”> 2.ACCESS 列出某一天所属星期的天数 //这个算法可费了我个把小时 查询一个日期所隶属星期所有天数的数据 SELECT * FROM ctdate_by_query_date WHERE dateandtime between ((#2006-5-15#+Weekday(2006-5-15))-6) and #2006-5-15#+Weekday(2006-5-15) 3. 双击滑鼠拷贝文本, 现在双击一下就清楚 <script LANGUAGE=“JAVASCRIPT”> function ClipBoard(tdObj) { //IE Only var holdtext = document.all[‘holdtext']; holdtext.innerText = tdObj.innerText; Copied = holdtext.createTextRange(); Copied.execCommand(“Copy”); alert(“text copied”); } </script> <form NAME=“form1” METHOD=“post” ACTION=“”> <ttextarea id=“holdtext” style=“display:none” ROWS=“10”></ttextarea> </form>
相关推荐
-
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
一.需求 点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof</title> <style type="text/css">
-
基于JavaScript实现移动端TAB触屏切换效果
展示效果图如下所示: 效果演示 源码下载 我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目,如网易新闻等APP栏目切换.我们说的TAB一般由导航条和TAB对应的内容组成,切换导航条上的标签同时标签对应的内容也会跟着切换.本文将结合实例给大家介绍一个移动端TAB触屏切换效果. HTML 我们准备一个TAB导航#pagenavi,里面包含TAB导航要切换的四个导航按钮,然后是切换的主体内容#slider,这里应该放置四个li与导航按钮对应,内容自定义. <div class="box-
-
javascript判断移动端访问设备并解析对应CSS的方法
本文实例讲述了javascript判断移动端访问设备并解析对应CSS的方法.分享给大家供大家参考.具体分析如下: javascript判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的): 复制代码 代码如下: // 判断是否为移动端运行环境 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel
-
用javascript制作放大镜放大图片
emu 原图: 局部放大图: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
Javascript实现视频轮播在pc端与移动端均可
最近客户要求用Javascript实现视频轮播: 有兴趣的同学可以参开一下 下面写了一个程序实现视频轮播,pc端与移动端均可以实现, 但移动端,存在有一点bug; 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <met
-
javascript 获取图片尺寸及放大图片
1)获取图片尺寸 复制代码 代码如下: <img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(实际大小200*300)" onclick="getWH(this)" width="200" height="300"/> <script>
-
Javascript检查图片大小不要让大图片撑破页面
如何用Javascript判断图片大小,其实只要写一个简单的函数就可以了,当然这么判断要怎么写很多人可能不知道.发觉用 ASP 判断图片大小比数牛毛还繁复, 且判断了就判断了, 还要逻辑显示...烦. 用 Javascript 判断, 轻松搞定, 最终效果无非就是不要让大图片撑破页面. <script LANGUAGE="JAVASCRIPT"> //检查图片大小是否大于预期大小, 大于则显示为预期大小 function show(chkw) { //chk images
-
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
本文实例讲述了jQuery实现鼠标滑过商品小图片上显示对应大图片功能.分享给大家供大家参考,具体如下: 1 . 效果截图 2 . 代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery图片变换</title> </head> <style type="text/css"
-
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
为了防止图片撑破布局,最常见的仍然是通过onload后获取图片尺寸再进行调整,所以加载过程中仍然会撑破.而Qzone日志的图片在此进行了改进,onload完毕后才显示原图.我以前用onload写过一个小例子:http://www.planeart.cn/?p=1022 通过imgReady可以跨浏览器在dom ready就可以实现图片自适应,无需等待img加载,代码如下: (3-17修复网友crossyou 指出的一处错误,并且新版本去掉了替换图片) 复制代码 代码如下: // jquery.a
-
jQuery实现点击小图片淡入淡出显示大图片特效
分享一款基于jQuery点击淡入淡出显示图片特效.这是一款基于jQuery+CSS3实现酷炫效果的图片切换特效代码.效果图如下: 在线预览 源码下载 html代码: <center><p style="color:#334960">点击图标进行展示</p></center> <div class="main"> <div id="coolShow"></div&g
-
图片自动缩小的js代码,用以防止图片撑破页面
JS代码(随便放哪里): <script language="JavaScript"> <!-- var flag=false; function DrawImage(ImgD){ var image=new Image(); image.src=http://www.jb51.net/htmldata/2006-01-08/ImgD.src; if(image.width>0 && image.height>0){ fl
-
jQuery实现等比例缩放大图片让大图片自适应页面布局
在布局页面时,有时会遇到大图片将页面容器"撑破"的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种方法不可取.但是,针对网站内容页,如本站文章详情页,如果需要加载一张很大的图片时,为了防止"
-
javascript实现获取图片大小及图片等比缩放的方法
本文实例讲述了javascript实现获取图片大小及图片等比缩放的方法.分享给大家供大家参考,具体如下: 获取图片大小: var originImage = new Image(); function GetImageWidth(oImage) { if (originImage.src != oImage.src) originImage.src = oImage.src; return originImage.width; } function GetImageHeight(oImage)
-
JavaScript 动态改变图片大小
最近由于项目需要,在实现图片的时候,若图片大于100 X 100,则将其缩小为 100 X 100,若比这个小,则保持原图大小.经过研究发现,可以用Javascript代码简单实现. Javascript代码: 复制代码 代码如下: <script> function resizeImage(obj){if(obj.height>100)obj.height=100;if(obj.width>100)obj.width=100; } </script> 页面代码: 复制
-
基于JavaScript获取base64图片大小
base64原理 Base64编码要求把3个8位字节(38=24)转化为4个6位的字节(46=24),之后在6位的前面补两个0,形成8位一个字节的形式. 如果剩下的字符不足3个字节,则用0填充,输出字符使用'=',因此编码后输出的文本末尾可能会出现1或2个'=' 如何获取base64图片大小 通过base64编码原理我们知道,base64的图片字符流中的每8个字符就有两个是用0补充,而且字符流的末尾还可能存在'='号,我们可以通过这个原理计算图片的文件流大小. getImgByteSize(da
-
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"> <hea
随机推荐
- Vue基于NUXT的SSR详解
- JSP Spring配置文件中传值的实例详解
- 编程语言里的静态、动态、强类型、弱类型等概念介绍
- 详解Angular的8个主要构造块
- PC 端微信扫码注册和登录实例
- perl处理xml的模块介绍
- JavaScript实现点击按钮字体放大、缩小
- VC中使用ADO开发数据库应用程序简明教程
- php中get_magic_quotes_gpc()函数说明
- PHP 匿名函数与注意事项详细介绍
- Centos6.5和Centos7 php环境搭建方法
- Mysql事项,视图,函数,触发器命令(详解)
- PHP检测字符串是否为UTF8编码的常用方法
- JavaScript中的this关键字介绍与使用实例
- 点击页面其它地方隐藏该div的两种思路
- jQuery内容过滤选择器用法示例
- SQL学习笔记三 select语句的各种形式小结
- NPOINT免费虚拟主机管理系统windows2003的安装方法【图文】第1/2页
- JS打开图片另存为对话框实现代码
- php 定界符格式引起的错误