JS放大或者缩写图片 放大镜

最新推荐文章于 2023-01-17 01:29:34 发布
最新推荐文章于 2023-01-17 01:29:34 发布
阅读量1.3k 收藏
点赞数
分类专栏： js


http://bbs.csdn.net/topics/390265811
<!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" >
< head >
< title >JS放大或者缩写</ title >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
< style type = "text/css" >
.zoomPan{width:570px;left:100px;position:relative; }
.sh{zoom:1;background:#eee;filter:progid:DXImageTransform.Microsoft.dropShadow(color='#54000000', OffX=2,OffY=2);-webkit-box-shadow:4px 4px 4px #666;-moz-box-shadow:4px 4px 4px #666;}
#zoom{position:absolute;width:254px;height:254px;border:3px solid #fff;left:-9999px;top:0;overflow:hidden;background:#fff;}
#zoom img{position:relative;}
h1{color:#FF0080;border-bottom:5px solid #ddd;padding:10px;}
h4{text-align:right;padding:20px;border-top:1px solid #ddd;color:#ccc;}
</ style >
</ head >
< body >
< h1 >zoom</ h1 >
< div class = "zoomPan" id = "zoomPan" >
    < img src = "/jscss/demoimg/201008/s.jpg" alt = ""  />
    < div id = "zoom" class = "sh" >< img src = "/jscss/demoimg/201008/b.jpg" alt = "" /></ div >
</ div >
< h4 >code.js.cn</ h4 >
</ body >
< script type = "text/javascript" >
// <![CDATA[
function zoomBox() {this.index.apply(this, arguments)}
zoomBox.prototype = {
    index: function(win,zoom) {
        var win=document.getElementById(win);
        var box=document.getElementById(zoom);
        var img=box.getElementsByTagName('IMG')[0];
        var zoom=img.width/win.getElementsByTagName('IMG')[0].width;
        var z=Math.round(box.offsetWidth/2);
        win.onmousemove=function (e){
            e = e || window.event;
            var x=e.clientX,y=e.clientY, ori=win.getBoundingClientRect();
            if (x>ori.right+20||y>ori.bottom+20||x<ori.left-20||y<ori.top-20)box.style.display='none';
            x-=ori.left;
            y-=ori.top;
            box.style.left=x-z+'px';
            box.style.top=y-z+'px';
            img.style.left=-x*zoom+z+'px';
            img.style.top=-y*zoom+z+'px';
        }
        win.onmouseover=function (){box.style.display=''}
    }
};
window.onload=function (){
    x=new zoomBox('zoomPan','zoom')
}
//]]>
</ script >
</ html >
 
 
 
http://bbs.csdn.net/topics/390265811 2楼
funi16
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
zoomPan.js:放大、移动查看图片(alpha)
05-14
一个放大、移动查看图片的js组件 通过鼠标滚动来放大，点击拖动来移动
JQ的产品图片及缩略图放大展示效果html代码（用于制作产品页）
10-14
HTML+CSS+JQ的产品图片及缩略图放大展示效果html代码（用于制作产品页）
jquery: JS淘宝网产品图片局部放大代码
Just Code
01-13 478
  实例： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&..
图片查看器（图片放大缩小功能）
木子小姐
01-12 5489
第一： Viewer.js 链接：http://www.dowebok.com/192.html 使用方法 1、引入文件 JS 版本： jQuery 版本： 注意：JS 版本和 jQuery 版本名字虽然一样，但代码不一样，不能通用，请到 github 上下载需要的版本。 2、HTML      3、JavaScript
JS封装大额数值缩写为k、w函数
Hello博客
03-24 984
封装函数： function numFormat(num) { if (num >= 10000) { num = Math.round(num / 1000) / 10 + 'w' } else if (num >= 1000) { num = Math.round(num / 100) / 10 + 'k' } return num } console.log(numFormat(9527)) // 输出：9.5k console.l
放大镜
MrHaowenxiao的博客
09-10 127
放大器在购物网站中很常用，京东，淘宝，都会用到放大器的相关知识，而本次博客将为大家介绍使用javascript编写放大器的例子。 注：本次使用的图片 基本图片：名称：iphone.jpg  宽：350像素 高：350像素                 放大图片：名称：iphone_big.jpg  宽：800像素 高：800像素                  下面是javascrip
放大镜在JavaScript中的实现
执笔写流年殇的博客
09-11 369
大家好，我是执笔写流年殇，本次将为大家讲解一下放大器在Javascript中的实现，希望对大家有所帮助。 放大器在购物网站中很常用，京东，淘宝，都会用到放大器的相关知识，而本次博客将为大家介绍使用javascript编写放大器的例子。 注：本次使用的图片 基本图片：名称：iphone.jpg  宽：350像素 高：350像素                 放大图片：名称：iphone_bi
纯原生js实现实现放大镜特效
qq_62415996的博客
01-17 138
用原生js实现的放大镜特效
Javascript放大镜的实现
weixin_30596165的博客
09-13 65
<!----大家好，我是XXX，本次将为大家讲解一下放大器在Javascript中的实现，希望对大家有所帮助。 放大器在购物网站中很常用，京东，淘宝，都会用到放大器的相关知识，而本次博客将为大家介绍使用javascript编写放大器的例子。 注：本次使用的图片 基本图片：名称：iphone.jpg 宽：350像素 高：350像素 放大图片：名称：i...
phpweb 产品模块 放大镜插件
10-08
放大镜插件的实现主要基于JavaScript和CSS技术。JavaScript，尤其是jQuery库，通常被用来处理用户的交互事件，如鼠标移动和点击。当用户将鼠标悬停在图片上时，JavaScript会捕获这个事件，并显示一个放大的图像区域...
仿ppg放大镜效果.rar
07-04
标签“JS特效-图片相册”表明这个压缩包包含的是用JavaScript编写的代码，用于创建一种图片相册的特殊效果，即放大镜效果。JavaScript是一种广泛用于网页动态效果和交互的编程语言，它可以操作DOM（文档对象模型）来...
安卓图片旋转放大缩写透明度调整例子
10-16
在Android开发中，图片的处理是一项常见的任务，包括图片的旋转、放大缩小以及调整透明度等操作。这些功能对于创建用户友好的应用至关重要，尤其是在处理用户上传或显示图像时。以下将详细介绍这些知识点： 1. 图片...
jquery放大镜的显示
06-16
2. `ImageZoom.js`：这是一个JavaScript文件，很可能包含了实现图片放大镜效果的具体代码。它可能通过监听鼠标移动事件，实时调整放大镜区域的位置和大小，展示图片的放大视图。 3. `CJL.0.1.min.js`：可能是另一个...
jquery图片居中放大特效代码
03-20
"jquery图片居中放大特效代码"是利用jQuery来实现的一种常见的用户体验增强功能，当用户将鼠标悬停在图片上时，图片会自动居中并放大显示，这种效果在产品展示或图像预览中非常常见。 首先，要实现这个效果，我们...
最全js 放大镜效果
weixin_30362801的博客
12-11 57
<!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"> <head> <...
js 图片放大缩小（动画效果）
热门推荐
yiwenyida的博客
09-07 1万+
javascript实现图片放大缩小（动画效果）
常见算法介绍和算法刷题（含解析与代码）.txt
07-15
常见算法介绍和算法刷题（含解析与代码） 算法介绍 算法是一种解决问题的方法，通过使用算法，我们可以将问题转换为计算机可以执行的指令。常见的算法包括排序算法、搜索算法、图算法、动态规划算法等。 排序算法 1. 冒泡排序（Bubble Sort） 冒泡排序是一种简单的排序算法，它通过重复地走访要排序的数据，来找出其中最小的数据，并把它移到最前面。 示例代码： def bubble_sort(arr): n = len(arr) for i in range(n-1): for j in range(0, n-i-1): if arr[j] > arr[j+1]: arr[j], arr[j+1] = arr[j+1], arr[j] return arr 2. 快速排序（Quick Sort） 快速排序是一种常用的排序算法，它通过选择一个 pivot 元素作为枢纽，并将其他元素分配到枢纽的两侧。 示例代码： def quick_sort(arr): if len(a
oracle常用函数及语法
最新发布
07-15
多年积累Oracle常见的优化措施及自定义函数库
麦克风放大 agc 芯片
07-17
例如，在音频设备中，AGC芯片可以用于调节麦克风信号的放大，使得录音或者通话中的声音始终保持在一个合适的音量范围内，避免声音过弱或者过强。此外，AGC芯片还可以用于音频处理和通信系统中，确保信号的稳定性和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值