js图片放大镜特效代码
2024-10-19 00:23:13
<script language="JavaScript">
<!--
var srcX = 1024; //原图长宽
var srcY = 768;
var bigX = 500; //原比例预览大小,可以设置成任意大小
var bigY = 300;
var smallX = 256; //缩略图大小,要与原大小成比例
var smallY = 192;
var viewX = bigX / srcX * smallX; //预览范围
var viewY = bigY / srcY * smallY;
var bl = srcX / smallX;//缩小比例
var border = 8; //边框
window.onload=function (){
bigbox.style.borderWidth=border;
bigbox.style.width=bigX+border*2;
bigbox.style.height=bigY+border*2;
smallpic.width=smallX;
smallpic.height=smallY;
view.style.width=viewX;
view.style.height=viewY;
smallbox.style.borderWidth=border;
if (window.event){
smallbox.style.width=smallpic.offsetWidth+border*2;
smallbox.style.height=smallpic.offsetHeight+border*2;
}else{
smallbox.style.width=smallpic.offsetWidth;
smallbox.style.height=smallpic.offsetHeight;
}
move(event);
}
function move(e){
var e = window.event?window.event:e;
var iebug = 0;
if (window.event){
var vX = e.offsetX - viewX/2;
var vY = e.offsetY - viewY/2;
}else{
var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border;
var vY = e.pageY - viewY/2 - smallbox.offsetTop - border;
iebug = 2;
}
if (vX < 0) vX = 0;
if (vY < 0) vY = 0;
if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug;
if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug;
view.style.left = vX + smallbox.offsetLeft + border;
view.style.top = vY + smallbox.offsetTop + border;
bigbox.style.backgroundPosition= - vX * bl + " " + -vY * bl;
}
//-->
</script> <style type="text/css">
<!--
*{padding:0;margin:0}
img{display:block;}
#smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;background:url('/upload/20071130224657571.jpg') no-repeat;}
#view{border:1px #ddd solid;width:0px;height:0px;position:absolute}
.head{text-align:center;line-height:40px;font:bold 16px/40px;color:red}
//-->
</style>
<div class="head">图片放大效果</div>
<div id="smallbox"><img id="smallpic" src="/upload/20071130224657571.jpg" border="0" onmousemove="move(event)"></div>
<div id="bigbox"></div>
<div id="view"></div>
代码最终的效果如下图:
最新文章
- kernel/ptrace.c
- Autodesk Cloud Accelerator Program 开始报名
- 磁盘、分区及Linux文件系统 [Disk, Partition, Linux File System]
- 识别有效的IP地址和掩码并进行分类统
- 【C#】属性(Attribute)
- Silverlight中动画的性能浅析
- IIS 7 WAS服务不可用
- Hibernate逍遥游记-第13章 映射实体关联关系-006双向多对多(分解为一对多)
- MINA的session.close
- CSS3中的border-radius
- linux中/etc/profile、/etc/profile.d/、/etc/bashrc、~/.bashrc、~/.bash_profile、~/.bash_logout的作用与区别
- Linux常用命令100个用法
- pandas.read_csv参数详解
- MYSQL数据库数据拆分之分库分表总结
- 免费申请使用IBM Cloud Lite(轻量套餐) 详细教程指南
- 【洛谷P3917】异或序列
- C++中的对象初始化
- HTML转义符
- Linux pip 命令无法使用问题
- dp练习2
热门文章
- 类库dll引用不成功问题
- Linq/List/Array/IEnumerable等集合操作
- nodejs+chromium 创建桌面应用程序
- 3月6日 c#语言
- C 语言简历一个文件夹 并自己输入字符 来取文件夹名字
- Android MVP模式 简单易懂的介绍方式
- PYTHON线程知识再研习E---条件变量同步Condition
- 自制单片机之二-----AT89S51ISP下载线的制做
- KEIL UV3中光标不对齐解决
- Window Ghosting(仍可拖动失去响应的窗口,因为我们真正的窗口已经让系统用Ghosting窗口替代了。使用IsHungAppWindow 探测)