当前位置:  编程技术>jquery

jquery宽屏特效之可关闭两边飘浮对联广告

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

    本文导语:  本节内容: 可关闭的两边飘浮对联广告 代码说明: 可关闭的左右两边飘浮的对联广告代码jquery特效,宽屏分辨率大于1024px才显示。 点击关闭按钮可以单独关闭自己一边的飘浮的对联广告代码。 js代码中的var screen_w = screen.width;...

本节内容:
可关闭的两边飘浮对联广告

代码说明:
可关闭的左右两边飘浮的对联广告代码jquery特效,宽屏分辨率大于1024px才显示。

点击关闭按钮可以单独关闭自己一边的飘浮的对联广告代码。

js代码中的var screen_w = screen.width; if(screen_w>1024){duilian.show();} 是jquery判断浏览器分辨率的,可以修改这个可关闭的左右两边飘浮的对联广告代码所需要的浏览器分辨率值,

如果不想做判断可以删除这两句,让后把css代码 .duilian{top:260px;position:absolute; width:102px; overflow:hidden; display:none;}中的display:none;删除就不判断浏览器分辨率了。

点击两边飘浮的对联广告代码的下方关闭,可以关闭各自的半边对联广告。

1,部分html代码:
 

代码示例:


   
对联的内容

    X关闭


   
对联的内容

    X关闭

2,部分css代码如下:
 

代码示例:
/*下面是对联广告的css代码*/
.duilian{top:260px;position:absolute; width:102px; overflow:hidden; display:none;}
.duilian_left{ left:6px;}
.duilian_right{right:6px;}
.duilian_con{border:#CCC solid 1px; width:100px; height:300px; overflow:hidden;}
.duilian_close{ width:100%; height:24px; line-height:24px; text-align:center; display:block; font-size:13px; color:#555555; text-decoration:none;}

3,部分左右两边飘浮的对联广告代码如下:
 

代码示例:

$(document).ready(function(){
    var duilian = $("div.duilian");
    var duilian_close = $("a.duilian_close");
   
    var screen_w = screen.width;
    if(screen_w>1024){duilian.show();}
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        duilian.stop().animate({top:scrollTop+260});
    });
    duilian_close.click(function(){
        $(this).parent().hide();
        return false;
    });   
});

    
 
 

您可能感兴趣的文章:

  • jquery两边飘浮的对联广告代码
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery特效字体插件 Font effect
  • jQuery特效插件 jSlickmenu
  • jQuery 文字特效 Arctext
  • jquery特效 table鼠标滑过变色的实现代码
  • JQuery特效代码 右下角广告窗体(slideDown slideUp)
  • JQuery特效-跟着鼠标走的Div
  • JQuery特效动画淡入淡出 两个ul标签中li互相移动
  • Jquery特效 评分代码(星级评分)
  • jquery动画特效,jquery动画实例教程
  • jQuery简易图片放大特效示例代码
  • jquery倒计时广告特效代码 可关闭的js倒计时
  • jquery实现鼠标移动时出现特效的代码
  • Jquery实现的角色左右选择特效
  • jquery常用特效方法使用示例
  • 利用jquery动画特效和css打造的侧边弹出垂直导航
  • jQuery实现的Div窗口震动特效
  • jquery星级评分 jquery特效代码
  • JQuery插件iScroll实现下拉刷新,滚动翻页特效
  • 15款优秀的jQuery文本特效插件
  • jquery 左右轮播图特效代码示例
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


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

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3