// JScript 文件
showPhoto =
{
containerID:'container',
init:function()
{
if(!document.getElementById||!document.createTextNode)
{return;}
//取到table标签
showPhoto.table=document.getElementsByTagName('table');
if(!showPhoto.table){return;}
//取到姓名的超链接
var namelinks=document.getElementsByTagName('a');
showPhoto.all=namelinks.length;
for(var i=0;i<showPhoto.all;i++)
{
namelinks[i].attachEvent('onmouseover',showPhoto.show);
namelinks[i].attachEvent('onmouseout',showPhoto.hide);
}
showPhoto.creatContainer();
},
show: function(e)
{
var t=window.event.srcElement;
var x=t.offsetLeft;
var y=t.parentNode.offsetTop;
//alert(x+'+'+y);
var str=new String(t);
//alert(str);
var photoURL='http://localhost:1903/List'+str.slice
(str.indexOf("~")+1,str.length);
//alert(photoURL);
showPhoto.setPic(photoURL);
showPhoto.c.style.top=y+190;
showPhoto.c.style.left=x-120;
//showPhoto.c.style.width=100;
showPhoto.c.style.position='absolute';
},
creatContainer:function()
{
showPhoto.c=document.createElement('div');
showPhoto.c.id=showPhoto.containerID;
var p=document.createElement('p');
showPhoto.c.appendChild(p)
if(!showPhoto.table[0]){return;}
showPhoto.table[0].parentNode.appendChild(showPhoto.c);
},
hide:function()
{
var p=showPhoto.c.getElementsByTagName('p')[0];
p.innerHTML='';
},
setPic:function(pic)
{
//注意此处的[0]不可丢
var picture=showPhoto.c.getElementsByTagName('p')[0];
picture.innerHTML='';
showPhoto.c.className='show';
var i=document.createElement('img');
i.setAttribute('src',pic);
if(i.width>200)
{
i.width=180
}
if(i.height>250)
{
i.height=250
}
picture.appendChild(i);
}
}
window.onload=showPhoto.init;
分享到:
相关推荐
鼠标悬停在缩略图时在鼠标右边显示原图
纯CSS方法鼠标悬停时放大缩略图,把鼠标放在缩略图上时,缩略图会变大显示,类似于图片放大的功能,不过不太一样,这一款应该归类为CSS的悬停特效上,纯CSS代码实现,无使用任何的JavaScript代码。
1.带缩略图,鼠标悬停于缩略图时,缩略图将变亮,离开时将变暗;当前显示的缩略图比其他缩略图亮。 2.点击缩略图,将显示大图,同时缩略图所在的容器的滚动条将随之而动。 3.鼠标悬停于大图时将显示向左或向右箭头,...
一个MooTools插件,可在您将鼠标悬停在链接和缩略图上时显示图像工具提示。 如何使用 HTML标记: #HTML Standard tip: <a>link</a>. Customized tip: <a>link</a>. JS代码: #JS // Just create the ...
videojs-vtt-thumbnails Video.js插件,可在进度条悬停时显示缩略图,由外部VTT文件驱动。 基于。 请注意,此插件当前仅支持拼接的缩略图。 注意:插件会在悬停时隐藏默认外观的鼠标显示时间戳。目录安装安装npm ...
将鼠标悬停在缩略图上时自动播放视频。 示例: : 安装 npm install --save reactautoplay 用法 import React from 'react' import VideoThumbnail from "reactautoplay" ; const App = ( ) => { return ( < ...
clappr的插件,将鼠标悬停在擦洗栏上时将显示缩略图。 缩略图可以是单个图像,也可以是精灵表。 您可以找到从视频生成子画面的工具。 用法 将Clappr和缩略图插件脚本都添加到您HTML中: < head > < ...
一个React组件,使设置视频变得非常容易,当用户将鼠标悬停在该视频上时,该视频将播放。 这对于设置缩略图将在悬停时播放视频预览特别有用。 特征 开箱即用的鼠标和触摸屏交互支持 轻松添加自定义缩略图和加载状态 ...
JavaScript显示缩略图的个性幻灯片代码,看到左下角的小方格了吗?鼠标悬停时可显示出对应图片的缩略图,缩略图和大图片是分开的,不是由大图片生成的,内含 两个DEmo,大致差不多的风格,根据喜好选择吧。
摘要:脚本资源,Ajax/JavaScript,缩略图放大,鼠标悬停 jquery实现鼠标滑过图片向上放大显示效果,里面用有CSS3的部分属性,因此为了最佳效果,测试时候请使用火狐或Chrome浏览器。左右两边的圆形按钮可控制缩略图...
(鼠标悬停弹出式图像查看器)的叉子。 安装 在GreasyFork上: 直接从GitHub: (首先应安装Tampermonkey / Violentmonkey / Greasemonkey) 用法 行动 扳机 启用 将鼠标光标移到缩略图上 停用 将光标移出缩略图,或...
jQuery插件一组JQuery插件轮播: : -通过按下下一个或上一个按钮浏览图片标签: : -单击名称,然后在下面显示说明缩略图: : -将鼠标悬停在图像上可获得放大的图像。 如果没有鼠标悬停在图像上,请单击图像以保持...
CSS 的过渡淡入淡出内容图像可以在点击时来回滑动实际的滑动效果是通过 CSS 的 position:absolute 和 transitioning 属性实现的图像列表的缩略图导航鼠标悬停时激活(显示全尺寸)图像缩略图的左右按钮导航
将鼠标悬停在国家国会图书馆数字馆藏搜索结果中显示的缩略图上,以预览较大的图像。 作为一项附加功能,如果在搜索结果中显示了IIIF图标,则可以将IIIF图标拖放到外部IIIF查看器中进行查看。 安装方式 要使用此工具...
这是一款效果非常炫酷的js对角线轮播图特效。该特效切换轮播图的方式为往左上角移动,每个轮播图项可以全屏展开,并且缩略图带有鼠标悬停动画效果。
作业3: 编写一个JavaScript,它显示几个缩略图(缩小的图像)。 当用户将鼠标移到缩略图上时,该图像的原始版本(较大版本)将显示在下方。 如果用户将鼠标移到其他缩略图上,则大图像将分别更改。 作业4: 编写一...
缩略图通过将鼠标悬停在其右上角来显示工具菜单。 可用的工具包括使用 exiftran ( ) 无损旋转照片、编辑附件评论、将附件时间戳更正为照片曝光日期、将附件移动到另一个主题、并删除附件。 此插件仅适用于 JPEG ...
10.18 为列表添加自定义的缩略图图标 10.19 创建列表日历的效果 10.20 动态创建listview列表项 10.21 动态加载和切换页面 10.22 在页面切换时显示加载进度框 10.23 在屏幕旋转时更改显示样式 10.24 在列表框中实现...
FurAffinity预览器适用于Firefox的FurAffinity Previewer...用法将鼠标悬停在FurAffinity的缩略图上,然后稍等-将显示预览。反馈与贡献欢迎通过反馈您知道JavaScript并且想要改进此扩展吗? 始终欢迎对此仓库做出贡献。
该功能是一个简单的叠加层,当您将鼠标悬停在另一个用户的个人资料图片上时,该叠加层会显示在光标附近。 该叠加层将显示有关用户的信息。 如果他们的年龄,性别,位置和简短说明会出现在此处,则他们会在此处显示...