一款基于CSS3技术的冒泡提示效果，为了演示效果，生成了许多冒泡的提示，实际使用中，可能不需要这么多，结合jQuery和jquery UI共同实现的网页提示特效，挺不错。因CSS不支持IE8及以下低版本，所以请使用IE9、chrome或火狐测试。
<!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=utf-8" /> <title>上谷战国红</title> <style> *{ margin:0; padding:0; } body { background-color:#fefffa; color:#fff; font:14px/1.3 Arial,sans-serif; } header { background-color:#212121; box-shadow: 0 -1px 2px #111111; display:block; height:70px; position:relative; width:100%; z-index:100; } header h2{ font-size: 22px; font-weight: normal; left: 40%; margin-left: -300px; padding: 22px 0; position: absolute; width: 1000px; } header a.stuts,a.stuts:visited{ border: none; color: #FCFCFC; font-size: 14px; left: 50%; line-height: 31px; margin: 23px 0 0 110px; position: absolute; text-decoration: none; top: 0; } header .stuts span { font-size:22px; font-weight:bold; margin-left:5px; } .container { background: url("/imagesforcode/201304/scene.jpg") no-repeat scroll center top transparent; color: #000000; height: 535px; margin: 20px auto; overflow: hidden; position: relative; width: 1030px; } .dialog { background-color: rgba(163, 154, 77, 0.9); color: #FFFFFF; display: none; height: 140px; left: 343px; line-height: 24px; padding: 100px 30px; position: absolute; text-align: center; top: 97px; width: 280px; z-index: 10; -moz-border-radius: 170px; -ms-border-radius: 170px; -o-border-radius: 170px; -webkit-border-radius: 170px; border-radius: 170px; } .dialog .close { background-color: #65683b; cursor: pointer; font-size: 22px; font-weight: bold; height: 36px; line-height: 36px; position: absolute; right: 10px; top: 60px; width: 36px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; -webkit-border-radius: 18px; border-radius: 18px; } .labels p { display: none; } .labels a { background-color: rgba(203, 189, 58, 0.8); color: #FFFFFF; display: none; height: 50px; padding: 30px 0 0; position: absolute !important; text-align: center; text-decoration: none; width: 80px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px; } .labels > a { background-color: rgba(203, 189, 58, 0.8); -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; -webkit-transition: .3s; transition: .3s; } .labels a:hover { background-color: rgba(128, 128, 128, 0.8); } .labels a span { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid rgba(203, 189, 58, 0.8); bottom: -14px; height: 0; left: 30px; position: absolute; width: 0; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; -webkit-transition: .3s; transition: .3s; } .labels a:hover span { border-top: 15px solid rgba(128, 128, 128, 0.8); } #label1 { left: 720px; top: 215px; } #label2 { left: 495px; top: 290px; } #label3 { left: 450px; top: 115px; } #label4 { left: 270px; top: 170px; } #label5 { left: 570px; top: 65px; } #label6 { left: 275px; top: 30px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script> jQuery(function(){ $(‘.labels a#label1‘).fadeIn(100).effect(‘bounce‘, { times:3 }, 300, function() { $(‘.labels a#label2‘).fadeIn(100).effect(‘bounce‘, { times:3 }, 300, function() { $(‘.labels a#label3‘).fadeIn(100).effect(‘bounce‘, { times:3 }, 300, function() { $(‘.labels a#label4‘).fadeIn(100).effect(‘bounce‘, { times:3 }, 300, function() { $(‘.labels a#label5‘).fadeIn(100).effect(‘bounce‘, { times:3 }, 300, function() { $(‘.labels a#label6‘).fadeIn(100).effect(‘bounce‘, { times:3 }, 300); }); }); }); }); }); $(‘.dialog .close‘).click(function() { $(this).parent().fadeOut(500); return false; }); $(‘.labels a‘).click(function() { $(‘.dialog p‘).html( $(this).find(‘p‘).html() ).parent().fadeIn(500); return false; }); $(‘.container‘).click(function() { $(‘.dialog‘).fadeOut(500); }); }); </script> </head> <body> <div class="container"> <div class="labels"> <a id="label1" class="label" href="#">sofa <p>A sofa, is an item of furniture designed to seat more than one person, and providing support for the back and arms.</p> <span /> </a> <a id="label2" class="label" href="#">television <p>Television (TV) is a telecommunication medium for transmitting and receiving moving images that can be monochrome (black-and-white) or colored, with or without accompanying sound.</p> <span /> </a> <a id="label3" class="label" href="#">chest <p>In many video games, especially role-playing video games, treasure chests contain various items, currency, and sometimes monsters.</p> <span /> </a> <a id="label4" class="label" href="#">workplace <p>A virtual workplace is a workplace that is not located in any one physical space.</p> <span /> </a> <a id="label5" class="label" href="#">entrance <p>A door is a movable structure used to open and close off an entrance, typically consisting of a panel that swings on hinges or that slides or rotates inside of a space.</p> <span /> </a> <a id="label6" class="label" href="#">safe room <p>A safe room or panic room is a fortified room which is installed in a private residence or business to provide a safe shelter, or hiding place, for the inhabitants in the event of a break-in, home invasion, tornado, or other threat.</p> <span /> </a> </div> <div class="dialog"> <p></p> <a class="close">X</a> </div> </div> </body> </html>
CSS3结合jQuery制作的冒泡工具图片提示效果,布布扣,bubuko.com
时间： 2024-10-20 01:25:11