网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文:

 

标题 jquery弹出灰色层
范文
    jquery弹出灰色的提示框,可以在框内写任何东西。通过对层的定位,宽,高,透明度进行更改。来实现层的叠加显示,最终实现弹出灰色提示框.
    先看主要代码。
    jquery,操作代码:
    <script language="javascript" src="jquery.js"></script>
    <script language="javascript">
    $(function(){
    $("img[class='foraspcn']").each(function(index){
    $("#showImg").show().css("height",$(document).height());
    $("#showImg_content").html("<img src="+$(this).attr("src")+">").show().css({"top":$(window).height()*0.5+$(window).scrollTop()-
    $("#showImg_content>img").height()*0.5,"left":$(window).width()*0.5-$("#showImg_content>img").width()*0.5}).click(function(){$("#showImg").hide
    ();$(this).hide();});
    });
    });
    解释一下代码:选出所有的class=foraspcn的类的图片。点击则执行背景层显示,并设定宽度为自动,高度为文档高度(即从上到下)。
    然后,将图片写入到显示层内容。并设置显示层的top left位置,top left分别为文档高度-滚动高度-一半的图像高度,window的宽度-一半的图片宽度。
    设置完毕后,添加click事件。点击图片则隐藏两个层。
    中间图片层。(这个就根据自己需求来定了)。我用的是图片
    <center>
    <img src="images/L_ad.jpg" >
    <img src="images/L_ad.jpg">
    <img src="images/L_ad.jpg" >
    </center>
    <center>
    <img src="images/L_ad.jpg">
    <img src="images/L_ad.jpg">
    <img src="images/L_ad.jpg">
    </center>
    <center>
    <img src="images/L_ad.jpg">
    <img src="images/L_ad.jpg">
    <img src="images/L_ad.jpg">
    </center>
    //这里是隐藏的层了。通过jquery对隐藏层的操作来实现弹出灰色的层。
    第一个层是灰色的背景层
    <div id="showImg"></div>
    第二个层是显示的内容层。
    <div id="showImg_content"></div>
    看懂弹出灰色层,提示框的内容了么。点击看看下面特效。
随便看

 

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板,是学习及工作的有利工具。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/19 11:41:36