zoukankan      html  css  js  c++  java
  • 哪个美女最漂亮,自己写的js图片自适应切换

    自己手写了个图片自适应切换,功能上很简单,大家也能看到,很明显,代码非常冗余.
    <script type="text/javascript">
    var imgSrcList="http://www.cnblogs.com/images/cnblogs_com/tobin/144465/r_1.jpg,http://www.cnblogs.com/images/cnblogs_com/tobin/144465/r_2.jpg,http://www.cnblogs.com/images/cnblogs_com/tobin/144465/r_3.jpg,http://www.cnblogs.com/images/cnblogs_com/tobin/144465/r_4.jpg,http://www.cnblogs.com/images/cnblogs_com/tobin/144465/r_5.jpg";
    var titleList="美女1,美女2,美女3,美女4,美女5";
    var urlList="tobin.cnblogs.com/1,tobin.cnblogs.com/2,tobin.cnblogs.com/3,tobin.cnblogs.com/4,tobin.cnblogs.com/5";
    var imgArray=imgSrcList.split(",");//转换成数组
    var titleArray=titleList.split(",");//转换成数组
    var urlArray=urlList.split(",");//转换成数组
    var mainWidth,mainHeight;
    var intervalTimer;
    var picIndex=-1;
    window.onload
    =function()
    {
    //获取外框div的宽高
    mainWidth= document.getElementById("PicShowMain").offsetWidth;
    mainHeight
    =document.getElementById("PicShowMain").offsetHeight;
    document.getElementById(
    "PicMain").src=imgArray[picIndex+1];
    //调整图片大小
    ChangePicSize();
    document.getElementById(
    "PicShowText").href=urlArray[picIndex+1];
    document.getElementById(
    "PicShowText").title=document.getElementById("PicShowText").innerHTML=titleArray[picIndex+1];
    picIndex
    =0;
    //每隔6秒切换一次
    intervalTimer=setInterval(ChangePic,6000);
    }

    function ChangePic()
    {
    picIndex
    ++;
    //设置滤镜使图片有效果,IE支持
    document.getElementById("PicMain").filters.item(0).transition=Math.floor(Math.random()*23);
    document.getElementById(
    "PicMain").filters.item(0).Apply();
    document.getElementById(
    "PicMain").src=imgArray[picIndex];
    ChangePicSize();
    document.getElementById(
    "PicShowText").href=urlArray[picIndex];
    document.getElementById(
    "PicShowText").title=document.getElementById("PicShowText").innerHTML=titleArray[picIndex];
    document.getElementById(
    "PicMain").filters.item(0).Play();
    if(picIndex>=imgArray.length-1)
    picIndex
    =-1;
    }

    function GetPicSize(picUrl)
    {
    //创建一个image对象,获取图片实际的宽高,放到数组中返回
    var size=new Array();
    var img=new Image();
    img.src
    =picUrl;
    size[
    0]=parseInt(img.width);
    size[
    1]=parseInt(img.height);
    return size;
    }

    //根据图片实际大小和外框大小,调整img标签的大小,使图片放大/缩小但不变形
    function ChangePicSize()
    {
    var picsize=GetPicSize(document.getElementById("PicMain").src);
    if(mainWidth<=picsize[0]&&mainHeight>=picsize[1])
    {
    document.getElementById(
    "PicMain").width=mainWidth;
    document.getElementById(
    "PicMain").removeAttribute("height");
    }

    else if(mainWidth>=picsize[0]&&mainHeight<=picsize[1])
    {
    document.getElementById(
    "PicMain").height=mainHeight;
    document.getElementById(
    "PicMain").removeAttribute("width");
    }

    else if(mainWidth<=picsize[0]&&mainHeight<=picsize[1])
    {
    if(picsize[0]/mainWidth
    <picsize[1]/mainHeight)
    {
    document.getElementById(
    "PicMain").height=mainHeight;
    document.getElementById(
    "PicMain").removeAttribute("width");
    }

    else
    {
    document.getElementById(
    "PicMain").width=mainWidth;
    document.getElementById(
    "PicMain").removeAttribute("height");
    }

    }

    else if(mainWidth>=picsize[0]&&mainHeight>=picsize[1])
    {
    if(mainWidth/picsize[0]<mainHeight/picsize[1])
    {
    document.getElementById(
    "PicMain").width=mainWidth;
    document.getElementById(
    "PicMain").removeAttribute("height");
    }

    else
    {
    document.getElementById(
    "PicMain").height=mainHeight;
    document.getElementById(
    "PicMain").removeAttribute("width");
    }

    }

    }

    //鼠标移动到图片停止切换
    function mmin()
    {
    clearInterval(intervalTimer);
    }

    //鼠标移开图片继续切换
    function mmout()
    {
    intervalTimer
    =setInterval(ChangePic,6000);
    }

    </script>
    <div style=" 400px;">
    <div id="PicShowMain" style="overflow: hidden;  400px; height: 300px; text-align: center;"><img id="PicMain" onmouseover="mmin()" onmouseout="mmout()" alt="" src="http://www.cnblogs.com/images/cnblogs_com/tobin/144465/r_1.jpg" style="filter: revealTrans(duration=3,transition=100)" border="0" /></div>
    <div><id="PicShowText" href="http://www.cnblogs.com/tobin/admin/EditPosts.aspx?opt=1#"></a></div>
    </div>
    代码很简单,没什么特别的地方:

    准备写成这种形式:
    <script type="text/javascript">
    var PicEngine=function()
    {
    //.
    this.ChangePic=function()
    {
    //.
    }

    this.GetPicSize=function()
    {
    //.
    }

    this.ChangePicSize=function()
    {
    //.
    }

    }

    </script>
    但实在是个人对这个this的用法确实不了解。希望有高手能帮我封装一下。
    这个只是最简单的,等我学会了这种方式的初始化以后会写成asp.net 控件,原来封装了一个flash+js实现的,可惜flash不是俺写的,链接不好控制,所以准备自己动手写一个。


                                                       第八宗罪Tobin

  • 相关阅读:
    如何导出API文档,没有你做不到,只有你想不到!
    Oracle 数据库数据排名函数:rank() 和dense_rank() 。
    第二次绩效评估
    检查博客
    “E记”Alpha版使用说明
    绩效评估
    第一个冲刺周期意见评论
    第一个冲刺周期意见汇总
    第一次冲刺会议评审总结
    软件工程概论第一个冲刺周期
  • 原文地址:https://www.cnblogs.com/tobin/p/1240131.html
Copyright © 2011-2022 走看看