一个简单的javascript图片放大效果代码

网络编程 发布日期：2024/10/12 浏览次数：1

正在浏览：一个简单的javascript图片放大效果代码
一个简单的图片放大效果:
参数说明:
1.berviary:String,需要被放大的图片id
2.expand:object,放大区域,如果不设置此项或者此项的id未设置,则默认为光标跟随模式,会自动创建用于显示放大区域的div.
3.clip:object,裁剪区域的大小,即鼠标移动到需要放大的图片上时,突出显示需要被放的大区域
4.opacity:float,放大时图片被遮罩的区域的透明度
效果1:

调用的js代码:
复制代码 代码如下:
$E({berviary:"currentPic",expand:{id:"expand",style:{}},clip:{width:"50px",height:"50px"},opacity:"0.2"});

html代码:
复制代码 代码如下:
<div>
<div class="img_warp" id="img_warp">
<img src="/UploadFiles/2021-04-02/1.jpg"></div>
<div class="expand" id="expand" style="border: 1px solid #555; width:400px; height:400px;margin:-200px auto 0 auto; overflow:hidden;"></div>
</div>

演示效果:

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
效果2:

调用的js代码:
复制代码 代码如下:
$E({berviary:"currentPic",clip:{width:"100px",height:"100px"},opacity:"0.4"});

html代码:
复制代码 代码如下:
<div>
<div class="img_warp" id="img_warp">
<img src="/UploadFiles/2021-04-02/1.jpg"></div>
</div>

演示效果:

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
上一篇：根据对象的某一属性进行排序的js代码（如：name,age）
下一篇：js随机密码产生函数

一句话新闻

微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。