用js实现的一个Flash滚动轮换显示图片代码生成器


Posted in Javascript onMarch 14, 2007
<!--文件头模板--> 
<SCRIPT src=top.js></SCRIPT> 
<SCRIPT language=javascript> 
    writeTop('Flash滚动显示图片代码生成','2006-10-18'); 
</SCRIPT> <!--以下为内容--> 
<SCRIPT> 
//运行代码 
function runEx(cod1)  { 
     cod=document.getElementById(cod1) 
      var code=cod.value; 
      if (code!=""){ 
          var newwin=window.open('','','');   
          newwin.opener = null  
          newwin.document.write(code);   
          newwin.document.close(); 
    } 
} 
//复制代码 
function doCopy(ID) {  
    if (document.all){ 
         textRange = document.getElementById(ID).createTextRange();  
         textRange.execCommand("Copy");  
    } 
    else{ 
         alert("此功能只能在IE上有效") 
    } 
} 
//展开_收起段落 
function close_open(theID){ 
    if(document.getElementById(theID).style.display!='none') { 
        document.getElementById(theID).style.display='none'; 
    } 
    else  
        document.getElementById(theID).style.display='block'; 
} 
</SCRIPT> 
<SCRIPT language=javascript> 
    //生成代码 
    function genCode() 
    { 
        var html=''; 
        var picUrl=''; 
        var picLink=''; 
        var picTitle=''; 
        var picWidth=0; 
        var picHeight=0; 
        var titleHeight=0; 
        var backgroudn=''; 
        { 
            var tempUrl=''; 
            var tempLink=''; 
            var tempTitle=''; 
            for(i=0;i<9;++i){ 
                tempUrl=document.getElementById('picUrl_'+(1+i)).value; 
                tempLink=document.getElementById('picLink_'+(1+i)).value; 
                tempTitle=document.getElementById('picTitle_'+(1+i)).value; 
                if(tempUrl == '')continue; 
                if(tempLink == '')tempLink=tempUrl; 
                if(tempTitle == '')tempTitle='无题'; 
                picUrl   += tempUrl + '|'; 
                picLink  += tempLink + '|'; 
                picTitle += tempTitle + '|'; 
            } 
            picUrl = picUrl.substring(0,picUrl.length-1); 
            picTitle = picTitle.substring(0,picTitle.length-1); 
            picLink = picLink.substring(0,picLink.length-1); 
            picWidth = parseInt(document.getElementById('picWidth').value); 
            picHeight=parseInt(document.getElementById('picHeight').value); 
            titleHeight = parseInt(document.getElementById('titleHeight').value); 
            backgroudn = document.getElementById('backgroudn').value; 
        } 
        html += '<EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://staryxy.googlepages.com/PicPlay.swf'; 
        html += ' width='  + picWidth; 
        html += ' height=' + (picHeight + titleHeight); 
        html += ' type=application/x-shockwave-flash WMODE="opaque" FLASHVARS="'; 
        html += 'pics='+picUrl; 
        html += '&links='+picLink; 
        html += '&texts='+picTitle; 
        html += '&borderwidth=' + picWidth; 
        html += '&borderheight=' + picHeight; 
        html += '&textheight=' + titleHeight; 
        html += '" MENU="false"'; 
        html += ' BGCOLOR="' + backgroudn; 
        html += '" QUALITY="high" ALLOWSCRIPTACCESS="sameDomain"></EMBED>'; 
        document.getElementById('ShowCode').value = html; 
        show.innerHTML = html; 
    } 
</SCRIPT> 
<div style="margin-top:5px;background:#9abcde"> 
<div style='cursor:hand' onclick=close_open('edit')><li>设置</li></div> 
<div id='edit' style="margin-left:15px; display:block;"> 
    <div style="background:#cdcdcd"> 
        图片显示宽度:<input size=10 id=picWidth   title="图片显示宽度" value="300"></input> 
        图片显示高度:<input size=10 id=picHeight  title="图片显示高度" value="200"></input> 
        文字区域高度:<input size=10 id=titleheight title="文字区域高度" value="20"></input> 
        背景色:<input size=10 id=backgroudn title="背景色" value='#cdcdcd'></input> 
    </div> 
    <div style="background:#eeeeee"> 
        图片一: 
        <input maxlength=2048 size=25 id=picUrl_1 value="http://staryxy.googlepages.com/diner1.jpg" title="图片URL地址"></input> 
        链接地址:<input maxlength=2048 size=25 id=picLink_1 value="" title="链接地址"></input> 
        说明:<input maxlength=2048 size=20 id=picTitle_1 value="「夜宴」搞恶图片1" title="说明"></input> 
    </div> 
    <div style="background:#cdcdcd"> 
        图片二: 
        <input maxlength=2048 size=25 id=picUrl_2 value="http://staryxy.googlepages.com/diner2.jpg" title="图片URL地址"></input> 
        链接地址:<input maxlength=2048 size=25 id=picLink_2 value="" title="链接地址"></input> 
        说明:<input maxlength=2048 size=20 id=picTitle_2 value="「夜宴」搞恶图片2" title="说明"></input> 
    </div> 
    <div style="background:#eeeeee"> 
        图片三: 
        <input maxlength=2048 size=25 id=picUrl_3 value="http://staryxy.googlepages.com/diner4.jpg" title="图片URL地址"></input> 
        链接地址:<input maxlength=2048 size=25 id=picLink_3 value="" title="链接地址"></input> 
        说明:<input maxlength=2048 size=20 id=picTitle_3 value="「夜宴」搞恶图片3" title="说明"></input> 
    </div> 
    <div style="background:#cdcdcd"> 
        图片四: 
        <input maxlength=2048 size=25 id=picUrl_4 value="http://staryxy.googlepages.com/diner7.jpg" title="图片URL地址"></input> 
        链接地址:<input maxlength=2048 size=25 id=picLink_4 value="" title="链接地址"></input> 
        说明:<input maxlength=2048 size=20 id=picTitle_4 value="「夜宴」搞恶图片4" title="说明"></input> 
    </div> 
    <div style="background:#eeeeee"> 
        图片五: 
        <input maxlength=2048 size=25 id=picUrl_5 value="http://staryxy.googlepages.com/diner8.jpg" title="图片URL地址"></input> 
        链接地址:<input maxlength=2048 size=25 id=picLink_5 value="" title="链接地址"></input> 
        说明:<input maxlength=2048 size=20 id=picTitle_5 value="「夜宴」搞恶图片5" title="说明"></input> 
    </div> 
    <div style="background:#cdcdcd"> 
        图片六: 
        <input maxlength=2048 size=25 id=picUrl_6 value="http://staryxy.googlepages.com/diner12.jpg" title="图片URL地址"></input> 
        链接地址:<input maxlength=2048 size=25 id=picLink_6 value="" title="链接地址"></input> 
        说明:<input maxlength=2048 size=20 id=picTitle_6 value="「夜宴」搞恶图片6" title="说明"></input> 
    </div> 
    <div style='cursor:hand' onclick=close_open('editmore')><li>更多(推荐6张以下,否则说明将看不到)</li></div> 
    <div id='editmore' style='display:none;'> 
        <div style="background:#eeeeee"> 
            图片七: 
            <input maxlength=2048 size=25 id=picUrl_7 value="" title="图片URL地址"></input> 
        链接地址:<input maxlength=2048 size=25 id=picLink_7 value="" title="链接地址"></input> 
        说明:<input maxlength=2048 size=20 id=picTitle_7 value="" title="说明"></input> 
        </div> 
        <div style="background:#cdcdcd"> 
            图片八: 
            <input maxlength=2048 size=25 id=picUrl_8 value="" title="图片URL地址"></input> 
        链接地址:<input maxlength=2048 size=25 id=picLink_8 value="" title="链接地址"></input> 
        说明:<input maxlength=2048 size=20 id=picTitle_8 value="" title="说明"></input> 
        </div> 
        <div style="background:#eeeeee"> 
            图片九: 
            <input maxlength=2048 size=25 id=picUrl_9 value="" title="图片URL地址"></input> 
        链接地址:<input maxlength=2048 size=25 id=picLink_9 value="" title="链接地址"></input> 
        说明:<input maxlength=2048 size=20 id=picTitle_9 value="" title="说明"></input> 
        </div> 
    </div> 
</div> 
<div> 
    <input type=button onclick='javascript:genCode();' value=生成代码> 
    </input> 
</div> 
</div> 

<div style="margin-top:5px;background:#9abcde"> 
<div onclick=close_open('code')  style='cursor:hand'><li>代码</li></div> 
<div id='code' style='margin-left:15px;display:none;'> 
<TEXTAREA rows="15" id="ShowCode" style="width:100%"> 
<!--此处显示结果代码--> 
</TEXTAREA> 
</div> 
<div> 
    <INPUT onclick="runEx('ShowCode')"  type="button" value="运行此代码"/> 
    <INPUT onclick="doCopy('ShowCode')"  type="button" value="复制此代码"/> 
    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行] 
</div> 
</div> 

<div style="margin-top:5px;background:#9abcde;"> 
    <div onclick=close_open('show')  style='cursor:hand'><li>显示效果</li></div> 
    <div id='show' title="显示效果" align=center style="margin-left:15px;display:none;background:#abcdef"> 
    还没有 
    </div> 
</div> 
</div>
Javascript 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 Javascript
JS遍历树层级关系实现原理解析
Aug 31 Javascript
js实现的网站首页随机公告随机公告
Mar 14 #Javascript
newxtree.js代码
Mar 13 #Javascript
xtree.js 代码
Mar 13 #Javascript
js资料prototype 属性
Mar 13 #Javascript
js资料toString 方法
Mar 13 #Javascript
pjblog修改技巧汇总
Mar 12 #Javascript
解决 firefox 不支持 document.all的方法
Mar 12 #Javascript
You might like
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
用PHP制作静态网站的模板框架(二)
2006/10/09 PHP
php url地址栏传中文乱码解决方法集合
2010/06/25 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
NodeJS安装图文教程
2018/04/19 NodeJs
Vue文件配置全局变量的实例
2018/09/06 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
Django封装交互接口代码
2020/07/12 Python
英国网上花店:Bunches
2016/11/29 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
几个人围成一圈的问题
2013/09/26 面试题
个人求职简历的自我评价范文
2013/10/09 职场文书
婚前协议书怎么写
2014/04/15 职场文书
事业单位考核材料
2014/05/21 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
前台接待岗位职责
2015/02/03 职场文书
运动员入场词
2015/07/18 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
JVM钩子函数的使用场景详解
2021/08/23 Java/Android