主站
经典论坛
家园
作品集
Think.Pages
维基
桌面
聚合
注册
登录
专长会员
帮助
客服QQ:6650171
经典论坛
»
前台制作与脚本专栏
» JS放大镜(FF下还有点问题)
‹‹ 上一主题
|
下一主题 ››
发新话题
发布投票
发布商品
发布悬赏
发布活动
发布辩论
发布视频
打印
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>
提示:您可以先修改部分代码再运行
积分
320
阅读权限
30
性别
男
在线时间
274 小时
注册时间
2008-1-9
最后登录
2008-8-4
查看详细资料
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!
积分
866
阅读权限
50
性别
男
在线时间
211 小时
注册时间
2007-7-28
最后登录
2008-8-28
查看详细资料
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!
积分
866
阅读权限
50
性别
男
在线时间
211 小时
注册时间
2007-7-28
最后登录
2008-8-28
查看详细资料
TOP
请大家尊重和保护奥运知识产权。
jfk1982
中级会员
帖子
208
体力
375
威望
0
当前
广东 深圳
离线
1 天
个人网站
发短消息
加为好友
专长
前端制作,JS
4
#
大
中
小
发表于 2008-7-18 15:51
汗用 jquery 把 反正都是copy
积分
375
阅读权限
30
在线时间
126 小时
注册时间
2007-10-6
最后登录
2008-8-29
查看个人网站
查看详细资料
TOP
还在为头像烦恼?还在为不能关注好友动态烦忧?快来
蓝色理想家园
吧!
‹‹ 上一主题
|
下一主题 ››
版块跳转
内部交流区
网站开发区
前台制作与脚本专栏
后台数据库编程
WEB标准化专栏
WAP 技术专栏
平面设计区
艺术与设计论坛
Adobe Photoshop 专栏
Fireworks 专栏
矢量图形专栏
插画手绘交流
交互设计区
用户体验综合版
UI图形设计
RIA设计与应用
Flash 8 及之前版本
Flash CS3 及 AS3
Silverlight 专版
Director 专栏
其它技术讨论区
计算机技术
英语学习和技术翻译
摄影欣赏与技术交流
无线通讯与数码设备
信息平台
企业招聘
学习工作交流区
创业版