问一个JS的问题,对JS不熟悉

初级后端工程师 2011-09-30 04:49:24
下面的代码是放大图片我网上找的,我不懂JS。

可以用 但就是一个问题 当它弹出来的那张放大图片 是我数据库原始图片的 尺寸 太大了 盖住整个网页

我想要给 弹出来的图片加一个 576 x 407 的固定大小 不知道怎么弄 麻烦致电一下 谢谢。



<script type="text/javascript">
window.onload = function() {
var aLi = document.getElementsByTagName("span");
var oBig = document.getElementById("big");
var oLoading = oBig.getElementsByTagName("div")[0];
var i = 0;
for (i = 0; i < aLi.length; i++) {
aLi[i].index = i;
//鼠标划过, 预加载图片插入容器并显示
aLi[i].onmouseover = function() {
var oImg = document.createElement("img");
//图片预加载
var img = new Image();
img.src = oImg.src = aLi[this.index].getElementsByTagName("img")[0].src.replace("s_", "");
//插入大图片

oBig.appendChild(oImg);
//鼠标移过样式
this.className = "active";
//显示big
oBig.style.display = oLoading.style.display = "block";
//判断大图是否加载成功
img.complete ? oLoading.style.display = "none" : (oImg.onload = function() { oLoading.style.display = "none"; })
};
//鼠标移动, 大图容器跟随鼠标移动
aLi[i].onmousemove = function(event) {
var event = event || window.event;
var iWidth = document.documentElement.offsetWidth - event.clientX;
//设置big的top值
oBig.style.top = event.clientY + 20 + "px";
//设置big的left值, 如果右侧显示区域不够, 大图将在鼠标左侧显示.
oBig.style.left = (iWidth < oBig.offsetWidth + 10 ? event.clientX - oBig.offsetWidth - 10 : event.clientX + 10) + "px";
};
//鼠标离开, 删除大图并隐藏大图容器
aLi[i].onmouseout = function() {
this.className = "";
oBig.style.display = "none";
//移除大图片
oBig.removeChild(oBig.lastChild)
}
}
};
</script>
...全文
133 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
_懒猫 2011-10-11
  • 打赏
  • 举报
回复
弹出的图片放在div里面,在创建div的时候设置其大小。。
休谱诺斯 2011-10-11
  • 打赏
  • 举报
回复
lz是想让这个图片再随着滚动条走吗,那可能就会导致鼠标移动事件函数有问题了。。。
  • 打赏
  • 举报
回复
现在宽度和 高度的问题解决了

还有一个就是如果 页面拉到底下 把鼠标移上去 图片是显示在 页面的上面 看不到了 要怎么解决
  • 打赏
  • 举报
回复
已经弄好了。给弹出的那个层加CSS属性
#big{position:fixed; _position:absolute; bottom:100px;_top:expression(documentElement.scrollTop+document.documentElement.clientHeight-100); right:0;width:576px;height:407px;border:2px solid #ddd;display:none;}

给有遇见一样的同学参考了。谢谢大家.
  • 打赏
  • 举报
回复
[Quote=引用 5 楼 feng3773216 的回复:]
lz是想让这个图片再随着滚动条走吗,那可能就会导致鼠标移动事件函数有问题了。。。
[/Quot
就是它弹出来的层 不会随着浏览器往下滚动 导致页面下面的图片弹出来 仍然在页面的顶部.....
Mr-Jee 2011-09-30
  • 打赏
  • 举报
回复
var img = new Image();
img.src = oImg.src = aLi[this.index].getElementsByTagName("img")[0].src.replace("s_", "");

img.width='576';
img.height='407';
bohe_198878 2011-09-30
  • 打赏
  • 举报
回复
把图片放在div里就是了
峭沙 2011-09-30
  • 打赏
  • 举报
回复
代码没给全,var oBig = document.getElementById("big");是个img么?
	<script type="text/javascript">
window.onload = function() {
var aLi = document.getElementsByTagName("span");
var oBig = document.getElementById("big");
oBig.width = 576;
oBig.height = 407;
var oLoading = oBig.getElementsByTagName("div")[0];
var i = 0;
for (i = 0; i < aLi.length; i++) {
aLi[i].index = i;
//鼠标划过, 预加载图片插入容器并显示
aLi[i].onmouseover = function() {
var oImg = document.createElement("img");
//图片预加载
var img = new Image();
img.src = oImg.src = aLi[this.index].getElementsByTagName("img")[0].src.replace("s_", "");
//插入大图片

oBig.appendChild(oImg);
//鼠标移过样式
this.className = "active";
//显示big
oBig.style.display = oLoading.style.display = "block";
//判断大图是否加载成功
img.complete ? oLoading.style.display = "none" : (oImg.onload = function() { oLoading.style.display = "none"; })
};
//鼠标移动, 大图容器跟随鼠标移动
aLi[i].onmousemove = function(event) {
var event = event || window.event;
var iWidth = document.documentElement.offsetWidth - event.clientX;
//设置big的top值
oBig.style.top = event.clientY + 20 + "px";
//设置big的left值, 如果右侧显示区域不够, 大图将在鼠标左侧显示.
oBig.style.left = (iWidth < oBig.offsetWidth + 10 ? event.clientX - oBig.offsetWidth - 10 : event.clientX + 10) + "px";
};
//鼠标离开, 删除大图并隐藏大图容器
aLi[i].onmouseout = function() {
this.className = "";
oBig.style.display = "none";
//移除大图片
oBig.removeChild(oBig.lastChild)
}
}
};
</script>
已经博主授权,源码转载自 https://pan.quark.cn/s/8f7d9b77a9d1 微信小程序是一个轻量级的应用开发平台,主要面向移动设备,由腾讯公司推出,其目的是提供一种便捷的应用体验,用户无需下载安装即可直接使用。"你画我猜"是一种广受欢迎的游戏模式,参与者通过绘画来传达一个词语或短语,其他参与者则根据所见的图画来猜测其含义,这种互动性突出且趣味盎然的模式非常适合在微信小程序平台上实现。在"微信小程序你画我猜游戏demo完整源码"这一资源中,我们可以学习到以下几个核心知识点:1. **微信小程序开发环境的构建**:开发者需要安装微信开发者工具,这是进行微信小程序编写与调试的基础。该工具集成了代码编辑、预览、调试等多种功能,为开发者提供了便利的项目开发条件。2. **WXML与WXSS**:WXML是微信小程序的结构性语言,类似于HTML,用于定义页面的结构与布局;WXSS是微信小程序的样式性语言,类似于CSS,负责控制页面的外观。开发者必须熟练掌握这两种语言的语法和特性,以便创建既美观又功能齐全的界面。3. **JavaScript的业务逻辑处理**:在微信小程序中,JavaScript主要承担数据绑定、事件处理以及API调用的职责。通过`Page`对象,开发者可以设定每个页面的数据、生命周期事件和方法,从而实现复杂的业务逻辑。4. **微信小程序API的应用**:此游戏demo会运用到微信小程序提供的多种API,包括用户身份验证、网络请求、画板绘图、动画效果等。例如,`wx.createContext()` API可用于获取绘图环境,实现画板功能;`wx.request()`则用于与服务器进行交互,获取游戏数据或提交玩家的绘画作品。5. **游戏逻辑的...
内容概要:本文档是一套针对小说创作中人物“真实性”的诊断与生成系统,名为“真字门·人物真实性诊断与自性生成操作系统”。它通过“匕·目·乚”三步法(变形、看见、隐匿),帮助作者识别主角为何显得虚假(如提线木偶),并提供可操作工具重塑人物自性。系统包含十维诊断表、真假人物对比案例、真字人物卡模板及六尘感官指纹设计,强调人物应具备内在矛盾、隐藏动机与成长疼痛,而非仅服务于剧情的功能性角色。最终产出具有独特语言、行为与情感印记的真实生命体式角色,并支持向内容变现转化。; 适合人群:写作超过三个月但作品追读率低于20%的小说创作者,尤其适用于陷入角色扁平化、缺乏共鸣困境的新人或瓶颈期作者。; 使用场景及目标:①快速诊断现有主角的“真实度”缺陷,定位核心;②利用“真字人物生成器”在30分钟内重构具备心理层次、隐藏动机与成长弧光的角色;③为后续世界观构建、角色关系网及IP变现打下坚实基础。; 阅读建议:建议严格按照导读页顺序操作——先自测诊断分数,再对照案例找差距,最后动手填写空白人物卡模板;务必结合附录B的“林凡”示例反复比对,确保每一层设计都触及角色深层心理,避免停留在表面设定。
内容概要:本文围绕基于改进鲸鱼优化算法的微网系统能量优化管理展开研究,旨在通过智能优化算法提升微网系统的能源利用效率与运行经济性。研究构建了包含光伏发电、储能设备等多种分布式能源的微网系统模型,并以系统综合运行成本最小化为优化目标,提出一种改进的鲸鱼优化算法进行高效求解,有效克服了传统优化算法易陷入局部最优、收敛速度慢等缺陷。通过Matlab平台进行仿真验证,结果表明该方法在降低微网运行成本、优化能量调度、平衡源荷关系以及提升可再生能源消纳能力方面具有显著优势,具备良好的科研价值与实际应用前景。; 适合人群:具备一定电力系统基础知识、优化算法理论背景,从事新能源发电、微电网运行与调度、智能优化算法研究等相关领域的研究生、科研人员及工程技术人员。; 使用场景及目标:①应用于微电网能量管理系统的建模与优化设计;②为智能优化算法在电力系统调度中的改进与工程应用提供典型案例;③支撑高水平学术论文撰写、算法复现与创新性研究工作。; 阅读建议:建议结合提供的Matlab代码进行仿真实践,重点分析算法的改进机制与微网系统模型的构建逻辑,对比原始鲸鱼算法的性能差异,深入理解目标函数设计、约束条件处理及参数调优策略,以全面提升科研与工程实践能力。

87,990

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧