用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 相关文章推荐
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
jQuery实现简单全选框
Sep 13 jQuery
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
其他功能
2006/10/09 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
python找出完数的方法
2018/11/12 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
python 使用shutil复制图片的例子
2019/12/13 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
EJB面试题
2015/07/28 面试题
六查六看自查材料
2014/02/17 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
基于python实现银行管理系统
2021/04/20 Python
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技