主站
经典论坛
家园
作品集
Think.Pages
维基
桌面
聚合
注册
登录
专长会员
帮助
客服QQ:6650171
经典论坛
»
前台制作与脚本专栏
» 请高手们帮忙看下JS
‹‹ 上一主题
|
下一主题 ››
发新话题
发布投票
发布商品
发布悬赏
发布活动
发布辩论
发布视频
打印
请高手们帮忙看下JS
ryon1986
[楼主]
初级会员
帖子
63
体力
135
威望
0
离线
2 天
个人空间
发短消息
加为好友
1
#
大
中
小
发表于 2008-6-27 15:06
这个是加了头部协议的效果
<!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=gb2312" /> <title>无标题文档</title> <style> #demo{overflow:hidden;width:120px;text-align:center;padding:10px;} #demo img{border:none;width:100px;height:100px;} #enlarge_images{position:absolute;display:none;z-index:2;width:266px;height:262px;overflow:hidden;text-align:center; background:#000} .enlarge_images1{ width:7px; height:262px; float:left; background:url(arrow.gif) no-repeat} </style> </head> <body> <div id="demo" style="overflow:hidden;width:80px;text-align:center;padding:10px; cursor:pointer"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000003.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000003.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000003.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000003.jpg"> </div> <div id="enlarge_images" style="display:none"> <div class="enlarge_images1"></div> </div> <script language="javascript" type="text/javascript"> var demo = document.getElementById("demo"); var gg = demo.getElementsByTagName("img"); var ei = document.getElementById("enlarge_images"); for(i=0; i<gg.length; i++){ var ts = gg[i]; ts.onmousemove = function(event){ event = event || window.event; if(ei.style.display !== "block"){ var offset = 0; var h ; h = document.body.clientHeight - event.clientY; if(h < 262){ offset = 262 - h; } ei.style.display = "block"; ei.innerHTML = '<img src="' + this.src + '" />'; ei.style.top = document.body.scrollTop + event.clientY - offset + 10 + "px" ; ei.style.left = document.body.scrollLeft + 300 + "px"; } } ts.onmouseout = function(){ if(ei.style.display == "block"){ ei.innerHTML = ""; ei.style.display = "none"; } } } </script> </body> </html>
提示:您可以先修改部分代码再运行
这个没加头部协议
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> #demo{overflow:hidden;width:120px;text-align:center;padding:10px;} #demo img{border:none;width:100px;height:100px;} #enlarge_images{position:absolute;display:none;z-index:2;width:266px;height:262px;overflow:hidden;text-align:center; background:#000} .enlarge_images1{ width:7px; height:262px; float:left; background:url(arrow.gif) no-repeat} </style> </head> <body> <div id="demo" style="overflow:hidden;width:80px;text-align:center;padding:10px; cursor:pointer"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000003.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000003.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000003.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000003.jpg"> </div> <div id="enlarge_images" style="display:none"> <div class="enlarge_images1"></div> </div> <script language="javascript" type="text/javascript"> var demo = document.getElementById("demo"); var gg = demo.getElementsByTagName("img"); var ei = document.getElementById("enlarge_images"); for(i=0; i<gg.length; i++){ var ts = gg[i]; ts.onmousemove = function(event){ event = event || window.event; if(ei.style.display !== "block"){ var offset = 0; var h ; h = document.body.clientHeight - event.clientY; if(h < 262){ offset = 262 - h; } ei.style.display = "block"; ei.innerHTML = '<img src="' + this.src + '" />'; ei.style.top = document.body.scrollTop + event.clientY - offset + 10 + "px" ; ei.style.left = document.body.scrollLeft + 300 + "px"; } } ts.onmouseout = function(){ if(ei.style.display == "block"){ ei.innerHTML = ""; ei.style.display = "none"; } } } </script> </body> </html>
提示:您可以先修改部分代码再运行
<b>我想请问下,这个可能是对于body.document.body.clientHeight的不同解读,应该怎么样才能达到一致呢,我要的是下面的效果,但是加了头部协议就不行了</b>
[
本帖最后由 ryon1986 于 2008-6-27 15:07 编辑
]
积分
135
阅读权限
20
在线时间
125 小时
注册时间
2008-3-14
最后登录
2008-9-5
查看详细资料
TOP
做西部数码代理.Cn1元国际45元
|
将虚拟化进行到底
ryon1986
[楼主]
初级会员
帖子
63
体力
135
威望
0
离线
2 天
个人空间
发短消息
加为好友
2
#
大
中
小
发表于 2008-6-27 15:29
请高手们帮帮忙
这个效果就是鼠标移到最下面的图片时,出来的黑色的层仍能被看到,现在加了头部协议效果不一样了,而我必须要加头部协议,现在很头疼,请高手们帮帮忙
积分
135
阅读权限
20
在线时间
125 小时
注册时间
2008-3-14
最后登录
2008-9-5
查看详细资料
TOP
【美橙超级G空间】688元绑定10个子目录
|
oracle工程师注册
hutia
诘屈聱牙
荣誉管理团队
帖子
4717
体力
14636
威望
383
当前
江苏 苏州
离线
13 天
个人网站
发短消息
加为好友
打分 40
专长
JS,PHP,ASP
3
#
大
中
小
发表于 2008-6-27 19:45
加了“头部协议”后应该用document.documentElement替代原来的document.body
<!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=gb2312" /> <title>无标题文档</title> <style> #demo{overflow:hidden;width:120px;text-align:center;padding:10px;} #demo img{border:none;width:100px;height:100px;} #enlarge_images{position:absolute;display:none;z-index:2;width:266px;height:262px;overflow:hidden;text-align:center; background:#000} .enlarge_images1{ width:7px; height:262px; float:left; background:url(arrow.gif) no-repeat} </style> </head> <body> <div id="demo" style="overflow:hidden;width:80px;text-align:center;padding:10px; cursor:pointer"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000003.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000003.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000003.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000001.jpg"> <img src="R2006_UI000003.jpg"> </div> <div id="enlarge_images" style="display:none"> <div class="enlarge_images1"></div> </div> <script language="javascript" type="text/javascript"> var demo = document.getElementById("demo"); var gg = demo.getElementsByTagName("img"); var ei = document.getElementById("enlarge_images"); for(i=0; i<gg.length; i++){ var ts = gg[i]; ts.onmousemove = function(event){ event = event || window.event; if(ei.style.display !== "block"){ var offset = 0; var h ; h = document.documentElement.clientHeight - event.clientY; if(h < 262){ offset = 262 - h; } ei.style.display = "block"; ei.innerHTML = '<img src="' + this.src + '" />'; ei.style.top = document.documentElement.scrollTop + event.clientY - offset + 10 + "px" ; ei.style.left = document.documentElement.scrollLeft + 300 + "px"; } } ts.onmouseout = function(){ if(ei.style.display == "block"){ ei.innerHTML = ""; ei.style.display = "none"; } } } </script> </body> </html>
提示:您可以先修改部分代码再运行
hutia归来...
老婆的小店
hutia的个人站点 - 有问题去这里问我
积分
15020
阅读权限
100
在线时间
716 小时
注册时间
2005-11-28
最后登录
2008-8-25
查看个人网站
查看详细资料
TOP
请大家尊重和保护奥运知识产权。
‹‹ 上一主题
|
下一主题 ››
版块跳转
内部交流区
网站开发区
前台制作与脚本专栏
后台数据库编程
WEB标准化专栏
WAP 技术专栏
平面设计区
艺术与设计论坛
Adobe Photoshop 专栏
Fireworks 专栏
矢量图形专栏
插画手绘交流
交互设计区
用户体验综合版
UI图形设计
RIA设计与应用
Flash 8 及之前版本
Flash CS3 及 AS3
Silverlight 专版
Director 专栏
其它技术讨论区
计算机技术
英语学习和技术翻译
摄影欣赏与技术交流
无线通讯与数码设备
信息平台
企业招聘
学习工作交流区
创业版