打印

JS放大镜(FF下还有点问题)

kabukon [楼主]

中级会员

帖子: 513
体力: 320
威望: 0
当前: 上海静安
离线: 25 天

专长 前端制作,JS

1^# 大中小发表于 2008-7-18 12:11

图片用的是WOW的,因为那里大的图片多,FF下有点问题,期待有高人帮忙看看

<!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>Untitled Document</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:12px; background:#000000;}
ul,p,ol{ margin:0; padding:0; list-style:none;}
#showPic{ float:left; margin-right:15px; position:relative; overflow:hidden; border:1px solid #ccc; font-size:20px; color:#FFFFFF; text-align:center; line-height:600px;}
#im{ position:absolute;}
#instancePic{ width:202px;  float:left;}
#instancePic li{ float:left; position:relative;}
#instancePic img{ width:200px; height:150px; border:1px solid #666666; margin-bottom:15px;}
</style>
</head>
<body>
<div id="showPic">右边小图预载中。。。</div>
<div id="instancePic">
<ul>
    <li><img src="http://images2.wowchina.com/images_wow/download/wallpapers/2008/7/14/2B1DA6E1F33B45498C3EDFCFD257F69E.jpg" /></li>
    <li><img src="http://images2.wowchina.com/images_wow/download/wallpapers/2008/7/14/27A5E671D6094CD7AE05C20D9C629AA3.jpg" /></li>
    <li><img src="http://images2.wowchina.com/images_wow/download/wallpapers/2008/6/30/5EA4ECF1B9A3419BB74DA015893372F2.jpg" /></li>
</ul>
</div>
</body>
</html>
<script language="javascript">
var $ = function(x){
    var e = document.getElementById(x);
	return e;
}//定义简便的document.getElementById方式，可以少写很多document.getElementById
var moveElement = document.createElement("div");//创建移动框
$('showPic').style.width = "800px";
$('showPic').style.height = "600px";
var bigContainter = parseInt($('showPic').style.width);
moveElement.setAttribute("id","moveElement");//设置移动框属性
moveElement.style.width = "100px";
moveElement.style.height = "75px";
moveElement.style.border = "1px solid blue";
moveElement.style.position = "absolute";
moveElement.style.zIndex = 100;
var samllContainter = parseInt(moveElement.style.width);
var Pic = document.createElement("img");//创建大图片
Pic.setAttribute("id","im");
var insert = false;
var isIE = document.all?true:false;
var bl = bigContainter/samllContainter;//设置移动比例
//document.body.appendChild(moveElement);
var links = $("instancePic").getElementsByTagName("li");
var instancePic_width = 200;
var instancePic_height = 150;
var moveElement_width = parseInt(moveElement.style.width);
var moveElement_height = parseInt(moveElement.style.height);
for(i=0;i<links.length;i++){
    links[i].onmouseover = function(event){           //鼠标上去后开始给对象添加移动框，并把图片加载给大框
	$('showPic').appendChild(Pic);
    $('im').src = this.firstChild.src;
    this.appendChild(moveElement);
	}
	links[i].onmousemove = function(event){           
     event = event || window.event;
    var distance_X = isIE?event.offsetX:event.layerX;
	var distance_Y = isIE?event.offsetY:event.layerY;
	var sl = distance_X -  moveElement_width/2;
	var st = distance_Y -  moveElement_height/2;
	if(sl<0) sl = 0;
	if(st<0) st = 0;
	if(sl>instancePic_width - moveElement_width) sl = instancePic_width - moveElement_width;
	if(st>instancePic_height - moveElement_height) st = instancePic_height - moveElement_height;
	moveElement.style.left = sl +"px";
	moveElement.style.top = st +"px";
	$("im").style.left=-sl*bl+"px";
	$("im").style.top=-st*bl+"px";
} 
}
</script>

提示：您可以先修改部分代码再运行

TOP

做西部数码代理.Cn1元国际45元

10dw

小盆友

高级会员

帖子: 446
体力: 865
威望: 0
当前: 美洲美国
离线: 2 天

专长 网页设计,JS,PHP

2^# 大中小发表于 2008-7-18 14:20

至于麼寫那么多嚇死人了你的圖太沒有吸引力了瞧瞧我的一定看的人多

<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>nothing is impossible</title>
<style type="text/css" media="screen">
* {margin:0;padding:0;}body {font-family:Arial,Helvetica,sans-serif;font-size:12px;}ul {list-style-type:none;}
div {width:200px;height:200px;overflow:hidden;position:relative;}
</style>
</head>
<body><br /><br /><br /><br /><br /><br /><br /><br /><div><img src="http://hiphotos.baidu.com/%E5%B0%91%E6%9E%AA/pic/item/3b7c8107005150c17a89476b.jpg" style="position:relative;" /></div></body>
<script type="text/javascript">
img1=document.createElement('img');
img1.src="http://hiphotos.baidu.com/%E5%B0%91%E6%9E%AA/pic/item/3b7c8107005150c17a89476b.jpg";
document.body.appendChild(img1);
img1.height=document.images[0].height/10;
img1.width=document.images[0].width/10;
img1.onmousemove=function(e) {
var e=e||window.event;
var xPos=e.offsetX||e.pageX-this.offsetLeft;
var yPos=e.offsetY||e.pageY-this.offsetTop;
document.images[0].style.left=-xPos*10+'px';
document.images[0].style.top=-yPos*10+'px';
}
</script>
</html>

提示：您可以先修改部分代码再运行

Welcome to the tavern of the rising sun!

TOP

【美橙超级G空间】688元绑定10个子目录

10dw

小盆友

高级会员

帖子: 446
体力: 865
威望: 0
当前: 美洲美国
离线: 2 天

专长 网页设计,JS,PHP

3^# 大中小发表于 2008-7-18 14:30

防盜鏈啊日了換張美圖

<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>nothing is impossible</title>
<style type="text/css" media="screen">
* {margin:0;padding:0;}body {font-family:Arial,Helvetica,sans-serif;font-size:12px;}ul {list-style-type:none;}
div {width:200px;height:200px;overflow:hidden;position:relative;}
</style>
</head>
<body><br /><br /><br /><br /><br /><br /><br /><br /><div><img src="http://img.article.pchome.net/00/16/82/55/XXX-2006-12-27-0130.jpg" style="position:relative;" /></div></body>
<script type="text/javascript">
img1=document.createElement('img');
img1.src="http://img.article.pchome.net/00/16/82/55/XXX-2006-12-27-0130.jpg";
document.body.appendChild(img1);
img1.height=document.images[0].height/10;
img1.width=document.images[0].width/10;
img1.onmousemove=function(e) {
var e=e||window.event;
var xPos=e.offsetX||e.pageX-this.offsetLeft;
var yPos=e.offsetY||e.pageY-this.offsetTop;
document.images[0].style.left=-xPos*10+'px';
document.images[0].style.top=-yPos*10+'px';
}
</script>
</html>

提示：您可以先修改部分代码再运行

Welcome to the tavern of the rising sun!

TOP

请大家尊重和保护奥运知识产权。

jfk1982

中级会员

帖子: 208
体力: 375
威望: 0
当前: 广东深圳
离线: 1 天

专长 前端制作,JS

4^# 大中小发表于 2008-7-18 15:51

汗用 jquery 把反正都是copy

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!