- 浏览: 526731 次
- 性别:
- 来自: 广州
最新评论
-
shitouofIT:
...
Spring Autowired(required = false) 说明 -
liuchongming:
...
Spring Autowired(required = false) 说明 -
20101975liubin:
...
Spring Autowired(required = false) 说明 -
ghpaas:
orbeon作为xforms标准的实现,不论其设计器还是运行时 ...
Eclipse 下安装 Visual XForms Designer 插件 -
young.java:
[flash=200,200][url][img][list] ...
利用JS生成32位的UUID(源码)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Javascript Images zoom-out view sample. Brought to you by 斩梦人.天天
QQ:22062019</title>
<script language="JavaScript">
<!--
var dshowW=450; //默认预览图宽度(可由小图的showW,showH动态指定)
var dshowH=300; //默认预览图高度
var bborder=1; //大图边框
var sborder=1; //小图边框
var vborder=1; //小预览图边框
var bigW,bigH,smallW,smallH,showW,showH,viewW,viewH;//大图,小图,预览窗,小预览窗
var nview,nflag,picstatus,tempo,abox,zoomX,zoomY;
//初始化
window.onload=function init(){
isIE=window.event?1:0;
picshow.style.borderWidth=bborder;
picshow.style.width=dshowW;
picshow.style.height=dshowH;
bpic.style.display="";
abox=document.body.getElementsByTagName("div"); //初始化所有小图
for (n=0;n<abox.length;n++)
if (abox[n].className=="picbox"){
var o=abox[n];
var view=getview(o);
var img=getimg(o);
view.style.borderWidth=vborder;
o.style.borderWidth=sborder;
o.style.width=img.width+sborder*2*isIE;
o.style.height=img.height+sborder*2*isIE;
o.setAttribute("pid",n); //小图标记,主键唯一
if (o.getAttribute("show")=="show") loadpic(o);
o.onmouseout=function (){setTimeout(nview.style.visibility='hidden');}
}
}
//载入图片
function loadpic(o){
var view=getview(o);
var img=getimg(o);
bpic.style.display="none";
nview=view; //标记活动小预览窗
nflag=o.getAttribute("pid"); //当前图片标记,用来判断切换图片
//改变预览窗大小
if (img.getAttribute("showW")!=null) showW=parseInt(img.getAttribute("showW"));
else showW=dshowW;
if (img.getAttribute("showH")!=null) showH=parseInt(img.getAttribute("showH"));
else showH=dshowH;
picshow.style.width=showW+isIE*bborder*2;
picshow.style.height=showH+isIE*bborder*2;
loading.style.marginTop=(showH-loading.offsetHeight)/2;
if (img.getAttribute("dLeft")) bpic.style.marginLeft=-parseInt(img.getAttribute("dLeft"));
if (img.getAttribute("dTop")) bpic.style.marginTop=-parseInt(img.getAttribute("dTop"));
picstatus="loading";
tempo=o;
bpic.src=img.lowsrc;
}
//图片载入完成
function loaddone(o){
bpic.style.display="block";
var view=getview(o);
var img=getimg(o);
smallW=img.width; //改变小图,小预览窗大小
smallH=img.height;
bigW=bpic.width;
bigH=bpic.height;
if (showW>bigW){//如果预览图比大图大,则等于大图
showW=bigW;
picshow.style.width=showW+isIE*bborder*2;
}
if (showH>bigH){
showH=bigH;
picshow.style.height=showH+isIE*bborder*2;
}
zoomX=bigW/smallW;
zoomY=bigH/smallH;
viewW=showW*smallW/bigW;
viewH=showH*smallH/bigH;
nview.style.width=viewW-vborder*2*!isIE;
nview.style.height=viewH-vborder*2*!isIE;
nview.style.display="block";
img.style.top=-nview.offsetHeight;
if (!nview.style.left) nview.style.left=0;
if (!nview.style.top) nview.style.top=0;
picstatus="done"
}
//移动事件
function move(e,o,flag){ //flag,对象来源标记,FF下view的定位需要
o=isIE?o.parentElement:o.parentNode;
if (o.getAttribute("pid")!=nflag){ //判断是否切换了图片
nview.style.visibility="hidden";
loadpic(o); //载入新图片
}
if (picstatus="done"){ //如果大图载入完毕
if (nview.style.visibility="hidden") nview.style.visibility="visible";
var e=isIE?window.event:e;
if (isIE==0){ //分别获取FF或IE的view位置
if (flag==1){ //由于o的来源不同,使用不同的算法定位
vX=e.layerX+parseInt(nview.style.left)-nview.offsetWidth/2-vborder;
vY=e.layerY+parseInt(nview.style.top)-nview.offsetHeight/2-vborder;
}else{
vX=e.layerX-nview.offsetWidth/2-vborder;
vY=e.layerY-nview.offsetHeight/2-vborder;
}
}
else{
vX=e.offsetX-nview.offsetWidth/2;
vY=e.offsetY-nview.offsetHeight/2;
}
if (vX < 0) vX = 0; //边界判断,不能超出缩略图的范围
if (vY < 0) vY = 0;
if (vX > smallW-viewW) {vX=smallW-viewW;mX=bigW-showW}else{mX=vX * zoomX;}
if (vY > smallH-viewH) {vY=smallH-viewH;mY=bigH-showH}else{mY=vY * zoomY;}
nview.style.left=vX;
nview.style.top=vY;
bpic.style.marginLeft = - mX; //刷新预览窗口
bpic.style.marginTop = - mY;
}
}
//得到view
function getview(o){
var arr=o.getElementsByTagName("div");
var n;
for (n=0;n<arr.length;n++)
if (arr[n].className="view") return arr[n];
}
//得到img
function getimg(o){
var arr=o.getElementsByTagName("img");
var n;
for (n=0;n<arr.length;n++)
if (arr[n].className="spic") return arr[n];
}
//-->
</script>
<style type="text/css">
<!--
*{padding:0;margin:0}
body{color:white;background:black;font:bold 12px/18px tahoma;color:white;}
#picshow{border:1px red solid;width:200;height:150;overflow:hidden;margin:0 auto}/*width,height随便定义,为了第一次显示时能看见loading*/
#bpic{display:none}
#loading{font:bold 22px/30px tahoma;color:white;}
#loading img{vertical-align:middle;position:relative}
#loading .text{font:bold 12px/20px tahoma;color:white;}
.picbox{border:1px green dashed;overflow:hidden;float:left;width:0;height:0;text-align:left}/*注意:overflow:hidden;text-align:left不可更改,如果在IE的表格中定位会出问题*/
.spic{position:relative;}/*position:relative不可更改*/
.view{border:1px silver solid;z-index:100;font-size:1px;position:relative;visibility:hidden;display:none}/*position:relative;visibility:hidden;display:none不可更改*/
td{text-align:center;height:60px;font-size:30px;margin:0 auto}
//-->
</style>
</head>
<body>
Some text here...<br>ok.| 您需要做的仅仅是加入picshow块和picbox块,设置必要参数,剩下的就让JS去做吧! (移到小图上看更多说明)
<table cellpadding="0" cellspacing="0" border="2" width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td width="520" align="center">
<div id="picshow">
<img id="bpic" onload="loaddone(tempo)"/>
<div id="loading">
<img src="http://www.jz123.cn/myjs/loading.gif" border="0"/> Loading
<div class="text">Please wait...<br><br><br></div>
</div>
</div>
</td>
<td>
<div class="picbox" show="show"><!--设置show显示默认图片-->
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.jz123.cn/myjs/b1.jpg" src="http://www.jz123.cn/myjs/s1.jpg" onmousemove="move(event,this,0)" dLeft="700" dTop="300" title="设置标签属性show='show'显示默认图片,设置dLeft,dTop定义默认偏移量"/><!--src:小图,lowsrc:大图,showW/showH:可设置预览窗大小-->
</div>
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.jz123.cn/myjs/b2.jpg" src="http://www.jz123.cn/myjs/s2.jpg" onmousemove="move(event,this,0)" showW="200" showH="200" title="可自定义预览图大小"/>
</div>
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.jz123.cn/myjs/b4.jpg" src="http://www.jz123.cn/myjs/s4.jpg" width="302" onmousemove="move(event,this,0)" title="小图可以按比例放大"/><!--这里可以重新设置小图大小,尽量与大图比例保持一致-->
</div>
</td>
<td>In table
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.jz123.cn/myjs/b3.jpg" src="http://www.jz123.cn/myjs/s3.jpg" width="60" onmousemove="move(event,this,0)" title="也可以按比例缩小"/>
</div>
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.jz123.cn/myjs/b3.jpg" src="http://www.jz123.cn/myjs/s3.jpg" onmousemove="move(event,this,0)" showW="500" showH="200" title="可以嵌套在table中"/>
</div>
</td>
</tr>
</table>
Out of table
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.jz123.cn/myjs/b2.jpg" src="http://www.jz123.cn/myjs/s2.jpg" onmousemove="move(event,this,0)" title="放在table外面也没有问题"/>
</div>
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.jz123.cn/myjs/s4.jpg" src="http://www.jz123.cn/myjs/s4.jpg" onmousemove="move(event,this,0)" showW="1000" showH="1000" title="showW='1000' showH='1000',如果指定预览图比原图大,则使用原图大小" />
</div>
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.jz123.cn/myjs/b5.jpg" src="http://www.jz123.cn/myjs/s5.jpg" onmousemove="move(event,this,0)" showW="160" showH="320" title="代码较上一版本健壮,能在IE,FF下稳定工作,基本支持OP,欢迎大家帮助测试!"/>
</div>
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.jz123.cn/myjs/b5.jpg" src="http://www.jz123.cn/myjs/s5.jpg" onmousemove="move(event,this,0)" width="500" height="112" title="即使没有按比例拉伸,也可以正常工作"/>
</div>
</body>
</html>
发表评论
-
android 各种权限 permission 列举
2013-05-28 11:48 1405在Android的设计中,资源的访问或者网络连接,要得到这 ... -
java 判断程序是否正在运行
2011-08-18 18:02 4245public class ProcessBuilder ... -
Spring Autowired(required = false) 说明
2011-07-21 15:29 79325当候选 Bean 数目不为 1 时的应对方法 ... -
ProcessBuilder实现Java应用程序自我重启
2011-07-12 20:01 2737程序运行的过程中,我们可能需要更改一些配置,如果配置 ... -
Spring获取Bean常用方式
2011-07-05 16:42 1869方法一:在初始化时创建ApplicationContex ... -
Java 利用线程池创建并发线程
2011-07-05 16:25 2223import java.util.concurrent. ... -
Java 超时线程控制实现
2011-07-05 16:11 9530在Java中,如果需要设定代码执行的最长时间,即超 ... -
Java 对比两字符串的相似度
2011-07-05 16:03 4143/** * 编辑距离算法,首先由俄国科学家Levensh ... -
Oracle session process lock
2011-05-26 10:30 1785须以Oracle 数据库 system 权限账户登录 ... -
Java 识别字符编码
2011-05-26 10:25 2090public class EncodingUtils { ... -
数据库主键设置为全局唯一方案
2011-04-25 15:09 2480现在通过数据的水平切分(sharding)来实现数据库 Sca ... -
JS验证浏览器端是否安装某插件
2011-04-14 14:01 2245<HTML> <HEAD><sc ... -
利用JS生成32位的UUID(源码)
2011-02-15 16:23 17545创建 UUID.js 文件, 然后复制以下内容: // ... -
Java 日期字符串date与数字long之间的转换
2010-11-30 14:32 50564public class SimpleDateUtil { ... -
Hibernate Annotation 使用说明
2010-09-25 14:18 2460/** * 注释说明: ... -
svn 如何开启用户可编辑log message的权限
2010-07-15 15:38 55301. 首先进入svn 安装目录下找到 hooks 目录, ... -
Myeclipse 7.x/8.x 插件的安装和配置
2010-06-25 23:57 1684Myeclipse 7.x/8.x 插件的安装和配置 ... -
Proxool 连接池监控页面中文乱码异常的处理
2010-06-22 12:50 3990这几天, 在使用proxool监控连接池状态的时候, 偶然发现 ... -
CSS 控制背景图片自动适应宽度和高度
2010-06-10 15:28 5319<!DOCTYPE html PUBLIC " ... -
MySQL常用命令
2010-03-26 15:11 11681,查看mysql状态:mysqladmin ...
相关推荐
在JavaScript编程中,实现"js 图片切换带预览小图片"的功能,通常涉及到动态加载图片、事件处理、DOM操作以及可能的图像处理技术。这是一个常见的需求,例如在产品展示或者相册应用中,用户点击大图前可以先通过小...
总的来说,jQuery Lightbox图片放大预览代码是通过结合jQuery的便利性和CSS的视觉设计,为用户提供了一种无缝且直观的图片查看方式,提升了网页的交互性和视觉吸引力。开发者可以根据需求对其进行定制,以满足特定...
小图片通常用于预览或者缩略图,当用户点击时,可以展示全尺寸的大图。 3. **JavaScript**:JavaScript是实现图片轮换的核心语言,通过编程逻辑控制图片的显示和隐藏,实现动态切换。它可以设置轮换间隔、动画效果...
在网页设计中,提供图片预览功能是一种常见的用户体验优化手段,尤其当图片细节丰富时,用户可能希望在点击后查看更大、更清晰的版本。jQuery作为一个强大的JavaScript库,提供了丰富的功能来实现这样的交互效果。本...
《jQuery与CSS3结合实现的图片墙及大图预览功能详解》 在网页设计中,图片墙是一种常见的展示方式,它可以将多张图片以美观、有序的方式排列,供用户浏览。而通过添加交互功能,如点击小图查看大图并能关闭大图,...
`zoom.js`就是这样一个专门针对jQuery库开发的插件,它能够实现平滑、自然的图片放大预览效果,让小图片轻松转换为大图预览,提升用户的浏览体验。 **1. jQuery库介绍** jQuery是一个快速、简洁的JavaScript库,它...
"jQuery响应式图片放大预览"是一个利用jQuery库实现的高效、灵活的图片预览解决方案,专为适应不同设备和屏幕尺寸的响应式设计而设计。这款插件名为etalage,它为用户提供了鼠标悬停时的小图放大预览效果,使得用户...
4. 图片资源文件:实际展示的图片,可能有大图和小图两种尺寸,用于主展示区和预览导航条。 为了部署和使用这个特效,你需要将这些文件集成到你的网页项目中,通过引用JavaScript和CSS文件,然后在HTML中创建相应的...
在实际应用中,需要注意的是,ZoomJS默认会根据图片原始尺寸来放大,因此对于大尺寸图片,可能需要预先处理,避免加载过慢或消耗过多资源。此外,为了保持页面性能,建议只对需要预览的图片使用此插件,避免不必要的...
"Jquery实现的仿淘宝查看商品图片变大变清晰的功能"就是一种提升用户体验的技术实践,它使得用户在浏览商品时可以方便地查看高清大图,从而更好地了解商品细节。下面将详细介绍这一功能的实现原理和步骤。 1. **...
总的来说,这个压缩包中的JavaScript代码实现了网页中常见的交互效果,通过鼠标滑过触发图片预览,提高了用户的浏览体验。对于想要学习JavaScript和网页交互效果的开发者来说,这是一个很好的实践案例。通过分析和...
JavaScript是实现动态网页的关键,它可以在用户与网页交互时执行代码,改变页面内容。 2. **图片元素操作**:在HTML中,图片元素`<img>`用于展示图片。你需要能够创建、修改和删除这些元素,以便在用户点击小图时...
在"jQuery商品放大镜预览代码"中,jQuery的主要作用是处理用户的鼠标移动事件,实现实时放大镜效果。当用户将鼠标悬停在商品主图上时,一个放大镜窗口会出现在鼠标位置附近,展示图片的高清晰度区域,帮助用户更细致...
当用户点击小图片时,弹出大图和相关信息,这是通过JavaScript事件监听和DOM操作实现的。通常,我们会监听`click`事件,然后获取用户点击图片的详细信息,如图片URL和描述等。这些信息可以预先存储在`data-*`自定义...
2. **HTML结构**:设置合适的HTML结构,一般包括一个主图片容器和一个小图片容器,小图片容器中的每个图片代表大图的一个预览。 3. **初始化插件**:在页面加载完成后,使用JavaScript调用`etalage()`函数来初始化...
大图容器通常包含一个图片元素,而缩略图列表则由多个表示每张大图的小图片组成。 2. **CSS样式**:通过CSS来布局这些元素,确保大图和缩略图的位置正确,以及缩略图列表可以滚动。可以使用`overflow-y: scroll`来...
实现批量图片预览加载的过程中,我们还需要考虑一些额外的问题,例如错误处理、图片尺寸适应、加载进度提示等。在实际项目中,可能需要使用更高级的技术,如Intersection Observer API来更准确地检测元素是否在视口...
7. **优化性能**:在处理大量图片或大图片时,为了提高性能,可以考虑使用Canvas元素代替预览区域的小图片。通过在Canvas上绘制原始图片的缩放部分,可以避免频繁地改变背景位置。 总的来说,使用JQuery实现图片...
最后,如果提供的压缩包"ImagePreview"包含了源代码或工具,那么它可能是一个用于预览图片并支持缩放功能的应用或库。学习和研究这个资源可以加深对图片处理的理解,同时为自己的项目提供参考。
3. **图片缩略预览**:CSS3的`:hover`伪类可以用来实现鼠标悬停时的特殊效果。在这里,我们可以为每个图片元素添加`:hover`样式,当鼠标悬停在图片上时,显示该图片的缩略预览图。这可以通过改变图片的`opacity`、`...