zoukankan      html  css  js  c++  java
  • modalDialog的使用,图片切换,点击图片时打开一个窗体,并显示信息

    //主窗体

    //与open的区别:1、参数二是传递的参数 2、属性设置格式:属性=属性值; 3、dialogHeight与dialogWidth没有单位,即需要自己加上px

     //window.showModalDialog

    //("modalDialog.html",window,"dialogHeight=300px;dialogWidth=300px;scroll=yes;status=yes;dialogTop=100;dialogLeft=100;resizable=1");

    <script language="javascript" type="text/javascript">
     //图片的描述
     var names=[["猫","这是只好猫"],["篮球运动员","非常强"],["登录","欢迎"],["书","好好读书"]];
     //图片地址
     var imgs=["img//cat1.gif","img\xiaoniu.jpg","img//login.jpg","img//书END.jpg"];
     //索引
     var index=1;
     //图片自动切换
     function changeImg(){
      if(index==4){
       index=0;
      } 
      document.getElementById("img").src=imgs[index];
      index++;
     }
     //点击span切换图片
     function clickSpan(){
      var spans=document.getElementsByTagName("span"); 
      for(var i=0;i<spans.length;i++){

    //为每个span标签添加一个点击事件
       spans[i].onclick=function(){
         index=this.innerHTML-1;
         document.getElementById("img").src=imgs[index];
       };
      }
     }
     
     window.onload=clickSpan;
     window.setInterval("changeImg()",1000);
    </script>

    <body>  

    <p align="center">图片动态切换效果</p>

    <img src="img/cat1.gif" id="img" width="160" height="160" onclick="javascript:window.showModalDialog('hw1_Hw2_1.html',window)"/><br />

      <span>1</span>        

    <span>2</span>        

    <span>3</span>        

    <span>4</span>    

    </body>

    //打开的窗体

    <script language="javascript" type="text/javascript">
         function show(){
       //获取打开这个窗体的窗体对象
       var win= window.dialogArguments;
       //获取窗体对象中的names数组的元素
       var name=win.names[win.index-1];
       //获取窗体对象的url数组的元素
       //第一种方法
       //var url=win.imgs[win.index-1];
       //第二种方法
       //var url=win.document.getElementById("img").src;
       document.writeln("<img src='"+url+"' width='260' height='300' align='left'/>");
       document.write("名称:"+name[0]+"<br>");
       document.write("描述:"+name[1]+"<br>");

     //window.dialogArguments获取打开本模式窗体的窗体
      //window.dialogArguments.location.href="打开窗体以及父窗体刷新.html";//刷新
      //window.close();//关闭
      }
      window.onload=show;
        </script>

  • 相关阅读:
    数据库
    流式布局
    ScrollView简单用法
    ADB被占用解决办法
    安卓中shape中的属性大全
    sql语句replace into的用法
    debug
    大数据量数据库优化
    Gson解析后的数据存到本地数据库 耗时的问题
    数据同步异步加载handler Looper
  • 原文地址:https://www.cnblogs.com/danmao/p/3819213.html
Copyright © 2011-2022 走看看