网页里控制图片大小的相关代码


Posted in Javascript onJune 25, 2006

1、用鼠标拖动来改变大小
<SCRIPT LANGUAGE="JavaScript">
function resizeImage(evt,obj){
newX=evt.x
newY=evt.y
obj.width=newX
obj.height=newY
}
</script>
<img src="7say.gif" ondrag="resizeImage(event,this)">

2、用鼠标滚动控制图片大小
<img src="7say.gif" onmouseenter="focus();" onmouseout="blur();" onmousewheel="width+=(window.event.wheelDelta==120)?-5:+5;">

3、图片标签里用代码控制大小
<img border="0" src="[!--picurl--]" onload="if(this.width>screen.width-500)this.style.width=screen.width-500;">

4、CSS控制图片大小
1. css2直接实现: img{max-width: 500px;} (IE暂不支持)
2. expression实现: img{width:expression(width>500?"500px":width);} (IE only)
3. 使用js. 方法: 用 document.getElementsByTagName("IMG") 的方法取得全部img元素 遍历img元素 判断其宽度并做相应操作

Javascript 相关文章推荐
js中匿名函数的N种写法
Sep 08 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
jquery获取当前点击对象的value方法
Feb 28 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 Javascript
如何取得中文输入的真实长度?
Jun 24 #Javascript
快速保存网页中所有图片的方法
Jun 23 #Javascript
网页常用特效代码整理
Jun 23 #Javascript
文本加密解密
Jun 23 #Javascript
解密效果
Jun 23 #Javascript
CheckBox 如何实现全选?
Jun 23 #Javascript
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 #Javascript
You might like
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
webpack打包js的方法
2018/03/12 Javascript
vue如何判断dom的class
2018/04/26 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
解决Python传递中文参数的问题
2015/08/04 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
实习科室评语
2015/01/04 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
JavaScript实现简单的音乐播放器
2022/08/14 Javascript