JS实现可点击展开与关闭的左侧广告代码
内容摘要
本文实例讲述了JS实现可点击展开与关闭的左侧广告代码。分享给大家供大家参考。具体如下:
这里介绍的是JS实现网页上可点击展开、关闭的左侧广告代码,表现形式类似对联广告,不
这里介绍的是JS实现网页上可点击展开、关闭的左侧广告代码,表现形式类似对联广告,不
文章正文
本文实例讲述了JS实现可点击展开与关闭的左侧广告代码。分享给大家供大家参考。具体如下:
这里介绍的是JS实现网页上可点击展开、关闭的左侧广告代码,表现形式类似对联广告,不过操作方式不一样,点击时候会隐藏在屏幕在左侧,但是不是完全隐藏,仍显示一个图片竖条的广告,而且点击“显示”的时候,它会重新打开广告,这种广告可以提高网页的用户体验。
运行效果截图如下:
在线演示地址如下:
http://demo.phpstudy.net/js/2015/js-click-show-close-style-adv-codes/
具体代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <title>网页上可点击展开、关闭的左侧广告代码</title> </head> <body> <div id= "Bar1190_big" style= "position:absolute;z-index:9;top:10px;left:0px;width:100px;height:300px;" > <div id= "AD1190" style= "width:100px;height:300px;text-align:center;float:none" class = "adSpace" > <a href= "#" target= "_blank" ><img width= "100" height= "300" src= "images/2401.jpg" alt= "" border= "0" ></a> </div> <div style= "height:18px;width:100px;background:#CCCCCC;text-align:right;line-height:18px;" > <a style= "font-size:12px;cursor:pointer;" onClick= "bar1190_hidden()" >关 闭</a> </div> </div> <div id= "Bar1190_small" style= "position:absolute;z-index:9;top:10px;display:none;left:0px;width:20px;height:300px;" > <div id= "AD1190" style= "width:20px;height:300px;text-align:center;float:none" class = "adSpace" > <a href= "#" target= "_blank" ><img width= "25px" height= "300" src= "images/2402.jpg" alt= "" border= "0" ></a> </div> <div style= "height:18px;width:25px;background:#CCCCCC;text-align:right;line-height:18px;" > <a style= "font-size:12px;cursor:pointer;" onClick= "bar1190_show()" >展开</a> </div> </div> <script type= "text/javascript" > function bar1190_show(){ document.getElementById( 'Bar1190_big' ).style.display= '' ; document.getElementById( 'Bar1190_small' ).style.display= 'none' ; } function bar1190_hidden(){ document.getElementById( 'Bar1190_big' ).style.display= 'none' ; document.getElementById( 'Bar1190_small' ).style.display= '' ; } var autohide1190 = setTimeout( "bar1190_hidden()" ,6000); </script> </body> </html> |
希望本文所述对大家的javascript程序设计有所帮助。
代码注释