<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS+CSS实现图片放大预览效果(js图片放大预览鼠标滑过的任意位置_365CSS.CN</title>
<script language="JavaScript">
<!--
var srcX = 1024; //原图大小,可以任意设置
var srcY = 768;
var bigX = 300; //预览窗大小,可以任意设置
var bigY = 225;
var smallX = 300; //缩略图宽度
var smallY = srcY * smallX / srcX;
var viewX = bigX / srcX * smallX; //预览范围
var viewY = bigY / srcY * smallY;
var bl = srcX / smallX;//缩小比例
var border = 1; //边框
window.onload=function (){
head.innerHTML="JS+CSS实现图片放大预览效果,鼠标可以滑动图片任意地方";
smallpic.width=smallX;
smallpic.height=smallY;
bigpic.width=srcX;
bigpic.height=srcY;
view.style.width=viewX;
view.style.height=viewY;
smallbox.style.borderWidth=border;
bigbox.style.borderWidth=border;
if (window.event){
smallbox.style.width=smallpic.offsetWidth+border*2;
smallbox.style.height=smallpic.offsetHeight+border*2;
bigbox.style.width=bigX+border*2;
bigbox.style.height=bigY+border*2;
}else{
smallbox.style.width=smallpic.offsetWidth;
smallbox.style.height=smallpic.offsetHeight;
bigbox.style.width=bigX;
bigbox.style.height=bigY;
}
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;
bigpico.style.marginLeft = - vX * bl
bigpico.style.marginTop = - vY * bl
view.style.left = vX + smallbox.offsetLeft + border;
view.style.top = vY + smallbox.offsetTop + border;
}
//-->
</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;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>
<div id="head"></div>
<div id="smallbox">
<img src="1.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="1.jpg" name="bigpic" width="300" height="300"
border="0" id="bigpic">
</div>
</div>
<div id="view" onmousemove="move(event) "style="display:none"></div>
分享到:
相关推荐
一款挺有创意的js+css3图片3D倾斜布局点击弹窗放大预览代码,图片放大幻灯片切换展示。学习交流。
jQuery CSS3图片放大镜插件是一款jQuery基于css3属性制作鼠标悬停图片放大镜预览查看效果代码。
61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏相册图片自动切换插件 63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]...
61.js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62.Supersized jQuery全屏相册图片自动切换插件 63.[荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64.[荐]...
swiper实现当前轮播图放大效果,类似芒果tv,货拉拉实现效果,自己整理修改了很多次,希望能给有效地帮助
3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery...
js智能缩放点击图片放大预览代码.zip
24:___JS放大镜,JavaScript图片放大代码 25:___JS点击小图预览大图(仿淘宝) 26:___亮丽的JS图片渐变导航 27:___从两侧向中间拼合的JavaScript图片切换效果 28:___仿265网站LOGO,会盯着你看的眼睛 29:___像弹簧...
一款简单实用的JS仿淘宝商品主图切换放大镜预览代码,点击商品小图切换对应的大图,鼠标悬停大图局部放大镜预览效果,兼容IE6/7/8。
jQuery响应式图片放大预览.zip
jQuery Lightbox图片放大预览代码.zip
原生JS仿淘宝商品主图放大镜预览效果。点击小图切换对应的大图,当鼠标悬停大图时,商品图片局部放大镜效果代码。这款放大镜图片封装在js里面,需要修改js里面的图片路径。兼容IE6/7/8
EasyUI,TopJUI的datagrid显示图片并点击放大浏览样式文件,主要是css,jss和图片资源,与文章匹配,也可单独使用,谢谢
放大镜+图片刻度尺+工具栏外置+缩放+移动 1.适合需要工具单独放在外边的需求 2.图片刻度尺功能 3.包含一般图片预览所需功能
代码片段: .zzsc-content{ .../* sample CSS to set the initial dimensions of images that will be zoomable */ .sampleimage{ width: 300px; height: auto; margin-right: 20px; }
代码片段: <link rel="stylesheet" type="text/css" href="css/default.css?3.1.64"> <link rel="stylesheet" type="text/css" href="css/styles.css?3.1.64">
61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏相册图片自动切换插件 63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]...
MPreview.js Word,PPT 文档预览组件(图片预览组件) 移动端请移步 Demo参考 特此说明 此插件是我在项目开发中而制作,其只适用于其项目,如须使用须注意,提供的图片须有较大的宽高。 插件说明 此插件需要由服务端...
大家经常逛淘宝、天猫、京东这类网站的时候往往会看到一些图片展示的效果,例如:把鼠标放在图片上右侧会出现一个放大的预览区域,这就是所谓放大镜效果。今天闲着没事干,就打算复习一下JavaScript基础,用一下基础...
然后全局引入,我这边是在main.js里面操作写的: import Viewer from ‘v-viewer’ import ‘viewerjs/dist/viewer.css’ 然后注册下: Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, '...