在Ionize CMS框架用JS+CSS实现图片放大预览

jtzmsqzr · 发表于 2012-4-3 16:56:05

现在许多网站，尤其是购物网站，都实现了图片放大预览功能，我们的网站http://szgzgb.com/是用Ionize CMS框架构建，放置大量的自己工艺产品的图片，为了便于用户的观赏，理应提供图片放大预览功能，我们的做法是：
1、建立包含以下代码的scaxy.js文件：
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 (){
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;
}
2、建立包含以下代码的scaxy.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}
3、在header.php文件中链接、包含以上2个文件：
<link rel="stylesheet" type="text/css" href="<ion:theme_url />enlarge/scaxy.css" />
<script type="text/javascript" src="<ion:theme_url />enlarge/scaxy.js"></script>
4、在显示图片、拟实现图片放大预览的php文件中链接header.php文件：
<ion:partial view="header" />
并在其中的显示文章的代码中包含以下代码：
<ion:medias type="picture" limit="1">
<div class="imgborder" >
<div class="img" style="height:130px;">
<a href='/themes/zjtz/enlarge/enlargejpg.php?arg=<ion:src folder="940" /> '>
<img src="<ion:src folder="150" />" />
</a>
</div>
</div>
</ion:medias>
5、建立包含以下代码的enlargejpg.php文件：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片放大预览鼠标滑过的任意位置</title>
<script type="text/javascript" src="/themes/zjtz/enlarge/scaxy.js"></script>
<link rel="stylesheet" type="text/css" href="/themes/zjtz/enlarge/scaxy.css" />
</head>
<body >
<div id="smallbox"><img src="<?php echo $_GET['arg']; ?>"
id="smallpic"/></div>
<div id="bigbox" style="display:none"><div id="bigpico"><img src="<?php echo $_GET['arg']; ?>" id="bigpic"/></div>
</div>
<div id="view"style="display:none"></div>
</body></html>
一旦实现以上5个步骤，当用户点击要观赏的图片时，系统即显示实现图片放大预览的页面，不妨一试：http://szgzgb.com/

技术-高榕 · 发表于 2012-4-23 15:20:58

ionize cms是不错，可以前端用的不是jquery，这样很多原来习惯上手的jq插件都用不上了！

		自动登录	找回密码
密码			入住 CI 中国社区

[Ionize CMS] 在Ionize CMS框架用JS+CSS实现图片放大预览