| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 451 人关注过本帖
标题:求一段JS的代码效果~~
只看楼主 加入收藏
mcici
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2010-8-20
结帖率:0
收藏
已结贴  问题点数:20 回复次数:1 
求一段JS的代码效果~~
程序代码:
<DIV id=Panel style="DISPLAY: none"><A style="DISPLAY: block; FLOAT: right" onclick=hidePanel(); href="#">【关闭】</A></DIV>




    <SCRIPT language=javascript type=text/javascript>
  Shade = new function() { /*新建一个Shade函数,当隐藏图层显示时,将网页后面变暗*/
    var handle = {};
    var shade;
    handle.show = function() {
        if (!shade) {
            shade = document.createElement('div'); /*新建一个div元件*/
            shade.className = 'tb-shade'; /*设置shade区CSS为’tb-shade’,名称和第三步中的一致*/
            document.body.appendChild(shade);
        }        with(('CSS1Compat')?document.documentElement:document.body) {
            var ch = clientHeight, sh = scrollHeight;
            shade.style.height = (sh > ch ? sh : ch) + 'px';
            shade.style.width = offsetWidth + 'px';
            shade.style.display = 'block';
        }
    };
    handle.hide = function() {
        shade.style.display = 'none';
    };
    return handle;

 }

 function showPanel() { /*显示panel函数*/
     Shade.show();/* 执行Shade.show()命令,即后面为暗色*/
     document.getElementById('Panel').style.display = 'block'; /*这里的Panel应和隐藏图层内名称一致 */
     document.getElementById('frame').src = "http:// /*设置frame的源,可自行修改,同时“frame”名称和隐藏图层内一致*/
     document.getElementById('Panel').scrollIntoView();

 }

 function hidePanel() { /*隐藏panel函数 */
     Shade.hide();/*执行Shade.hide命令,暗色消失*/
     document.getElementById('Panel').style.display = 'none'; /*将隐藏图层CSS设置为none,即不显示*/

 }
</SCRIPT>      


<STYLE>
.tb-shade {DISPLAY: none; Z-INDEX: 2007; FILTER: alpha(opacity=60); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #ccc; opacity: .6}/*z-index可自行修改,但必须比#Panel的值要小,filter中的alpha控制显示透明透,可自行调整*/
#Panel {    MARGIN-TOP: -260px; DISPLAY: none; Z-INDEX: 2008; LEFT: 50%; MARGIN-LEFT: -325px; WIDTH: 650px; POSITION: absolute; TOP: 50%; BACKGROUND-COLOR: #fff}/*设置隐藏层位置、宽度,可自行修改*/
</STYLE> 

<a href="#" onclick="showPanel(); return false;"><strong>测试</strong></a>/*链接上加上onclick命令,点击后执行showPanel()函数,名称应和javascript中设置相同*/
哪位可以帮我改一下这段代码,通过点击“测试”弹出层效果,并把需要的值传递给弹出的层。

比如通过点击一张图片,弹出一个层,然后将图片的地址传递 给这个层,并显示缩略图!!
或者重新提供一份JS的效果也行!!小弟对JS不太懂!!在此谢过了!
搜索更多相关主题的帖子: 效果 代码 
2010-08-20 15:05
gupiao175
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:40
帖 子:1787
专家分:7527
注 册:2007-6-27
收藏
得分:20 
程序代码:
  <SCRIPT language=javascript type=text/javascript>
  Shade = new function() { /*新建一个Shade函数,当隐藏图层显示时,将网页后面变暗*/
    var handle = {};
    var shade;
    handle.show = function() {
        if (!shade) {
            shade = document.createElement('div'); /*新建一个div元件*/
            shade.className = 'tb-shade'; /*设置shade区CSS为’tb-shade’,名称和第三步中的一致*/
            document.body.appendChild(shade);
        }        with(('CSS1Compat')?document.documentElement:document.body) {
            var ch = clientHeight, sh = scrollHeight;
            shade.style.height = (sh > ch ? sh : ch) + 'px';
            shade.style.width = offsetWidth + 'px';
            shade.style.display = 'block';
        }
    };
    handle.hide = function() {
        shade.style.display = 'none';
    };
    return handle;
}

 var div=document.createElement('div');//建立全局变量DIV;
function showPanel(src) { /*显示panel函数,参数src就是图片地址*/
     Shade.show();/* 执行Shade.show()命令,即后面为暗色*/
     div.style.cssText='z-index:2008;position:absolute;left:300px;top:100px;';
     div.id='Panel'+src;
     document.body.appendChild(div);
     div.innerHTML="<img src='"+src+"' width='150px' height='150px' onclick=hidePanel('"+src+"'); />";
}
function hidePanel(src) { /*隐藏panel函数 */
     Shade.hide();/*执行Shade.hide命令,暗色消失*/
    document.body.removeChild(div);
    }
</SCRIPT>     



<STYLE>
.tb-shade {DISPLAY: none; Z-INDEX: 2007; FILTER: alpha(opacity=60); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #ccc; opacity: .6}/*z- index可自行修改,但必须比#Panel的值要小,filter中的alpha控制显示透明透,可自行调整*/
</STYLE>

<img src="1.jpg" width="300px" height="300px" onclick="showPanel('1.jpg')"/>
<img src="2.jpg" width="300px" height="300px" onclick="showPanel('2.jpg')"/>
<img src="3.jpg" width="300px" height="300px" onclick="showPanel('3.jpg')"/>
准备几张图片1.jpg...N.jpg都可以,然后按照上面的形式就可以把照片地址传到小层里显示!至于样式自己进函数里改吧!

Q:1428196631,百度:开发地 即可找到我,有事请留言!
2010-08-20 18:20
快速回复:求一段JS的代码效果~~
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.021762 second(s), 7 queries.
Copyright©2004-2025, BCCN.NET, All Rights Reserved