小方框中浏览大图_网页图片特效

·网页特效库 ·网页工具库

背景按钮

导航特效

< 后退 | 收藏网页特效库

推荐网页特效

推荐网页工具

您的位置：网页特效库 >> 网页图片特效 >> 小方框中浏览大图	查看此特效演示

小方框中浏览大图

把如下代码复制到<head>与</head>之间

function movestart(event)
{
if(haveclick)
{
	if(document.getElementById('pic').style.backgroundPosition.length==0)
		{document.getElementById('pic').style.backgroundPosition="0px 0px";}
	p = document.getElementById('pic').style.backgroundPosition.split(" ")

if(document.all)
	{	
		x_new = document.body.scrollLeft+event.clientX;
		y_new = document.body.scrollTop+event.clientY;
	}else
	{	 
		x_new = event.layerX;
		y_new = event.layerY;	
	}
	
	x2 = (speed*(x_new-x)+parseInt(p[0])).toString(10);    // 计算位移量
	y2 = (speed*(y_new-y)+parseInt(p[1])).toString(10);
	
	if (x2<-picWidth+420) x2=-picWidth+420;
	if (y2>0) y2=0;
	if (x2>0) x2=0;
	if (y2<-picHeight+300) y2=-picHeight+300;

document.getElementById('pic').style.backgroundPosition=x2+"px "+y2+"px";
}
}
-->
</script>

把如下代码复制到<body>与</body>之间

使用说明：head代码区的"background-image"的值为图片的地址,"width"和"height"为框的大小,"var picWidth"和"var picHeight"为图片的宽和高,这些参数都可根据您的需要更改.

上一个特效：给图片添加图片的倒影

返回列表

下一个特效：图像虚幻显示特效