jQuery html5浮动层特效.rar

  • m7_624290
    了解作者
  • 45.2KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-04-16 22:49
    上传日期
一个jquery html5浮动层特效,当向下拖动网页时,在指定位置显示浮动层,内核基于jquery.bubbleScroll.js,当向下滚动网页时弹出该浮动框,可通过自带的关闭按钮,关闭该弹层。
jqlbotd.rar
  • codesc.net
  • jQuery实现滚动到网站页面底部动画弹出对话框
  • img
  • arrow-down-outline-128.png
    1.6KB
  • codecanyon.jpg
    9.4KB
  • js
  • jquery.min.js
    81.7KB
  • jquery.bubbleScroll.js
    3.1KB
  • jquery.cookie.js
    2.3KB
  • css
  • demo.css
    999B
  • bubbleScroll.css
    697B
  • index.html
    5.1KB
内容介绍
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jQuery拉到底部弹出对话框</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <link type="text/css" rel="stylesheet" media="all" href="http://fonts.googleapis.com/css?family=Abel:400|Oswald:300,400,700"> <link href="css/bubbleScroll.css" rel="stylesheet" type="text/css" /> <!-- DEMO --> <link href='http://fonts.googleapis.com/css?family=Loved+by+the+King' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'> <link href="css/demo.css" rel="stylesheet" type="text/css" /> <!-- DEMO --> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.cookie.js" type="text/javascript"></script> <script src="js/jquery.bubbleScroll.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { var bgColor = "#FFF"; var borderColor = "#000"; var textColor = "#000"; var bubbleStyle = "circle"; var position = "right"; var alwaysVisible = false; var useCookie = false; $(".bubbleScroll").bubbleScroll(); // BubbleScroll Options // -- Always Visible $(".update").click( function(){ if( $(".alwaysVisible").is(':checked') ) { alwaysVisible = true; } else { alwaysVisible = false; } if( $(".useCookie").is(':checked') ) { useCookie = true; } else { useCookie = false; } bgColor = $(".backgroundColor").val(); borderColor = $(".borderColor").val(); textColor = $(".textColor").val(); bubbleStyle = $(".bubbleStyle").val(); position = $(".position").val(); if(useCookie) { if (confirm("You have checked the cookie option. When you will close the bubble and if you refresh the page, you will not see it anymore until you erase your cookies ;-) .")) { $(".bubbleScroll").remove(); $("body").append("<div class='bubbleScroll'><div class='bubbleScroll_inner'><a href='#' class='bubbleScroll_close_button' rel='nofollow' onclick='return false;'>x</a><h2>BubbleScroll</h2><p><img style=\"border-radius:8px\" src=\"img/codecanyon.jpg\" alt=\"codecanyon\" width=\"150\" /><br />Buy this Script on <b>CodeCanyon</b></p></div></div>"); // BubbleScroll $(".bubbleScroll").bubbleScroll({ borderColor: borderColor, backgroundColor: bgColor, textColor: textColor, bubbleStyle: bubbleStyle, position: position, alwaysVisible: alwaysVisible, useCookie: useCookie }); } } else { $(".bubbleScroll").remove(); $("body").append("<div class='bubbleScroll'><div class='bubbleScroll_inner'><a href='#' class='bubbleScroll_close_button' rel='nofollow' onclick='return false;'>x</a><h2>BubbleScroll</h2><p><img style=\"border-radius:8px\" src=\"img/codecanyon.jpg\" alt=\"codecanyon\" width=\"150\" /><br />Buy this Script on <b>CodeCanyon</b></p></div></div>"); // BubbleScroll $(".bubbleScroll").bubbleScroll({ borderColor: borderColor, backgroundColor: bgColor, textColor: textColor, bubbleStyle: bubbleStyle, position: position, alwaysVisible: alwaysVisible, useCookie: useCookie }); } }); // BubbleScroll $(".bubbleScroll").bubbleScroll({ borderColor: borderColor, backgroundColor: bgColor, textColor: textColor, bubbleStyle: bubbleStyle, position: position, alwaysVisible: alwaysVisible, useCookie: useCookie }); }); </script> </head> <body> <div class="title"> <h1>BubbleScroll - v1.0</h1> <div class="script_option"> <h4>Script Option</h4> <label>Always Visible : <input class="alwaysVisible" type="checkbox" /></label> <label>Use Cookie : <input class="useCookie" type="checkbox" /></label> <label>Style : <select class="bubbleStyle"><option class="bubbleStyle" selected="selected" value="circle">Circle</option><option value="square">Square</option></select></label> <label>Position : <select class="position" ><option selected="selected" value="right">Right</option><option value="left">Left</option></select></label> <label>Border Color : <input value="#000" type="text" class="borderColor" /></label> <label>Background Color : <input value="#FFF" type="text" class="backgroundColor" /></label> <label>Text Color : <input value="#000" type="text" class="textColor" /></label> <br /><br /> <input type="button" value="Update!" class="update" /> </div> </div> <hr /> <h3>往下滚动</h3> <p style="text-align:center;"> </p> <div class='bubbleScroll'> <div class='bubbleScroll_inner'> <a href='#' class='bubbleScroll_close_button' rel='nofollow' onclick='return false;'>x</a> <h2>BubbleScroll</h2> <p><a href="http://www.jb51.net/jiaoben/" rel='nofollow' onclick='return false;'></a> <br />Buy this Script on <a style="color:black;font-weight:bold;" href="http://www.jb51.net/jiaoben/" rel='nofollow' onclick='return false;'>CodeCanyon</a></p> </div> </div> </div> </body> </html>
评论
    相关推荐