网站首页
关于深山
客户案例
业务范围
联系深山
网络投票系统
企业网站建设
旅行社网站建设
小程序
留言板
技术文章
许愿墙(qq爱墙)
技术首页
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
asp.net
DIV+CSS
HTML
SEO搜索引擎忧化
下载类信息
个人空间
代码生成
电商
python
页面特效
表格特效
导航菜单
图形特效
表单特效
时间日期
色彩类别
链接特效
网页特效
系统硬件
网站公告
网页学习
技术类文章
网站类信息
订阅本栏目 RSS
您所在的位置:
深山工作室
>
页面特效
> 正文
JS+CSS实现图片放大预览效果(购物时放在产品上面预览图片)
深山行者个人网站 2011/1/27 9:09:51 深山行者 字体:
大
中
小
浏览 40019
以下为详细代码
<!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+CSS实现图片放大预览效果（js图片放大预览鼠标滑过的任意位置</title> <img src="/admin/edit/ewebeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22JavaScript%22%3E%0A%3C!--%0Avar%20srcX%20%3D%201024%3B%20%2F%2F%E5%8E%9F%E5%9B%BE%E5%A4%A7%E5%B0%8F%2C%E5%8F%AF%E4%BB%A5%E4%BB%BB%E6%84%8F%E8%AE%BE%E7%BD%AE%0Avar%20srcY%20%3D%20768%3B%0Avar%20bigX%20%3D%20300%3B%20%2F%2F%E9%A2%84%E8%A7%88%E7%AA%97%E5%A4%A7%E5%B0%8F%2C%E5%8F%AF%E4%BB%A5%E4%BB%BB%E6%84%8F%E8%AE%BE%E7%BD%AE%0Avar%20bigY%20%3D%20225%3B%0Avar%20smallX%20%3D%20300%3B%20%2F%2F%E7%BC%A9%E7%95%A5%E5%9B%BE%E5%AE%BD%E5%BA%A6%0Avar%20smallY%20%3D%20srcY%20*%20smallX%20%2F%20srcX%3B%0Avar%20viewX%20%3D%20bigX%20%2F%20srcX%20*%20smallX%3B%20%2F%2F%E9%A2%84%E8%A7%88%E8%8C%83%E5%9B%B4%0Avar%20viewY%20%3D%20bigY%20%2F%20srcY%20*%20smallY%3B%0Avar%20bl%20%3D%20srcX%20%2F%20smallX%3B%2F%2F%E7%BC%A9%E5%B0%8F%E6%AF%94%E4%BE%8B%0Avar%20border%20%3D%201%3B%20%2F%2F%E8%BE%B9%E6%A1%86%0Awindow.onload%3Dfunction%20()%7B%0A%20%20%20%20%20%20%20%20smallpic.width%3DsmallX%3B%0A%20%20%20%20%20%20%20%20smallpic.height%3DsmallY%3B%0A%20%20%20%20%20%20%20%20bigpic.width%3DsrcX%3B%0A%20%20%20%20%20%20%20%20bigpic.height%3DsrcY%3B%0A%20%20%20%20%20%20%20%20view.style.width%3DviewX%3B%0A%20%20%20%20%20%20%20%20view.style.height%3DviewY%3B%0A%20%20%20%20%20%20%20%20smallbox.style.borderWidth%3Dborder%3B%0A%20%20%20%20%20%20%20%20bigbox.style.borderWidth%3Dborder%3B%0A%20%20%20%20%20%20%20%20if%20(window.event)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20smallbox.style.width%3Dsmallpic.offsetWidth%2Bborder*2%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20smallbox.style.height%3Dsmallpic.offsetHeight%2Bborder*2%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20bigbox.style.width%3DbigX%2Bborder*2%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20bigbox.style.height%3DbigY%2Bborder*2%3B%0A%20%20%20%20%20%20%20%20%7Delse%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20smallbox.style.width%3Dsmallpic.offsetWidth%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20smallbox.style.height%3Dsmallpic.offsetHeight%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20bigbox.style.width%3DbigX%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20bigbox.style.height%3DbigY%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20move(event)%3B%0A%7D%0Afunction%20move(e)%7B%0A%20%20%20%20%20%20%20%20var%20e%20%3D%20window.event%3Fwindow.event%3Ae%3B%0A%20%20%20%20%20%20%20%20var%20iebug%20%3D%200%3B%0A%20%20%20%20%20%20%20%20if%20(window.event)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20vX%20%3D%20e.offsetX%20-%20viewX%2F2%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20vY%20%3D%20e.offsetY%20-%20viewY%2F2%3B%0A%20%20%20%20%20%20%20%20%7Delse%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20vX%20%3D%20e.pageX%20-%20viewX%2F2%20-%20smallbox.offsetLeft%20-%20border%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20vY%20%3D%20e.pageY%20-%20viewY%2F2%20-%20smallbox.offsetTop%20-%20border%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20iebug%20%3D%202%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20if%20(vX%20%3C%200)%20vX%20%3D%200%3B%0A%20%20%20%20%20%20%20%20if%20(vY%20%3C%200)%20vY%20%3D%200%3B%0A%20%20%20%20%20%20%20%20if%20(vX%20%3E%20smallX%20-%20viewX%20-%20iebug)%20vX%20%3D%20smallX%20-%20viewX%20-%20iebug%3B%0A%20%20%20%20%20%20%20%20if%20(vY%20%3E%20smallY%20-%20viewY%20-%20iebug)%20vY%20%3D%20smallY%20-%20viewY%20-%20iebug%3B%0A%20%20%20%20%20%20%20%20bigpico.style.marginLeft%20%3D%20-%20vX%20*%20bl%20%0A%20%20%20%20%20%20%20%20bigpico.style.marginTop%20%3D%20-%20vY%20*%20bl%20%0A%20%20%20%20%20%20%20%20view.style.left%20%3D%20vX%20%2B%20smallbox.offsetLeft%20%2B%20border%3B%0A%20%20%20%20%20%20%20%20view.style.top%20%3D%20vY%20%2B%20smallbox.offsetTop%20%2B%20border%3B%0A%7D%0A%2F%2F--%3E%0A%3C%2Fscript%3E"> <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;overflow:hidden} #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> <body> <div id="head"></div> <div id="smallbox"><img src="/UploadFiles/demo/002.jpg" _ewebeditor_ta_src="%2Fad%2F002.jpg" name="smallpic" width="300" height="300" border="0" id="smallpic" onmousemove="move(event)" onmouseover="document.getElementById('bigbox').style.display='';document.getElementById('view').style.display=''" onmouseout="document.getElementById('bigbox').style.display='none';document.getElementById('view').style.display='none'"></div> <div id="bigbox" style="display:none"><div id="bigpico"><img src="/UploadFiles/demo/002.jpg" _ewebeditor_ta_src="%2Fad%2F002.jpg" name="bigpic" width="300" height="300" border="0" id="bigpic"></div> </div> <div id="view" onmousemove="move(event) "style="display:none"></div> </body> </html>
前一页:
javascript编写的网页版的打字测试程序
后一页:
支持火狐,IE6.ie7.ie8.ie9的加入收藏/设为首页代码
相关阅读
深山行者旅行社网站管理系统 v1.4
仿MAC官网导航菜单
css里expression实现界面对象的批量控制
非常不错的页面搜索器,还可以移动
CSS编写过程中常见的10个错误以及解决方法
如何让文本框不出现提交过的表单信息
ASP显示数据中小数的时候，小数点前面的0不显示的解决办法
ASP事务处理 for access
更多信息>>
栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
python
更多>>
同类信息
jquery下拉到某个固定位置然后某些元素发生改变样式状态
canvas绘制的文字如何换行
兼容pc、移动端用js实现复制内容到剪切板（支持苹果safari浏览器）
js兼容多个浏览器右下角漂浮广告
兼容ie6+和火狐的禁止右键
做在线客服时，聊天窗口的div滚动条始终在底部
更多>>
最新添加文章
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素
抖音直播音挂载小雪花 懂车帝小程序
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现：无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
在Android、iOS、Windows、MacOS中微信小程序的文件存放路径
python通过代码修改pip下载源让下载库飞起
python里面requests.post返回的res.text还有其它的吗
更多>>
随机抽取信息
一个利用select下拉选择框进行变色的网页效果
javascript时间显示01
asp统计信息/文章每日、每周、每月、总访问量的方法
连云港旅游网
Object.assign的一些用法
默认系统
更多标签
热门标签
分辨率
连云港旅游
工具
深山行者
标语
还原
对象
函数
购物
风格
滑动
增大
缓存
position
Javascript实现CSS代码高亮显示1
固定
div
深山v1.0旅行社网站管理系统
倒计时
xhtml
路径
slectindext
浮动
生成
酷
电脑
脚本
滑过
规则
js
许愿墙
理想
上 下 左 右
style
ResponseXML
闭合
ie6
链接样式
tag
提示
时间
maryabbsby
关联
label
配色
告
缩小
绝对管用的iis安装包下载
文本
类别
免责声明:本站所有资料信息,有部分为本人原创,部分为从网络收集而来,仅供网友查看阅读所用,所有信息版权归信息所有人或所有公司所有
如果信息内容侵犯到您的版权或权益请与我们联系,经确认后我们会立即移除相关内容或链接
Copyright © 2007-2026
深山工作室
All Rights Reserved
服务QQ:
565449214
手机:
13961347334
ICP备案:
苏ICP备15019627号
苏公网安备 32070502010230号
苏公网安备 32070502010230号