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


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 相关文章推荐
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
vue实现商城购物车功能
Nov 27 Javascript
Vue.use源码学习小结
Jun 20 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
js实现简易点击切换显示或隐藏
Nov 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
如何给phpadmin一个保护
2006/10/09 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
php中apc缓存使用示例
2013/12/25 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
Python IDLE清空窗口的实例
2018/06/25 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
python框架中flask知识点总结
2018/08/17 Python
pytorch实现线性拟合方式
2020/01/15 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
售后专员岗位职责
2013/12/08 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
迎新晚会主持词
2014/03/24 职场文书
承诺保证书格式
2015/02/28 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
解决vue中provide inject的响应式监听
2022/04/19 Vue.js