Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

[疑难] 图片放大功能

[复制链接]
heejunhao 发表于 2010-4-22 21:04:37 | 显示全部楼层 |阅读模式
SupeSite插件
插件名称: 图片放大功能
插件简介: 图片放大功能
语言编码: GBK简体 
插件作者: 等待高手来帮忙
我想在发完图片,然后做个放大镜的功能

样式就想这个是的
http://www.council.com.cn/PaiMaiJieGuo/worklist.php?pzid=PZ2001109  这个是列表不用点击就能看图

http://www.council.com.cn/PaiMaiJieGuo/pmwp.php?ppcd=art91340001&pzid=PZ2001109 这个是放大镜功能(代码我写在下面了,具体怎么用,请各位大侠们帮忙了)




请问一下代码我是从网上找的,但不知道怎么用,放在哪,他这个代码里写了图片的路径,但是我想做的效果是,后台传完图片后直接就带这个功能,请问怎么实现?代码如下:

还有一个问题是,列表怎么能不点击就能看到图片?两个演示我放到上面,请高手们看看帮忙解决一下,很急





<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>
jm611 发表于 2010-4-23 14:48:52 | 显示全部楼层
很多代码。看不懂
回复

使用道具 举报

maikongjian14a 发表于 2010-4-23 15:48:21 | 显示全部楼层
呵呵 我对代码也不怎么懂
回复

使用道具 举报

serverlgxf 发表于 2010-4-26 15:07:38 | 显示全部楼层
占位待小白都上去了。我一把抓
回复

使用道具 举报

qq18844111 发表于 2010-4-27 09:45:05 | 显示全部楼层
回复

使用道具 举报

jaray 发表于 2011-12-14 21:18:26 | 显示全部楼层
现在学不能解决啊
回复

使用道具 举报

suyue 发表于 2012-7-24 10:53:05 | 显示全部楼层
楼主怎么解决的
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-17 00:05 , Processed in 0.027278 second(s), 4 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表