169it科技资讯


当前位置:  编程技术>jquery

jQuery右下角弹出广告代码兼容多浏览器

    来源: 互联网  发布时间:2014-10-09

用jQuery写了个右下角弹出广告,经过测试完美支持各个浏览器。
需要JQ库,可以去jQurey官网去下载,下载后调入js文件,然后加上以下js:
 

代码示例:
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var menutop = $(window).height() - $("#test2").height();
var menuright = $(window).width() - $("#test2").width();
$(window).scroll(function (){
var offsetTop = menutop + $(window).scrollTop();
$("#test2").css("top",offsetTop );
$("#test2").css("left",menuright);
});
$("#gbb").click(function(){
$("#test2").hide("fast");
})
});
></script>

HTML部分:
 

代码示例:
<div id="test2" >
<div >
<div ><img id="gbb" src="images/guanbi.gif" alt="" /></div>
<a href="#"><img src="http://192.168.1.110/upload/2012/12/1/rui--logo.jpg" alt="" width="250px" height="250px" /></a>
</div>
</div>
 

原理:
把id=test2的div定位( position: absolute;)然后获取它在浏览器的top与left的值已达到定位的目的。

详细步骤:
1、浏览器载入页面时执行此函数。
 

$(document).ready(function(){}

2、当浏览器载入时,获取id=test2的div的top与left的值;
 

var menutop = $(window).height() - $("#test2").height();
var menuright = $(window).width() - $("#test2").width();

3、当滚动条滚动时执行以下函数。
 

$(window).scroll(function (){}

4、获取当滚动条滚动时,id=test2的div的top的值(div本来的值加上滚动条滚动的值);
 

var offsetTop = menutop + $(window).scrollTop();

5、把获取到的值放到赋予到css里面。
 

$("#test2").css("top",offsetTop );
$("#test2").css("left",menuright);

6、关闭隐藏div。
 

$("#gbb").click(function(){
$("#test2").hide("fast");
})

以上就是jquery实现右下角弹出广告代码的例子,大家注意代码注释中的说明,希望对大家有所帮助。


    
相关技术文章:
    ▪jquery弹窗提示窗口代码的例子

     jquery制作的弹窗提示窗口插件,包含多种模式,带有回执函数值的功能。 例子,jquery弹窗代码。   代码示例: <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <!--[if IE 6]> <script type="text/javascript" src="js/iepngfix_tilebg.js"></script> <![endif]--> <script type="text/javascript"> function position(elem,l,t){     var isIE6 = !-[1,] && !window.XMLHttpRequest;     if(isIE6){         var style = elem.style,         dom  = '(document.documentElement)',         left =......


    ▪jquery全选与反选插件怎么写?实例代码

     用jquery实现一个全选与反选的插件,表单列表数据的全选与取消全选功能,内含示例,小巧实用。 自动判断当前选中数量,加上全选。 将它命名为jQuery.fn.check插件。 功能需求: 1、所有复选框的状态都随全选复选框的状态而发生变化; 2、如果所有复选框都被选中时,全选复选框立即处于选中状态; 3、如果当前选中复选框的数量小于复选框的总数时,全选复选框立即处于非选中状态; 所以,在那些处于全选复选框控制之下的复选框全被点击时,就需要时刻判断当前被选中复选框的个数,从而决定全选复选框是否被选中。 ......


    ▪jquery进度条简单示例

     一个jquery进度条的实例代码 效果图: 需要用到的图片: 背景图片: 进度显示图片: 下面是正文,大家可以体会与纯js进度条有什么不同啦。 1,网页结构:   <div id="center"> <div id="message"></div> <div id="loading"><div></div></div> </div> 2,css样式代码   #center{ margin:50px auto; width:400px; } #loading{ width:397px; height:49px; background:url(bak.png) no-repeat; } #loading div{ width:0px; ......


 
最新技术文章:
    ▪jquery怎么限制文本框只能输入数字?

     如何用jquery 限制文本框只能输入数字呢?   先来看一个简单的例子:    代码示例: $("input[name='fangwenyudinhuishu']").keyup(function(){       var tmptxt=$(this).val();       $(this).val(tmptxt.replace(/\D|^0/g,''));     }).bind("paste",function(){       var tmptxt=$(this).val();       $(this).val(tmptxt.replace(/\D|^0/g,''));     }).css("ime-mode", "disabled");    以上是keyup事件处理,接着处理了CTR+V事件,最后是css设置输入法不可用。 例子,用jquery限制文本框只能输入数字:(......


    ▪jquery显示与隐藏div的方法示例

     例子,显示与隐藏div。   $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法  以下是一些显示与隐藏div,给元素设置style属性的方法。   1,给元素换class,来实现隐藏div,前提是换的class样式定义好了隐藏属性   $("#sendPhoneNum").attr("class", "n_input3");  2,给元素设置style属性   $("#top_notice").attr("style", "display:block;");    3,通过jquery的css方法,设置div隐藏   $("#sendPhoneNum").c......


    ▪jquery怎么获取div的id值?

     例子,jquery获得div的id。   <div id="product_shift_out_{m}"> </div>  <script language = "JavaScript" type="text/javascript">  $(document).ready(function(){  name = $('div').eq(0).attr('id');  alert(name)  });  </script> eq(0)是取第一个jq元素。   eq(index) 匹配一个给定索引值的元素 -------------- Matches a single element by its index. 返回值 Element 参数 index (Number) : 从 0 开始计数 例子,查找第二行。   <table> <tr><td>Header 1</td></tr> <tr><td>Va......


 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

浙ICP备11055608号