html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>浮动窗</title> </head> <body> <div style="height:3000px;"></div> <script type="text/javascript" src="library.js"></script> <script type="text/javascript" src="public.js"></script> </body> </html>
JS
/*设置聊天窗口路径*/ var swt_url = '/zixun/'; /*侧边浮窗*/ var str = '<div id="swt_animation" style="display:none;">'; str += '<a class="close" onclick="close_swt('+"'swt_animation'"+');">X</a>'; str += '<ul class="swt_disease">'; str += '<li><a target="_blank" href="'+swt_url+'"><img src="images/b1.jpg" width="62" height="138" border="0" alt="" /></a></li>'; str += '<li><a target="_blank" href="'+swt_url+'"><img src="images/b2.jpg" width="62" height="138" border="0" alt="" /></a></li>'; str += '</ul>'; str += '<ul class="swt_disease">'; str += '<li><a target="_blank" href="'+swt_url+'"><img src="images/b3.jpg" width="62" height="138" border="0" alt="" /></a></li>'; str += '<li><a target="_blank" href="'+swt_url+'"><img src="images/b4.jpg" width="62" height="138" border="0" alt="" /></a></li>'; str += '</ul>'; str += '<ul class="swt_disease">'; str += '<li><a target="_blank" href="'+swt_url+'"><img src="images/b5.jpg" width="62" height="138" border="0" alt="" /></a></li>'; str += '<li><a target="_blank" href="'+swt_url+'"><img src="images/b6.jpg" width="62" height="138" border="0" alt="" /></a></li>'; str += '</ul>'; str += '<div class="qq">'; str += '<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1141202288&site=qq&menu=yes"><img src="images/q.gif" width="125" height="55" border="0" alt="" /></a>'; str += '</div>'; str += '<div class="tel"><a href="'+swt_url+'" target="_blank"><img src="images/t.jpg" width="125" height="53" border="0" alt="" /></a></div>'; str += '<div class="ewm"><img src="images/e.jpg" width="125" height="145" border="0" alt="" /></div>'; str += '</div>'; str += '<style type="text/css">'; str += 'body{_background-attachment:fixed; _background-image:url(about:blank);}'; str += '#swt_animation{z-index:9999;position:fixed!important;right:10px;top:190px;_position:absolute;_top:expression((offsetParent.scrollTop)+150); width:128px; height:473px; padding:0 0 0 3px; background:#FFF; margin:0; border:2px solid #e6e6e6; text-align:left;}'; str += '#swt_animation .close{cursor:pointer;position:absolute;top:5px;right:5px;display:block;width:12px;height:12px;text-decoration:none;font-size:12px;text-align:center;line-height:14px;}'; str += '#swt_animation .close{cursor:pointer;position:absolute;top:5px;right:5px;display:block;width:12px;height:12px;text-decoration:none;font-size:12px;text-align:center;line-height:14px;z-index:2;}'; str += '#swt_animation .swt_disease{height:69px; overflow:hidden; margin:2px 0 0 0; padding:0;}'; str += '#swt_animation .swt_disease li{width:63px; height:69px; float:left; position:relative; list-style:none;}'; str += '#swt_animation .swt_disease li img{position:absolute; top:0; left:0;}'; str += '#swt_animation .qq,#swt_animation .tel{padding:2px 0 0 0;}'; str += '</style>'; /*关闭侧边浮窗*/ function close_swt(id){ document.getElementById(id).style.display = "none"; setTimeout(function(){ document.getElementById(id).style.display = "block"; },10000); }; /*浮动侧边浮窗*/ var UAI = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone"); for(var v = 0; v < Agents.length; v++){ if(UAI.indexOf(Agents[v]) > 0){ zx = 'yes'; break; }else{ zx = 'ok'; } } if(zx == 'ok'){ $('.swt_disease li img').live('mouseenter',function(){ $(this).stop().animate({top: '-69px'},"slow"); }).live('mouseleave',function(){ $(this).stop().animate({top:'0px'},"slow"); }); document.writeln(str); setInterval(function(){ var num = Math.ceil(Math.random()*6); $('.swt_disease li img').eq(num).animate({top: '-69px'},"slow"); $('.swt_disease li img').eq(num).animate({top: '0px'},"slow"); },4000); } /*中间浮窗*/ document.writeln('<style type="text/css">'); document.writeln('#midpop{z-index:10000;position:fixed;_position:absolute;left:50%;top:49%;_top:expression(eval(document.documentElement.scrollTop+230));width:419px;height:340px;background: url(images/swtwin.gif) 0 0 no-repeat;right:0px;margin-left:-229px;margin-top:-100px;z-index:100000;}'); document.writeln('.midclose{display:block;border:none;font-size:0;line-height:0;width:27px;height:22px;float:right;cursor:pointer;}'); document.writeln('</style>'); var midpop='<div id="midpop" style="display:none;">'; midpop+='<a onClick="javascript:hidemid();" class="midclose"/></a>'; midpop+='<a href="'+swt_url+'" onclick="LR_HideInvite();openZoosUrl();return false;" style="display:block;height:325px;"></a>' midpop+='</div>'; document.write(midpop); setTimeout("loadmid()",10000); setTimeout("loadright()",0); function loadmid(){ document.getElementById("midpop").style.display="block";setTimeout("hideright()",0);} function hidemid() { document.getElementById("midpop").style.display="none";setTimeout("loadmid()",30000);setTimeout("loadright()",0);} function loadright(){ document.getElementById("swt_animation").style.display="block";} function hideright() { document.getElementById("swt_animation").style.display="none";}
效果图:
相关推荐
NULL 博文链接:https://onestopweb.iteye.com/blog/2346704
NULL 博文链接:https://onestopweb.iteye.com/blog/2294832
jq侧边导航栏,jq侧边挂栏可用作链接内页,增加用户体检,也可用作链接在线客服等在线工具。
jq滑动切换页面。可直接套用。 jq滑动切换页面。可直接套用。 jq滑动切换页面。可直接套用。
jq代码切换图片
jQuery百叶窗切换效果焦点图代码基于jquery-2.1.1.min.js制作,多种百叶窗图片切换效果,支持图片自动轮播,带图片切换按钮。
JQ JS javascript echarts 全国地图与各省市地图切换 地图点击切换 省市区地图切换
JQ触摸左右切换图片,兼容鼠标左右滑动,点击滑动。效果还不错
jQ品牌logo列表选项卡切换是一款软件公司网站选项卡切换品牌logo列表代码。
优雅的实现侧边栏Item页面切换,完全遵循 Material Design 设计思想。示例代码完全免费!!!
基于JQuery的大图横向切换效果源码,很适合用作banner特效,几乎兼容所有浏览器。
今天分享的第一款jQuery插件是jQuery百叶窗焦点图,这款jQuery焦点图的百叶窗效果非常酷...HTML代码非常简单,一个div中列出了3张图片,这3张图片到时候我们可以制作成百叶窗的切换效果。 CSS代码:[......] 阅读全文>>
网页图片动态切换包含jq诸多特效,jq各种特效,卡盘,标签页,旋转木马,走马灯,弹出层等
jquery百叶窗图片切换
史上最简单的JQ图片切换,下载即看到效果,什么都在里面了,自己研究下吧,拓展性很强
无意中在网上看到一个家伙写的垂直方向的百叶窗图片切换效果 看着代码还算可以,就整理下给懒人们参考使用 使用方法: 1、将head中的样式引入到你的样式表中 2、将body中的代码部分拷贝过去即可 ...
NULL 博文链接:https://onestopweb.iteye.com/blog/2306162
NULL 博文链接:https://onestopweb.iteye.com/blog/2285145