js 操作图片的各种效果 第二篇

于 2012-09-04 15:00:53 发布
阅读量142 收藏
点赞数
分类专栏： javascript 文章标签： 页面图片分页滚动 拖动 定位 键盘控制 对联广告 上传预览 下拉框选择等等
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_8463/article/details/82406639
版权

11，多幅图片分页滚动显示

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>图片轮播</title>
<SCRIPT language="JavaScript">
var scrollerwidth=90         //指定div的高度
var scrollerheight=32        //指定div的宽度
var scrollerbgcolor='white'
var pausebetweenimages=3000   //图片的间隔时间，默认为3秒。
//带链接的图片，存放在数组中
var slideimages=new Array()
slideimages[0]='<A href="http://www.baidu.com"  target=_blank><IMG alt=百度搜索 border=0 height=40 src=http://www.baidu.com/img/logo.gif width=100></A>'
slideimages[1]='<A href=http://www.google.cn target=_blank><IMG alt=google搜索 border=0 height=40 src=http://www.google.cn/intl/zh-CN/images/logo_cn.gif width=100></A>'
slideimages[2]='<A href=# target=_blank><IMG alt=广告位置为你准备 border=0 height=40 src="" width=100></A>'
slideimages[3]='<A href=http://www.google.cn target=_blank><IMG alt=google搜索 border=0 height=40 src=http://www.google.cn/intl/zh-CN/images/logo_cn.gif width=100></A>'
if (slideimages.length>1)
i=2                         //初始化一个变量，用来做图片数组的索引
else
i=0
function move1(mydiv) 
{
    tdiv=eval(mydiv)                                    //获取div对象
    if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=4){ //判断div的y坐标
        tdiv.style.pixelTop=0                           //指定div的y坐标
        setTimeout("move1(tdiv)",pausebetweenimages)    //设置转换的时间间隔
        setTimeout("move2(secondDiv)",pausebetweenimages)
        return
    }
    if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){     
        tdiv.style.pixelTop-=5                        //div开始往上滚动
        setTimeout("move1(tdiv)",100)                 
    }
    else{
        tdiv.style.pixelTop=scrollerheight          //指定div的高度
        tdiv.innerHTML=slideimages[i]               //将图片显示在div中
        if (i==slideimages.length-1 )               //如果已经循环到底，再从第一张开始循环
          i=0
        else
          i++
    }
}
function move2(mydiv)
{
    tdiv2=eval(mydiv)                                    //获取第二个div
    if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=4){//判断div的y坐标
        tdiv2.style.pixelTop=0                           //指定div的y坐标
        setTimeout("move2(tdiv2)",pausebetweenimages)    //设置转换的时间间隔
        setTimeout("move1(firstDiv)",pausebetweenimages)
        return
    }
    if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
        tdiv2.style.pixelTop-=5                   //第二个div开始向上滚动
        setTimeout("move2(secondDiv)",100)
    }
    else{
        tdiv2.style.pixelTop=scrollerheight       //指定第二个div的高度
        tdiv2.innerHTML=slideimages[i]            //将图片显示在div中
        if (i==slideimages.length -1)              //如果已经循环到底，再从第一张开始循环
        i=0
        else
        i++
    }
}
function startscroll()                     //调用实现div层移动的方法
{
    if (document.all){
        move1(firstDiv)
        secondDiv.style.top=scrollerheight//设置第二章图片的位置
    }
}

window.οnlοad=startscroll                 //窗体一架载，便开始显示图片
</SCRIPT>
</head>
<body>
<SCRIPT language="JavaScript">
if (document.all){
    document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hiden;background-color:'+scrollerbgcolor+'">')
    document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')
    document.writeln('<div id="firstDiv" style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">')
    document.write(slideimages[0])
    document.writeln('</div>')
    document.writeln('<div id="secondDiv" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">')
    document.write(slideimages[1])
    document.writeln('</div>')
    document.writeln('</div>')
    document.writeln('</span>')
}
</SCRIPT>
</body>
</html>

 12，多幅图片的循环滚动显示

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
<script language="javascript">
//定义要显示的图片数组
imgArr=new Array()
imgArr[0]="<a href=http://www.google.com/ onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=LOGO1.gif border=0></a>"
imgArr[1]="<a href=http://www.baidu.com/ onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=LOGO2.gif border=0></a>"
imgArr[2]="<a href=http://www.google.com/ onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=LOGO1.gif border=0></a>"
imgArr[3]="<a href=http://www.baidu.com/ onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=LOGO2.gif border=0></a>"
imgArr[4]="<a href=http://www.google.com/ onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=LOGO1.gif border=0></a>"
//内部变量
var moveStep=4;               //步长，单位：pixel
var moveRelax=100;           //移动时间间隔，单位：ms
ns4=(document.layers)?true:false;
var displayImgAmount=4 ;     //视区窗口可显示个数
var divWidth=220;            //每块图片占位宽
var divHeight=145;           //每块图片占位高
var startDnum=0;
var nextDnum=startDnum+displayImgAmount;
var timeID;
var outHover=false;
var startDivClipLeft;
var nextDivClipRight;
//初始化层
function initDivPlace()
{
    if (ns4)
    {
        for (i=0;i<displayImgAmount;i++){
            eval("document.divOuter.document.divAds"+i+".left="+divWidth*i)
        }
        for (i=displayImgAmount;i<imgArr.length;i++){
            eval("document.divOuter.document.divAds"+i+".left="+divWidth*displayImgAmount)
        }
    }else{
        for (i=0;i<displayImgAmount;i++){
            eval("document.all.divAds"+i+".style.left="+divWidth*i)
        }
        for (i=displayImgAmount;i<imgArr.length;i++){
            eval("document.all.divAds"+i+".style.left="+divWidth*displayImgAmount)
        }
    }
}
//设置定时器移动图片
function mvStart(){
    timeID=setTimeout(moveLeftDiv,moveRelax)
}
//清除定时器，停止移动
function mvStop(){
    clearTimeout(timeID)
}

function moveLeftDiv(){
    if (ns4){
        for (i=0;i<=displayImgAmount;i++){
            eval("document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left=document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left-moveStep")
        }

        startDivClipLeft=parseInt(eval("document.divOuter.document.divAds"+startDnum+".clip.left"))
        nextDivClipRight=parseInt(eval("document.divOuter.document.divAds"+nextDnum+".clip.right"))

        if (startDivClipLeft+moveStep>divWidth){
            eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+divWidth)
            
            eval("document.divOuter.document.divAds"+startDnum+".left="+divWidth*displayImgAmount)
            eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".left=document.divOuter.document.divAds"+nextDnum+".left+"+divWidth)
            eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".clip.left=0")
            
            
            startDnum=(++startDnum)%imgArr.length
            nextDnum=(startDnum+displayImgAmount)%imgArr.length
            
            startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
            nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
        }else{
            eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0")
            startDivClipLeft+=moveStep
            nextDivClipRight+=moveStep
        }
        eval("document.divOuter.document.divAds"+startDnum+".clip.left="+startDivClipLeft)
        eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+nextDivClipRight)
    }else{
        for (i=0;i<=displayImgAmount;i++){
            eval("document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.left=document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.pixelLeft-moveStep")
        }
    
        startDivClipLeft=parseInt(eval("document.all.divAds"+startDnum+".currentStyle.clipLeft"))
        nextDivClipRight=parseInt(eval("document.all.divAds"+nextDnum+".currentStyle.clipRight"))
    
        if (startDivClipLeft+moveStep>divWidth){
            eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+divWidth+","+divHeight+",0"+")'")
            
            eval("document.all.divAds"+startDnum+".style.left="+divWidth*displayImgAmount)
            eval("document.all.divAds"+parseInt((nextDnum+1)%imgArr.length)+".style.left=document.all.divAds"+nextDnum+".style.pixelLeft+"+divWidth)
            
            startDnum=(++startDnum)%imgArr.length
            nextDnum=(startDnum+displayImgAmount)%imgArr.length
            
            startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
            nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
        }else{
            startDivClipLeft+=moveStep
            nextDivClipRight+=moveStep
        }
        eval("document.all.divAds"+startDnum+".style.clip='rect(0,"+divWidth+","+divHeight+","+startDivClipLeft+")'")
        eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+nextDivClipRight+","+divHeight+",0)'")
    }
    if (outHover){
        mvStop()
    }else{
        mvStart()
    }
}
//定义显示图片的层
function writeDivs(){
    if (ns4){
        document.write("<ilayer name=divOuter width=750 height="+divHeight+">")
        
        for (i=0;i<imgArr.length;i++){
            document.write("<layer name=divAds"+i+">")
            document.write(imgArr[i]+" ")
            document.write("</layer>")
        }
        document.write("</ilayer>")
        document.close()
        for (i=displayImgAmount;i<imgArr.length;i++){
            eval("document.divOuter.document.divAds"+i+".clip.right=0")
        }
    }else{
        document.write("<div id=divOuter style='position:relative' width=750 height="+divHeight+">")
        
        for (i=0;i<imgArr.length;i++){
            document.write("<div id=divAds"+i+" style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'>")
            document.write(imgArr[i]+" ")
            document.write("</div>")
        }
        document.write("</div>")
        for (i=displayImgAmount;i<imgArr.length;i++){
            eval("document.all.divAds"+i+".style.clip='rect(0,0,"+divHeight+",0)'")
        }
    }
}
writeDivs();
initDivPlace();
</script>
</head>
<body  οnlοad="mvStart()">
      
   

    </body>
</html>

 

13，根据下拉框选择图片显示

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>标题页</title>
</head>
<body>
<CENTER>
<img width=260 height=200 src="http://www.baidu.com/img/logo.gif" name="img1">
</CENTER>
<CENTER>
<SELECT onChange="document.img1.src=options[selectedIndex].value">
<option value="http://www.google.cn/intl/zh-CN/images/logo_cn.gif">goole搜索</option>
<option value="http://www.baidu.com/img/logo.gif">百度搜索</option>
<option value="http://search.cn.yimg.com/i/070420/lg.gif">雅虎搜索</option>
</SELECT>
</CENTER>
</body>
</html>

 

14，判断上传图片的大小  这里采用的是用一个<img> 隐藏的标签来判断。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
<script LANGUAGE="JavaScript">
function Judge()
{
   //判断图片的大小是否大于50，或者小于0（没有选择图片）
   if(document.all.myImg.fileSize>1024*50||document.all.myImg.fileSize<=0)
   {
     alert('请选择小于50K的图片！');
     return false;                 //不执行任何操作
   }
   else{
    alert('上传没问题');
   }
}
</script>
</head>
<body>
<input type="file" id="jia" οnchange="document.all.myImg.src=this.value"/>
<img src="" id="myImg" style="display:none">
<button οnclick="Judge()">上传图片</button>
</body>
</html>

 15，上传图片的预览

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>标题页</title>
</head>
<body>
<form name="form1" id="form1" method="post" action="#">
<input type="file" name="file1" id="file1" οnchange="preview()"/>
</form>
<script type="text/javascript">
function preview()
{ 
var x = document.getElementById("file1");       //获取上传控件
if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;            //使用正则判断用户选择的文件类型
if(patn.test(x.value)){ 
var y = document.getElementById("img1");        //获取图像控件
if(y){ y.src = 'file://localhost/' + x.value; } //获取图像源
else{ var img=document.createElement('img');    //创建图像文件，并设置图像的高度、宽度和id
img.setAttribute('src','file://localhost/'+x.value); 
img.setAttribute('width','120'); 
img.setAttribute('height','90'); 
img.setAttribute('id','img1'); 
document.getElementById('form1').appendChild(img); } }
else{ alert("您选择的不是图像文件。"); }}
</script>
</body>
</html>

 

16，对联广告

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
</head>
<body>

<DIV id=ad_dl01 
style="Z-INDEX: 1; LEFT: 5px; VISIBILITY: visible; WIDTH: 100px; POSITION: absolute; TOP: 55px">
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
 <TR>
    <TD align=left><A onClick="ad_dl01.style.visibility='hidden'">关闭</A></TD></TR>
    <TR>
    <TD><img src="http://images.sohu.com/cs/music/070330_120-120.gif" width="100" height="267" border="0" />
 </TD></TR></TBODY></TABLE></DIV>

<DIV id=ad_dl02 
style="Z-INDEX: 1; RIGHT: 5px; VISIBILITY: visible; WIDTH: 100px; POSITION: absolute; TOP: 55px">
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD align=left><A onClick="ad_dl02.style.visibility='hidden'">关闭</A></TD></TR>
  <TR>
    <TD><img src="http://images.sohu.com/cs/music/070330_120-120.gif" width="100" height="267" border="0" />
    </TD></TR></TBODY></TABLE></DIV>
</body>
</html>

 

17,用键盘控制图片的移动

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
</head>
<script language="JavaScript">
var key=0
var timer
function setObj()
{
    ietype = (document.layers) ? 1 : 0;                   //判断浏览器类型
    divObj = (ietype)? document.mydiv : mydiv.style       //获取指定的div
    Xpos = parseInt(divObj.left);                         //获取div的X坐标
    Ypos = parseInt(divObj.top);                          //获取div的Y坐标
    document.onkeydown = keyDown;                         //设置按键事件
    document.onkeyup = keyUp;                             //设置键盘弹起的事件
    if (ietype) document.captureEvents(Event.keydown | Event.keyup);
}
function keyDown(e)                                      //按键的操作
{
    key = (ietype)? e.which : event.keyCode
    //判断用户按下的键，注意此键盘包括方向键和小键盘（数字键）
    if (key == 108 || key == 37) moveObj(1,2);
    if (key == 114 || key == 39) moveObj(1,3);
    if (key == 100 || key == 40) moveObj(1,4);
    if (key == 117 || key == 38) moveObj(1,5);
}
function keyUp(e)                                       //按键弹起的操作
{
    key=0;clearTimeout(timer);
}
function moveObj(t,u)                                   //移动图片的方法
{
    clearTimeout(timer)
    if (t==1){
        //根据移动的键，改变div的X和Y坐标
        if (u==2){divObj.left = Xpos-=5;timer = setTimeout("moveObj(1,2)", 40);}
        if (u==3){divObj.left = Xpos+=5;timer = setTimeout("moveObj(1,3)", 40);}
        if (u==4){divObj.top = Ypos+=5;timer = setTimeout("moveObj(1,4)", 40);}
        if (u==5){divObj.top = Ypos-=5;timer = setTimeout("moveObj(1,5)", 40);}
       }
}
</script>
<body OnLoad="setObj();focus()">
<div id="mydiv" style="position:absolute; left:0px; top:80px;">
  <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif">
</div></body>
</html>

 

 18，预加载图片以提高网页加载速度

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>标题页</title>
    <script language="javascript">
//用数组存储需要的图片
var imgList = []; 
imgList[0] = "logo1.gif" ; 
imgList[1] = "logo2.gif" ; 
//用户单击按钮时，提取图像的方法
function getImage(index)
{
    var imgsrc= imgList[index];
    document.getElementById("img1").src=imgsrc;
}
</script>
</head>
<body>
<table id="mytbl" width="300" height="50" border="0" cellspacing="2" cellpadding="0" bgcolor="#FFb609">
  <tr> 
    <td> 显示第一张图片<input id="Button1" type="button" value="显示" οnclick="getImage(0)" /></td><td><img id="img1" src=""></td>
  </tr>
  <tr> 
    <td> 显示第二章图片<input id="Button1" type="button" value="显示" οnclick="getImage(1)" /></td><td>预先装载图片</td>
  </tr>
</table>
</body>
</html>

 

19，始终在屏幕右下角的图片

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
<SCRIPT LANGUAGE="JavaScript">
function setVariables() {
imgwidth=235;               //图像的宽度
imgheight=19;               //图像的高度
if (navigator.appName == "Netscape") { //netscape下的位置设置
    horz=".left";
    vert=".top";
    docStyle="document.";
    styleDoc="";
    innerW="window.innerWidth";
    innerH="window.innerHeight";
    offsetX="window.pageXOffset";
    offsetY="window.pageYOffset";
}
else {                              //ie下的位置设置
    horz=".pixelLeft";
    vert=".pixelTop";
    docStyle="";
    styleDoc=".style";
    innerW="document.body.clientWidth";
    innerH="document.body.clientHeight";
    offsetX="document.body.scrollLeft";
    offsetY="document.body.scrollTop";
   }
}
function checkLocation() 
{
    objectXY="rightBottom";         //获取始终显示在右下角的div
    var availableX=eval(innerW);    //最大x坐标
    var availableY=eval(innerH);    //最大y坐标
    var currentX=eval(offsetX);     //鼠标当前的x坐标
    var currentY=eval(offsetY);     //鼠标当前的y坐标
    x=availableX-(imgwidth+30)+currentX; //最终div的x坐标
    y=availableY-(imgheight+20)+currentY;//最终div的y坐标
    evalMove();
    setTimeout("checkLocation()",10);    //定时移动
}
function evalMove() {               //移动到指定位置
    eval(docStyle + objectXY + styleDoc + horz + "=" + x);
    eval(docStyle + objectXY + styleDoc + vert + "=" + y);
}
</script>

</head>
<body bgcolor="#fef4d9" οnlοad="setVariables(); checkLocation();">
aaa<br />
aaa<br />
aaa<br />
aaa<br />
aaa<br />
aaa<br />
aa<br />
a<br />
aa<br />
a<br />
a<br />
a<br />
 
<div id="rightBottom" style="position:absolute; visibility:show; left:235px; top:50px; z-index:2">
<table width=10 bgcolor=#ffffff><td>
<a href="http://www.google.net" οnmοuseοver="window.status='我爱的搜索';return true" οnmοuseοut="window.status='';return true"><center><img src="logo1.gif" width="240" height="20" border="0"></center></a></td>
</table>


</body>
</html>

 

20，可以随意拖动的图片

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>标题页</title>
<style>
.drag{position:relative;cursor:hand}
</style>
<script language="JavaScript">
var dragapproved=false;
var z,x,y;
//移动图片
function move()
{
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x;
z.style.pixelTop=temp2+event.clientY-y;
return false;
}}
function drags()
{
if (!document.all)
return;
if (event.srcElement.className=="drag"){
dragapproved=true;
//以下设置拖放时的位置
z=event.srcElement;
temp1=z.style.pixelLeft;
temp2=z.style.pixelTop ;
x=event.clientX;
y=event.clientY;
document.οnmοusemοve=move;    //绑定鼠标移动事件
}}
document.οnmοusedοwn=drags;   //绑定鼠标单击事件
document.οnmοuseup=new Function("dragapproved=false");  //鼠标up事件
</script>
</head>
<body>
<img src="LOGO1.gif" class="drag">
</body>
</html>

 

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值