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


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 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
JavaScript URL参数读取改进版
Jan 16 Javascript
Jquery 滑入滑出效果实现代码
Mar 27 Javascript
javascript string字符串优化问题
Jul 31 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 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取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
IE中createElement需要注意的一个问题
2010/07/13 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
python购物车程序简单代码
2018/04/18 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
如何安装ruby on rails
2014/02/09 面试题
2014新年元旦活动策划方案
2014/02/18 职场文书
爱心捐书活动总结
2014/07/05 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
单位接收证明格式
2015/06/18 职场文书
医院消毒隔离制度
2015/08/05 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
详解nodejs内置模块
2021/05/06 NodeJs
Mysql案例刨析事务隔离级别
2021/09/25 MySQL