利用javascript实现图片动态的放大和缩小

最新推荐文章于 2022-03-19 16:26:40 发布
最新推荐文章于 2022-03-19 16:26:40 发布
阅读量1.1k 收藏
点赞数 1
文章标签： javascript JavaScript Javascript javaScript JAVASCRIPT 图片动态放大和缩小

利用javascript实现图片动态的放大和缩小


在网站经常用到缩略图,但一般情况下是不能改变大小的.文本实现了这么⼀个效果, 当你鼠标移到
缩略图上时, 缩略图动态的放大到设定的大小,鼠标移开时,动态的恢复到缩略图的大小.主要是通
过javascript实现.适当的应用可以增强用户体验.
文章原始链接:http://www.codeproject.com/useritems/Expanding_Image_Animator.asp
javascript代码如下:
// Thumbnail expansion and reduction animation
//use expandthumb(142, 500, 449) to increase and 
//reducethumb(142) to decrease the thumbnail
//142 represents the name of the thumbimage.. it should be like thumb142
// for reduceimage 
// and the expanded image id will be screen142 for the value 142 in 
//expandimage 
//500 and 449 are the enlarges size of the image
// Thumbnail expansion and reduction animation
//use expandthumb(
expandingid = 0;
expandingstep = 0;//放缩图片的当前步骤数
expandingwidth = 0;
expandingheight = 0;
expandingtop = 0;//图片的相对top
expandingleft = 0;//图片的相对left
expandingtimeout = 0;//定时器的标识 
expandingtotalsteps = 15;//放缩图片时的步骤次数
function expandthumb(thumbid, fullwidth, fullheight) {
if (expandingtimeout != 0) {
clearTimeout(expandingtimeout);
}
if (expandingid > 0 && expandingid != thumbid) {
restorethumb();
}
if (expandingid != thumbid) {
img = document.getElementById("screen" + thumbid);
img.style.display = 'block';
expandingid = thumbid;
expandingstep = 1;
expandingwidth = fullwidth;
expandingheight = fullheight;
expandingtop = img.offsetTop;
expandingleft = img.offsetLeft;
} else if (expandingstep < 1) {
expandingstep = 1;
}
expandstep();
}
function doexpand() {
img = document.getElementById("screen" + expandingid);
thumb = document.getElementById("thumb" + expandingid);
myscroll = getScroll();
if (expandingtop + thumb.height > myscroll.top + myscroll.height) {
finaltop = myscroll.top + myscroll.height - expandingheight;
} else {
finaltop = expandingtop + thumb.height - expandingheight;
}
if (finaltop < myscroll.top) { finaltop = myscroll.top; }
img.style.top = finaltop + ((expandingtop - finaltop) * 
(expandingtotalsteps - expandingstep) / expandingtotalsteps) + 'px';
if (expandingleft + thumb.width > myscroll.left + myscroll.width) {
finalleft = myscroll.left + myscroll.width - expandingwidth;
} else {
finalleft = expandingleft + thumb.width - expandingwidth;
}
if (finalleft < myscroll.left) { finalleft = myscroll.left; }
img.style.left = finalleft + ((expandingleft - finalleft) * 
(expandingtotalsteps - expandingstep) / expandingtotalsteps) + 'px';
img.width = thumb.width + ((expandingwidth - thumb.width) * 
expandingstep / expandingtotalsteps);
img.height = thumb.height + ((expandingheight - thumb.height) * 
expandingstep / expandingtotalsteps);
}
function restorethumb() {
img = document.getElementById("screen" + expandingid);
img.style.top = '';
img.style.left = '';
img.style.display = 'none';
expandingid = 0;
}
function expandstep() {
expandingtimeout = 0;
doexpand();
if (expandingstep < expandingtotalsteps) {
expandingstep++;
expandingtimeout = setTimeout("expandstep()", 20);
}
}
function reducestep() {
expandingtimeout = 0;
doexpand();
if (expandingstep > 0) {
expandingstep--;
expandingtimeout = setTimeout("reducestep()", 20);
} else {
restorethumb();
}
}
function reducethumb(thumbid) {
if (expandingtimeout != 0) {
clearTimeout(expandingtimeout);
}
if (expandingstep > 0) {
reducestep();
}
}
// returns the scroll position and size of the browser
function getScroll() {
if (document.all && typeof document.body.scrollTop != "undefined") { 
// IE model
var ieBox = document.compatMode != "CSS1Compat";
var cont = ieBox ? document.body : document.documentElement;
return {
left: cont.scrollLeft,
left: cont.scrollLeft,
top: cont.scrollTop,
width: cont.clientWidth,
height: cont.clientHeight
};
} else {
return {
left: window.pageXOffset,
top: window.pageYOffset,
width: window.innerWidth,
height: window.innerHeight
};
}
}
在html
<html>
<head>
<script language="javascript" type="text/javascript" src="expandimg.js"></script>
</head>
<body>
<img src='mypic.jpg' width=400 height=400 alt='img' border=0 id='screen142' 
οnmοuseοut='reducethumb(142); return false;' style='position: absolute; display: none;'>
<img src='mypic.jpg' width=100 height=100 alt='mis' border=0 id='thumb142' 
οnmοuseοver='expandthumb(142, 500, 449);'></a>
</body>
</html>

代码下载

Li_soso
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 实现图片点击放大、文本点击复制
1252661442的博客
01-10 432
以下是参考代码，删除过部分与主题没关系的代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="initial-scale=1.0,user-scalable...
JS图片img旋转、放大、缩小
zhoujans的专栏
09-27 8980
HTML代码： <div id="outerdiv"> <div> <img id="bigimg" src="" /> </div> </div> JS代码： <script> $(function(){ $('#uploadImagefileLists').on('click', '.im...
JavaScript 动态改变图片大小
10-29
本文作者通实际操作，发现可以用Javascript代码简单实现：对于图片大于100 X 100，则将其缩小为 100 X 100，若比这个小，则保持原图大小。
javaScript实现图片的放大和缩小
热门推荐
bwf_erg的博客
04-27 1万+
在这里我们带领大家来使用javaScript实现图片的放大和缩小。实现的效果图如下 点击放大按钮，图片会放大，当放大到一定程度的时候，图片不能再放大，会弹出一个提示框，不能再放大了，点击缩小按钮，图片会缩小，当缩小到一定程度的时候，图片不能再缩小，会弹出一个提示框，不能再缩小了。 下面我们先来实现界面的布局。 点击按钮图片进行缩放，可以看出需要将图片和按钮放置在一个div里面。 布
js实现图片放大镜效果——简单方法
yehaocheng520的博客
07-31 7259
之前写过一篇关于电商项目商品详情页面的图片放大镜效果：电商项目商品详情页的图片放大效果实现：https://blog.csdn.net/yehaocheng520/article/details/119003274?spm=1001.2014.3001.5501 当时是在vue项目中使用的，其实跟在js中原理也是一样的。 实现图片放大镜效果的重点就是下面的这张图了： 上面的方法中，右侧图片，为了实现放大，使用的是background背景图片的设置原理，给background-size设置大于1的参数，就
JS实现控制图片放大缩小代码
weixin_34342905的博客
07-15 362
<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="auther" content="f7" /><title>JS实现控制图片放...
影像在线开发框架--利用JavaScript工具实现
06-08
影像在线开发框架--利用JavaScript工具实现源代码，其中包括本地影像上传，影像下载，影像导出，影像显示-动态影像服务、缓存影像服务，影像高度量测，影像图例设置，影像查询-空间查询、属性查询，影像镶嵌规则，...
Javascript动态伸缩+淡出淡入
12-11
//interval变量 var inl = []; //原始透明度 var opa = 100; //判断浏览器 var ie =... //利用方块的display来判定是否缩小或放大 if(!$(‘tmp’).style.display) { mode = “-“; //display是正常的话设置interval缩小
canvasPractice:Use HTML5 canvas draw circles, and realize the zoom of the specified circle, select, change color, drag, delete.利用html5的canvas画圆，并实现指定圆的放大缩小、选中、更改颜色、拖动、删除
05-16
canvasPractice Use HTML5 canvas draw circles, and realize the zoom of the specified circle, select, change color, drag, delete...利用html5的canvas画圆，并实现指定圆的放大缩小、选中、更改颜色、拖动、删除
JS实现图片的放大和缩小
贾世鑫的博客
09-11 6880
示例代码：
js实现图片放大缩小功能
qq_42077317的博客
03-19 9742
在web项目中，用到js来实现图片的放大缩小功能，在这里是通过zoomify来实现，并在这个基础上进行二次改进，已达到更满意的效果。 1.下面是展示的效果： 通过对zoomifyjs改进，达到上述效果。 2.下面是具体实现的代码： var currScale=1; var currRotate=0; var currScaleX=0; var currScaleY=0; ;(function($){ // initialization Zoomify = function (element, op
javascript实现图片放大与缩小
web开发自学
06-07 325
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;
js实现缩略图功能
weixin_30260399的博客
05-07 624
基本功能：1,按给定的宽和高进行智能缩小2,按给定的宽和高进行固定缩小(会出现图片变形情况)3,按给定的宽进行等比例缩小4,按给定的高进行等比例缩小5,宽和高按百分比缩小程序代码<script type="text/javascript">/*********************基本描述：* 图片缩略,使用js的静态类实现*参数说明：* @ im : 可以为image对象...
js 图片放大缩小（动画效果）
yiwenyida的博客
09-07 1万+
javascript实现图片放大缩小（动画效果）
javascript控制图片缩放
云想慕尘的专栏
08-12 570
function DrawImage(ImgD,kw,kh) {    if (ImgD != null) {        var image=new Image();        image.src=ImgD.src;        if(image.heightimage.width) {//说明宽》高＝＝》以宽为标准            if(image.width>kw) {    
js利用鼠标来控制图片的放大和缩小代码
最新发布
06-07
以下是利用JavaScript实现鼠标控制图片放大和缩小的示例代码： ```html <!-- HTML结构 --> ``` ```css /* CSS样式 */ div { width: 500px; height: 500px; overflow: hidden; } img { width: 100%; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值