宝哥软件园

jquery实现两边飘浮可关闭的对联广告

编辑:宝哥软件园 来源:互联网 时间:2021-09-21

效果展示:

代码说明:

可关闭的左右两边飘浮的对联广告代码jquery特效,宽屏分辨率大于1024px才显示。因为考虑到窄屏下显示对联广告那真是用户体验超差。

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

射流研究…代码中的var screen_w=屏幕。宽度;if(screen _ w 1024){ dui Lian。show();} 是jquery判断浏览器分辨率的,你可以修改这个可关闭的左右两边飘浮的对联广告代码所需要的浏览器分辨率值,如果不想做判断可以删除这两句,让后把钢性铸铁代码。堆联{ top:260px位置:绝对;宽度宽度:102px飞越:隐藏;display:none}中的display:none删除就不判断浏览器分辨率了。

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

部分超文本标记语言代码如下:

!-下面是对联广告的超文本标记语言代码结构-div='对连对连_左' div='对连_中'对联的内容/div a href=' # ' class=' dui Lian _ close ' X关闭/a/div class=' dui Lian dui Lian _ right ' div class=' dui Lian _ con '对联的内容/div a href=' # ' class=' dui Lian _ close ' X关闭/a/div部分钢性铸铁代码如下:

/*下面是对联广告的钢性铸铁代码*/.堆联{ top:260px位置:绝对;宽度宽度:102px飞越:隐藏;display:none}。duilian _ left { left:6px}。duilian _ right { right:6px}。duilian_con{border:#CCC固体1px宽度宽度:100像素高度:300 px飞越:隐藏;}.dui Lian _ close { width :100%;高度:24px线高:24 px文本对齐:居中;显示:块;font-size :13 px颜色: # 555555文本装饰:无;}部分左右两边飘浮的对联广告代码如下:

脚本类型='text/javascript'$(文档)。ready(function(){ var dui Lian=$(' div。对连’);var dui Lian _ close=$(' a . dui Lian _ close ');var screen_w=屏幕。宽度;if(screen _ w 1024){ dui Lian。show();} $(窗口)。scroll(function(){ var scroll top=$(window)).滚动顶部();duilian.stop().动画({ top : croll top 260 });});对连_关闭。点击(函数(){ $(this)).父项()。hide();返回false });});/script下面一段代码很简单是实现jquery两边飘浮的对联广告代码

本节内容:

两边飘浮的对联广告代码。

例子:

jquery实现的对联广告代码

示例代码如下所示:

!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html;charset=utf-8 '/script src=' http :/jquery/1。4 .2/jquery。量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript '/* * *对联广告,可以两边飘浮* www .JB 51。净值*/$(文件)。ready(function(){ var dui Lian=$(' div。对连’);var dui Lian _ close=$(' a . dui Lian _ close ');var window_w=$(window).宽度();if(window _ w 1000){ dui Lian。show();} $(窗口)。scroll(function(){ var scroll top=$(window)).滚动顶部();duilian.stop().动画({ top : croll top 100 });});对连_关闭。点击(函数(){ $(this)).父项()。hide();返回false });});/scriptstyle/*对联广告的钢性铸铁代码*/.堆联{ top:100px位置:绝对;宽度宽度:102px飞越:隐藏;display:none}。duilian _ left { left:6px}。duilian _ right { right:6px}。duilian _ con { border:red红色固体1px宽度宽度:100像素高度:300 px飞越:隐藏;}.dui Lian _ close { width :100%;高度:24px线高:24 px文本对齐:居中;显示:块;font-size :13 px颜色: # 555555文本装饰:无;}/风格/头像dy!-对联广告的超文本标记语言代码结构-div='对连对连_左' div='对连_中'对联的内容/div a href=' # ' class=' dui Lian _ close ' X关闭/a/div class=' dui Lian dui Lian _ right ' div class=' dui Lian _ con '对联的内容/div a href=' # ' class=' dui Lian _ close ' X关闭/a/divp style=' height :1000 px;'/p/body/html

更多资讯
游戏推荐
更多+