网页代码-放大镜功能
我使用的是DEDECMS和phpcms两款cms程序的其中一个。我现在想做的是想添加一个图片放大镜功能。放大镜代码我已经找到了，因为代码太多这里就不写了，可以去这里下载h...
我使用的是DEDECMS和phpcms两款cms程序的其中一个。我现在想做的是想添加一个图片放大镜功能。放大镜代码我已经找到了，因为代码太多这里就不写了，可以去这里下载http://www.lanrentuku.com/js/tupian-395.html。
现在系统和放大镜代码都找到了，现在就是不知道怎么把这两个整合在一起，在cms系统的后台添加一个图片前台的图片就自动带放大镜功能。现在是不能直接使用我发的那个放大镜代码，他里面的代码写的很简单。我就写其中的一个代码<IMG id=bp
src="images/1_b.jpg"> </DIV> 这里的图片地址他直接写成了路径，而我想达到的效果并不是显示这一张图片，而是所有图片都自动带这个功能。
所以请各位高手们帮忙了。写一下dedecms或phpcms程序在那个文件里添加哪些代码，我可以追加积分
还有会的吗？php asp 都可以 展开
现在系统和放大镜代码都找到了，现在就是不知道怎么把这两个整合在一起，在cms系统的后台添加一个图片前台的图片就自动带放大镜功能。现在是不能直接使用我发的那个放大镜代码，他里面的代码写的很简单。我就写其中的一个代码<IMG id=bp
src="images/1_b.jpg"> </DIV> 这里的图片地址他直接写成了路径，而我想达到的效果并不是显示这一张图片，而是所有图片都自动带这个功能。
所以请各位高手们帮忙了。写一下dedecms或phpcms程序在那个文件里添加哪些代码，我可以追加积分
还有会的吗？php asp 都可以 展开
3个回答
展开全部
HTML5图片放大镜代码，实现了一个圆形框的图像放大镜效果；
使用了JavaScript和HTML5中的Canvas来共同实现；
参考如下：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>HTML5对图像使用放大镜</title>
<script type="text/javascript">
function window_onload()
{
var canvas1 = document.getElementById('canvas1');//获取显示原图的canvas元素
if (canvas1 == null)
return false;
context = canvas1.getContext('2d'); //获取显示原图的canvas元素的图形上下文对象
//获取图像源
var image = new Image();
image.src = "tyl.jpg";
//绘制原图
image.onload=function(){
context.drawImage(image,0,0);
}
canvas1.onmousemove=canvas1_onmouse_move;//添加原图像获取鼠标焦点时的处理函数
canvas1.onmouseout=canvas1_onmouse_out;//添加原图像失去鼠标焦点时的处理函数
}
//原图像获取鼠标焦点时的处理函数
function canvas1_onmouse_move(ev)
{
var canvas1,canvas2;//原图像使用的canvas元素与放大镜中图像使用的canvas元素
var x,y;//鼠标在canvas元素中的相对坐标点
var drawWidth,drawHeight;//鼠标所指区域的宽度与高度
canvas1=document.getElementById("canvas1");//获取原图像使用的canvas元素
canvas2=document.getElementById("canvas2");//获取放大镜中图像使用的canvas元素
var context = canvas2.getContext('2d'); //获取放大镜中图像使用的canvas元素的图形上下文对象
canvas2.style.display="inline"; //显示放大镜
context.clearRect(0,0,canvas2.width,canvas2.height);//擦除放大镜中原图像
x=ev.pageX-canvas1.offsetLeft+2;//鼠标在canvas元素中X轴上的相对坐标点+2,+2是为了避免鼠标移动到放大镜上
y=ev.pageY-canvas1.offsetTop+2;//鼠标在canvas元素中Y轴上的相对坐标点+2,+2是为了避免鼠标移动到放大镜上
canvas2.style.left=(ev.pageX+2)+"px";//设置放大镜在原图上的X轴上的坐标点
canvas2.style.top=(ev.pageY+2)+"px";//设置放大镜在原图上的Y轴上的坐标点
//获取放大镜图像的图像源
var image = new Image();
image.src = "tyl.jpg";
//获取鼠标所指区域的宽度
if(x+40>canvas1.width)//如果鼠标所指区域的宽度超出原图宽度
drawWidth=canvas1.width-x;//设置鼠标所指区域宽度为原图中剩余宽度
else
drawWidth=40;//设置鼠标所指区域的宽度为40像素
//获取鼠标所指区域的高度
if(y+40>canvas1.height)//如果鼠标所指区域的高度超出原图高度
drawHeight=canvas1.height-y;//设置鼠标所指区域高度为原图中剩余高度
else
drawHeight=40;//设置鼠标所指区域的高度为40像素
//放大2倍绘制放大镜图像
context.drawImage(image,x,y,drawWidth,drawHeight,0,0,drawWidth*2,drawHeight*2);
}
//鼠标移出原图像外
function canvas1_onmouse_out()
{
var canvas2=document.getElementById("canvas2");//获取放大镜所用canvas元素
//重置canvas元素的位置
canvas2.style.left="0px";
canvas2.style.top="0px";
//隐藏放大镜
canvas2.style.display="none";
}
</script>
<style>
canvas{
background-color:white;
position:absolute;
}
canvas#canvas1{
z-index:1;
}
canvas#canvas2{
z-index:2;
left:0px;
top:0px;
border:thin dashed black;
border-radius: 40px;
-moz-border-radius: 40px;
-o-border-radius: 40px;
-webkit-border-radius: 40px;
display:none;
}
</style>
</head>
<body onload="window_onload()">
<article>
<h1>HTML5图像放大镜</h1>
<canvas id="canvas1" width="100px" height="130px"></canvas>
<canvas id="canvas2" width="80px" height="82px"></canvas>
</article>
</body>
</html>
使用了JavaScript和HTML5中的Canvas来共同实现；
参考如下：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>HTML5对图像使用放大镜</title>
<script type="text/javascript">
function window_onload()
{
var canvas1 = document.getElementById('canvas1');//获取显示原图的canvas元素
if (canvas1 == null)
return false;
context = canvas1.getContext('2d'); //获取显示原图的canvas元素的图形上下文对象
//获取图像源
var image = new Image();
image.src = "tyl.jpg";
//绘制原图
image.onload=function(){
context.drawImage(image,0,0);
}
canvas1.onmousemove=canvas1_onmouse_move;//添加原图像获取鼠标焦点时的处理函数
canvas1.onmouseout=canvas1_onmouse_out;//添加原图像失去鼠标焦点时的处理函数
}
//原图像获取鼠标焦点时的处理函数
function canvas1_onmouse_move(ev)
{
var canvas1,canvas2;//原图像使用的canvas元素与放大镜中图像使用的canvas元素
var x,y;//鼠标在canvas元素中的相对坐标点
var drawWidth,drawHeight;//鼠标所指区域的宽度与高度
canvas1=document.getElementById("canvas1");//获取原图像使用的canvas元素
canvas2=document.getElementById("canvas2");//获取放大镜中图像使用的canvas元素
var context = canvas2.getContext('2d'); //获取放大镜中图像使用的canvas元素的图形上下文对象
canvas2.style.display="inline"; //显示放大镜
context.clearRect(0,0,canvas2.width,canvas2.height);//擦除放大镜中原图像
x=ev.pageX-canvas1.offsetLeft+2;//鼠标在canvas元素中X轴上的相对坐标点+2,+2是为了避免鼠标移动到放大镜上
y=ev.pageY-canvas1.offsetTop+2;//鼠标在canvas元素中Y轴上的相对坐标点+2,+2是为了避免鼠标移动到放大镜上
canvas2.style.left=(ev.pageX+2)+"px";//设置放大镜在原图上的X轴上的坐标点
canvas2.style.top=(ev.pageY+2)+"px";//设置放大镜在原图上的Y轴上的坐标点
//获取放大镜图像的图像源
var image = new Image();
image.src = "tyl.jpg";
//获取鼠标所指区域的宽度
if(x+40>canvas1.width)//如果鼠标所指区域的宽度超出原图宽度
drawWidth=canvas1.width-x;//设置鼠标所指区域宽度为原图中剩余宽度
else
drawWidth=40;//设置鼠标所指区域的宽度为40像素
//获取鼠标所指区域的高度
if(y+40>canvas1.height)//如果鼠标所指区域的高度超出原图高度
drawHeight=canvas1.height-y;//设置鼠标所指区域高度为原图中剩余高度
else
drawHeight=40;//设置鼠标所指区域的高度为40像素
//放大2倍绘制放大镜图像
context.drawImage(image,x,y,drawWidth,drawHeight,0,0,drawWidth*2,drawHeight*2);
}
//鼠标移出原图像外
function canvas1_onmouse_out()
{
var canvas2=document.getElementById("canvas2");//获取放大镜所用canvas元素
//重置canvas元素的位置
canvas2.style.left="0px";
canvas2.style.top="0px";
//隐藏放大镜
canvas2.style.display="none";
}
</script>
<style>
canvas{
background-color:white;
position:absolute;
}
canvas#canvas1{
z-index:1;
}
canvas#canvas2{
z-index:2;
left:0px;
top:0px;
border:thin dashed black;
border-radius: 40px;
-moz-border-radius: 40px;
-o-border-radius: 40px;
-webkit-border-radius: 40px;
display:none;
}
</style>
</head>
<body onload="window_onload()">
<article>
<h1>HTML5图像放大镜</h1>
<canvas id="canvas1" width="100px" height="130px"></canvas>
<canvas id="canvas2" width="80px" height="82px"></canvas>
</article>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你看你的代码，把代码中的图片目录替换成放大代码中的图片地址就可以了
不行的话邮件告诉我
不行的话邮件告诉我
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你加我，把代码发过来我帮你加
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
