推荐一个不错的图片浏览效果- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 推荐一个不错的图片浏览效果

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

Javascript 中的推荐一个不错的图片浏览效果

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 253 ::

收藏到网摘: n/a

实现javascript的延期执行或者重复执行的两个函数 form中限制文本字节数js代码

受那位WPSXXX的 IMG大于DIV 的启发写的
有不足之处如果有什么好的修改或建议希望能给我一份copy 谢谢
[email protected]

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Map Image</title>
<style type="text/css">
* {margin:0px auto;padding:0px;text-align:center;}
* {font-size:9pt;font-family:Arial;}
body {margin-top:20px;}
body{-moz-user-select: none;-khtml-user-select: none;user-select: none;}
div {position:relative;width:400px;height:400px;}
font {cursor:default;color:red;font-weight:bold;line-height:16px;border:solid 1px red;}
/* Img Show Zone */
#imgShow {border:solid 1px red;width:400px;height:400px;overflow:hidden;}
#imgShow img {border:none;}
/* Control Bar Style */
#ctlBar {position:absolute;bottom:0px;right:0px;width:140px;height:140px;border:solid 1px red;overflow:hidden;}
#ctlBar[id] {bottom:-2px;right:-2px;}
.ctlTop {width:100%;height:15%;overflow:hidden;cursor:default;color:snow;}
.ctlBottom {width:100%;height:15%;clear:both;overflow:hidden;}
.ctlLeft {width:15%;height:70%;float:left;overflow:hidden;color:orange;cursor:default;font-weight:bold;}
.ctlRight {width:15%;height:70%;float:right;overflow:hidden;}
#ctlBar img {border:none;display:block;}
.ctlBottom a {color:snow;text-decoration:none;float:left;font-size:7pt;margin-top:5px;margin-left:2px;margin-right:2px;}
* html .ctlBottom a {margin-left:0px;margin-right:0px;}
.ctlBottom a:hover {color:#3cf;}
#arrUp {position:absolute;left:0px;margin:2px;width:16px;height:16px;}
#arrDown {position:absolute;bottom:0px;left:0px;margin:2px;width:16px;height:16px;}
#arrLeft {float:left;margin:2px;width:16px;height:16px;}
#arrRight {float:right;margin:2px;width:16px;height:16px;}
.ctlTop span {font-weight:bold;font-family:Arial;color:red;float:right;padding:1px 3px 1px 3px;cursor:pointer;}
#ctlCenter {width:70%;height:70%;float:left;overflow:hidden;}
#dragDiv {position:absolute;border:solid 1px blue;height:80px;width:80px;opacity:0.5;background:orange;}
* html #dragDiv {filter: progid:DXImageTransform.Microsoft.Alpha (opacity=50);}
#pre {position:relative;}
/* top:0px;left:0px; */
/* Hide ctl bar */
#ctlHide {position:absolute;right:-1px;bottom:-1px;padding:1px 3px 1px 3px;background-color:red;color:snow;cursor:pointer;display:none;font-weight:bold;}
* html #ctlHide {right:0px;bottom:0px;}
/* Test Other Parts */
#test {margin-top:10px;}
#test img{width:120px;height:120px;margin:5px 5px;padding:0px;border:solid 1px dodgerblue;cursor:pointer;}
</style>
<script type="text/javascript">
var p=1;
var prep;
var imgp;
var px;
var py;
var msx;
var msy;
var tmpx;
var tmpy;
var dx=0;
var dy=0;
var dragfg=false;
function pDrag(e){
if(dragfg){
var pcon=document.getElementById("ctlCenter");
var pdiv=document.getElementById("dragDiv");
var pimg=document.getElementById("pre");
var dltx=e.clientX-tmpx;
var dlty=e.clientY-tmpy;
var marl=(pcon.clientWidth-pimg.width)/2;
var marr=marl+pimg.width-pdiv.clientWidth;
var mart=(pcon.clientHeight-pimg.height)/2;
var marb=mart+pimg.height-pdiv.clientHeight;
var divt=parseInt(pdiv.style.top);
var divl=parseInt(pdiv.style.left);
var demox=divl+dltx;
var demoy=divt+dlty;
if((demox>=marl) && (demox<=marr)) pdiv.style.left=demox+"px";
if((demoy>=mart) && (demoy<=marb)) pdiv.style.top=demoy+"px";
tmpx=e.clientX;
tmpy=e.clientY;
//return false;
}
}
function sDrag(e)
{
var temp = (typeof e.target != "undefined")?e.target:e.srcElement;
dx=0;
dy=0;
if(!dragfg) {
msx=e.clientX;
msy=e.clientY;
}
if(temp.id=="dragDiv"){
dragfg=true;
px=(typeof(e.offsetX)=="undefined")?e.layerX-2:e.offsetX;
py=(typeof(e.offsetY)=="undefined")?e.layerY-2:e.offsetY;
tmpx=e.clientX;
tmpy=e.clientY;
}
}
function eDrag(e){
dragfg=false;
var scrLeft=parseInt(document.getElementById("dragDiv").style.left)-(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2;
var scrTop=parseInt(document.getElementById("dragDiv").style.top)-(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2;
var ppp=document.getElementById("imgShow").clientWidth/document.getElementById("dragDiv").clientWidth;
o.scrollTop=scrTop*ppp;
o.scrollLeft=scrLeft*ppp;
}
</script>
</head>
<body onload="alert('Thank u for viewing'+'\n'+'Any good modify pls give me a copy'+'\n'+'sjx.saxon@gmail.com');">
<div>
<div id="imgShow">
<img id="pic" src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" alt="Oops" />
</div>
<div id="ctlBar">
<div class="ctlTop"><span onclick="document.getElementById('ctlBar').style.display='none';document.getElementById('ctlHide').style.display='block';">Hide</span>Design by saxon</div>
<div class="ctlLeft">
T
O
O
L
S</div>
<div class="ctlRight">
<font id="arrUp" onmouseover="imgScroll('up');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">↑</font>
<font id="arrDown" onmouseover="imgScroll('down');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">↓</font>
</div>
<div id="ctlCenter"><img id="pre" src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" alt="Oops" />
<div id="dragDiv" onmousedown="sDrag(event);" onmousemove="pDrag(event);" onmouseup="eDrag(event);" onmouseout="eDrag(event);"></div>
</div>
<div class="ctlBottom">
<font id="arrLeft" onmouseover="imgScroll('left');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">←</font>
<a href="mailto:sjx.saxon@gmail.com">sjx.saxon@gmail.com</a>
<font id="arrRight" onmouseover="imgScroll('right');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">→</font>
</div>
</div>
<span id="ctlHide" onclick="document.getElementById('ctlBar').style.display='block';document.getElementById('ctlHide').style.display='none';">Display</span>
</div>
<p id="test">
<img src="http://img.ea3w.com/article/0/420/likNolm87uUbI.jpg" alt="Oops" />
<img src="http://www.yczhang.com/upload/200606021857377727.jpg" alt="Oops" />
<img src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" alt="Oops" />
<img src="http://image2.sina.com.cn/gm/o/n/2005-03-23/U508P115T9D91113F168DT20050323104505.JPG" alt="Oops" />
本地浏览IE下有效<input type="file" id="viewLocal" /><input type="button" value="Change Pic" onclick="chkValue('viewLocal');" />
URL图片地址浏览<input type="text" id="viewOnline" /><input type="button" value="Change Pic" onclick="chkValue('viewOnline');" />
<script type="text/javascript">
function imgChg(s){
if(document.getElementById('ctlBar').style.display=="none"){
document.getElementById('ctlBar').style.display="block";
document.getElementById('ctlHide').style.display="none";
var flag=true;
}
var newImg=document.createElement("img");
newImg.id="pre";
newImg.alt="Oops";
newImg.onmouseout="eDrag(event);"
newImg.src=s;
document.getElementById("pic").src=s;
document.getElementById("ctlCenter").replaceChild(newImg,document.getElementById("pre"));
preImgInit();
if(flag){
document.getElementById('ctlBar').style.display="none";
document.getElementById('ctlHide').style.display="block";
}
o.scrollTop=0;
o.scrollLeft=0;
}
function chkValue(ob)
{
var str=document.getElementById(ob).value.split('.')[document.getElementById(ob).value.split('.').length-1].toLowerCase();
if(/^jpg$|^gif$|^ico$|^png$|^bmp$/.test(str)) imgChg(document.getElementById(ob).value);
}
document.getElementById("viewOnline").value="http://image2.sina.com.cn/gm/o/n/2005-03-22/U508P115T9D90812F168DT20050322105759.jpg";
</script>
<script type="text/javascript">
var sp=5;
var tc;
function imgScroll(d){
var ptx=o.scrollLeft;
var pty=o.scrollTop;
if(tc) clearInterval(tc);
if(d=="up"){
tc=setInterval("up()",30);
}
else if(d=="down"){
tc=setInterval("down()",30);
}
else if(d=="left"){
tc=setInterval("left()",30);
}
else if(d=="right"){
tc=setInterval("right()",30);
}
else{
return alert("There must be something wrong...");
}
}
function up() {o.scrollTop -= sp;
document.getElementById("dragDiv").style.top =(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+o.scrollTop*prep+"px";}
function down() {o.scrollTop += sp;
document.getElementById("dragDiv").style.top =(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+o.scrollTop*prep+"px";}
function left() {o.scrollLeft -= sp;
document.getElementById("dragDiv").style.left =(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2+o.scrollLeft*prep+"px";}
function right() {o.scrollLeft += sp;
document.getElementById("dragDiv").style.left =(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2+o.scrollLeft*prep+"px";}
function mvStop()
{
if(tc) clearInterval(tc);
}
</script>
<script type="text/javascript">
function preImgInit(){
var imgx=document.getElementById("pre").width;
var imgy=document.getElementById("pre").height;
if(imgx==imgy)
{
document.getElementById("pre").style.width="100%";
document.getElementById("pre").style.height="100%";
prep=document.getElementById("pre").clientHeight/imgy;
imgp=document.getElementById("imgShow").clientHeight/imgy;
document.getElementById("dragDiv").style.width=imgp*document.getElementById("pre").clientHeight+"px";
document.getElementById("dragDiv").style.height=imgp*document.getElementById("pre").clientHeight+"px";
document.getElementById("dragDiv").style.left="0px";
document.getElementById("dragDiv").style.top="0px";
}
else if(imgx>imgy)
{
document.getElementById("pre").style.width="100%";
document.getElementById("pre").style.height=imgy/imgx*100+"%";
prep=document.getElementById("pre").clientWidth/imgx;
imgp=document.getElementById("imgShow").clientWidth/imgx;
document.getElementById("dragDiv").style.width=imgp*document.getElementById("pre").clientWidth+"px";
document.getElementById("dragDiv").style.height=imgp*document.getElementById("pre").clientWidth+"px";
document.getElementById("dragDiv").style.left="0px";
document.getElementById("dragDiv").style.top=(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+"px";
document.getElementById("pre").style.top=(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+"px";
}
else
{
document.getElementById("pre").style.height="100%";
document.getElementById("pre").style.width=imgx/imgy*100+"%";
prep=document.getElementById("pre").clientHeight/imgy;
imgp=document.getElementById("imgShow").clientHeight/imgy;
document.getElementById("dragDiv").style.width=imgp*document.getElementById("pre").clientHeight+"px";
document.getElementById("dragDiv").style.height=imgp*document.getElementById("pre").clientHeight+"px";
document.getElementById("dragDiv").style.top="0px";
document.getElementById("dragDiv").style.left=(document.getElementById("pre").offsetLeft-1)+"px";
}
}
document.body.onselectstart=function(){return false};
preImgInit();
var o=document.getElementById("imgShow");
</script>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

(不会封装代码有待更一步优化...)
关于层拖动第一次写参考了一些别人的方法直接在mousedown里加mousemove事件在mouseup里取消move事件写不来只能手动加在div上面加3个事件...
PS:貌似这素自从加入51js后第2个原创(也不知道别人写过没应该写过吧...) 记的没错的话和第一次写相隔了4年多了...-_-|||...看着代码能运行感觉真好早知道应该考计算机系的...
打包文件下载

实现javascript的延期执行或者重复执行的两个函数 form中限制文本字节数js代码

Javascript 中的 推荐一个不错的图片浏览效果

评论 (0) All

Javascript 中的推荐一个不错的图片浏览效果