CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
今天用了很久时间终于解决了这个问题,基本完美了,唯一不完美的就是 IE 6 只有在图片完全下载完成后才会自动调整大小,不过聊胜于无,总比进入页面后看到长长的横向滚动条舒服的多,这里使用了 expression,但是利用了一次加载,所以 expression 不会造成内存泄漏。当然,如果你有更好的解决方案,希望能与我交流。
代码如下:
.Image { max-width:600px;height:auto;cursor:pointer; border:1px dashed #4E6973;padding: 3px; zoom:expression( function(elm) { if (elm.width>560) { var oldVW = elm.width; elm.width=560; elm.height = elm.height*(560 /oldVW); } elm.style.zoom = '1'; }(this)); }
相关推荐
-
asp正则html的图片,对图自动缩放大小
下面这个是比较不错的一个 复制代码 代码如下: Function FormatImg2(content) dim re Set re=new RegExp re.IgnoreCase =true re.Global=True re.Pattern="(script)" Content=re.Replace(Content,"script"
-
javascript图片自动缩放和垂直居中处理函数
复制代码 代码如下: <html> <head> <title>Untitled</title> <style type="text/css"> .testCss{width:200px;height:300px;border:1px red solid;text-align:center;display:block;} .testCss1{width:300px;height:300px;border:1px red sol
-
兼容ie、firefox的图片自动缩放的css跟js代码分享
需求:图片width<=330px,height<=150. 1.利用max-width,max-height使图片等比例自动缩放,代码: 复制代码 代码如下: img{max-width: 330px;max-height: 150px;} 由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小. 2.用javascript脚本来兼容ie6,代码如: 复制代码 代码如下: var img_width = img.Offset
-
CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
今天用了很久时间终于解决了这个问题,基本完美了,唯一不完美的就是 IE 6 只有在图片完全下载完成后才会自动调整大小,不过聊胜于无,总比进入页面后看到长长的横向滚动条舒服的多,这里使用了 expression,但是利用了一次加载,所以 expression 不会造成内存泄漏.当然,如果你有更好的解决方案,希望能与我交流. 代码如下: .Image { max-width:600px;height:auto;cursor:pointer; border:1px dashed #4E6973;pad
-
用CSS来控制图片显示大小的代码
复制代码 代码如下: img,a img{ border:0; margin:0; padding:0; max-width:590px; width:expression(this.width>590?"590px":this.width); max-height:590px; height:expression(this.height>590?"590px":this.he
-
js支持键盘控制的左右切换立体式图片轮播效果代码分享
本文实例讲述了js支持键盘控制的左右切换立体式图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现支持键盘控制的左右切换立体式图片轮播效果,特别有立体感,最重要的一点是可以利用键盘进行控制. 特性介绍: 1.轻松的改变幻灯变的宽度. 2.轻易改变下一张展示图片的数量. 3.最后一张图片会循环回到第一张图片里. 4.嵌入了Fancy查看插件,在每张图片上都能查看详细图片信息. 运行效果图:
-
JS图片自动轮换效果实现思路附截图
今天不在状态,安静五一快到了,俺就特想玩了.好了,天色已晚,闲话不多说,看下用javaScript 实现的图片自动轮换效果,先看图片 下面是具体的代码,还是比较简单的. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x
-
jquery实现图片水平滚动效果代码分享
本文实例讲述了jquery实现图片水平滚动效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery实现图片水平滚动效果代码如下 <HEAD> <META content="text/html; charset=gb2312" http-equiv="Content-Type"> &
-
Android实现通过手势控制图片大小缩放的方法
本文实例讲述了Android实现通过手势控制图片大小缩放的方法.分享给大家供大家参考,具体如下: 该程序实现的是通过手势来缩放图片,从左向右挥动图片时图片被放大,从右向左挥动图片时图片被缩小,挥动速度越快,缩放比越大.程序思路如下:在界面中定义一个ImageView来显示图片,使用一个GestureDetector来检测用户的手势,并根据用户的手势在横向的速度来缩放图片. 在介绍这个实例前,先介绍一下Android中处理手势触摸事件的大概框架. 一.添加语句实现OnGestureListener
-
JS实现图片自动播放效果
本文实例为大家分享了JS实现图片自动播放效果的具体代码,供大家参考,具体内容如下 JS实现图片自动播放 1.先看效果图 2.完整代码 <!DOCTYPE html> <html> <head> <style> /* 定义样式 */ body{ margin: 5% 30%; } .bannerimage{width:700px;height:400px;float:left;background-size:100% 100%;color:#fff;box-s
-
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!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"> <he
随机推荐
- 利用CSS3新特性创建透明边框三角
- windows下vue.js开发环境搭建教程
- Golang中如何使用lua进行扩展详解
- 使用jquery给指定的table动态添加一行、删除一行
- DOS批处理中%cd%和%~dp0的异同分析
- 批处理写的电视机效果代码
- 第三节--定义一个类
- 基于php验证码函数的使用示例
- 可实现多表单提交的javascript函数
- Python的re模块正则表达式操作
- Android实现点击AlertDialog上按钮时不关闭对话框的方法
- Android RecyclerView网格布局(支持多种分割线)详解(2)
- 详解C++中的增量运算符++和减量运算符--的用法
- Godaddy 导入导出MSSQL数据库的实现步骤
- 两千行代码的PHP学习笔记汇总
- JAVA格式化时间日期的简单实例
- Java中for循环的执行过程分析
- preg_match_all使用心得分享
- 基于make命令与makefile文件详解
- Android闹钟机制实现定时任务功能