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

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

Javascript: js支持158、159开头的手机号的验证; javascript学习网址备忘; JScript的条件编译; [原创]站长必须要知道的javascript广告代码; js实现的点击超链显示隐藏层; JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子; JavaScript 不只是脚本; 把JS与CSS写在同一个文件里的书写方法; Javascript & DHTML 实例编程（教程）基础知识; Javascript & DHTML 实例编程（教程）DOM基础和基本API; javascript实现的一个图片转移效果; 用js实现键盘方向键翻页功能的代码; js实现DIV的一些简单控制; 用CSS+JS实现的进度条效果效果; 爱恋千雪-US-AscII加密解密工具（网页加密）下载; 用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口; 非常不错的页面特效建议大家看下; javascript Zifa FormValid 0.1表单验证代码打包下载; 实现javascript的延期执行或者重复执行的两个函数; 推荐一个不错的图片浏览效果

No. « ‹ 69 70 71 72 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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 中的推荐一个不错的图片浏览效果