用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 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
JavaScript获得选中文本内容的方法
Dec 02 Javascript
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
js实现tab切换效果实例
Sep 16 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
javascript for循环性能测试示例
Aug 07 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
php whois查询API制作方法
2011/06/23 PHP
关于PHP堆栈与列队的学习
2013/06/21 PHP
php安装swoole扩展的方法
2015/03/19 PHP
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
Python实现句子翻译功能
2017/11/14 Python
pandas计数 value_counts()的使用
2019/06/24 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
a标签下载链接的简单实现
2016/09/13 HTML / CSS
如何写你的创业计划书
2014/01/07 职场文书
行政内勤岗位职责
2014/04/07 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
Nginx配置之禁止指定IP访问
2022/05/02 Servers