Lang thang trên những trang nước ngoài, mình view source và sàng lọc thì mót được một hiệu ứng hay. Xin cjia sẽ đến các bạn. Tại đây chúng ta sẽ tham khảo 2 kỹ thuật. Một là jquery iframe auto height, hai là click menu dropdown.
<meta charset=utf-8>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.js'></script>
<script>
jQuery(document).ready(function() {
var $wheight = jQuery(window).height();
var $fheight = jQuery(window).width() <= 767 ? $wheight : $wheight - 59;
jQuery('#iframe').height($fheight);
jQuery("#field").click(function(){
jQuery("#dropdown").slideToggle("slow");
jQuery(this).toggleClass("active"); return false;
});
var $thumb = jQuery('a.themeitem');
$thumb.mouseover(function(e) {
jQuery("body").append("<img class='gallery-hover' src='"+jQuery(this).attr("rel")+"' alt='' />");
jQuery("img.gallery-hover").css({display:"none", visibility:"visible"}).fadeIn(350);
}).mousemove(function(e) {
jQuery("img.gallery-hover").css({left:e.pageX+20, top:e.pageY-50});
}).mouseout(function() {
jQuery("img.gallery-hover").remove();
});
});
jQuery(window).resize(function() {
var $wheight = jQuery(window).height();
var $fheight = jQuery(window).width() <= 767 ? $wheight : $wheight - 59;
jQuery('#iframe').height($fheight);
});
</script>
<style>
@media only screen and ( max-width: 767px ) {
#frame { display: none; }
#frame #inside { width: 767px; }
}
</style>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; font-size: 13px; }
/******/
#iframe { margin: 0; padding: 0; float: left; }
#frame { width: 100%; height: 30px; float: left; margin: 0; padding: 0; background:#D4D0C8; }
#switcher { float: right; margin-right: 40px; position: relative; }
#field { width: 255px; background:#E8E8FF; cursor: pointer; color: #424242; font-family: Georgia; font-style: italic; padding: 7px;}
#dropdown { display: none; position: absolute;width: 275px; height: 252px; overflow: hidden; background-color: #e8eff7; -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.3); border: 1px solid #becddf; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;}
#dropdowninside {-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; border-top: 1px solid #fff; border-left: 1px solid #fff; width: 241px; height: 252px; overflow: scroll; }
#dropdowninside ul { list-style: none; display: block; float: left; }
#dropdowninside ul li { list-style: none; display: block; float: left; border-top: 1px solid #f8fafc; }
#dropdowninside ul li a { padding: 9px; /*width: 215px;*/ display: block; float: left; font-family: Georgia; color: #8fa0b3; text-shadow: 1px 1px 0px #fff; font-style: italic; border-bottom: 1px solid #c9d6e7; }
#dropdowninside ul li a:hover { background-color: #dde7f1; color: #798594; }
.gallery-hover { z-index: 40; position: absolute; background: #fff; padding: 8px; -webkit-border-radius: 8px; -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.25); -moz-border-radius: 8px; -moz-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.25); border: none; visibility: hidden; left:-9999px; top:0px;}
body { overflow: hidden; }
#iframe body { overflow: auto; }
</style>
<body>
<div id="frame">
<div id="switcher">
<div id="field">Chọn xem hình ↵ </div>
<div id="dropdown">
<div id="dropdowninside">
<ul>
<li><a class="themeitem" rel="https://lh5.googleusercontent.com/-Ext6sWxNkCs/Ud5u6T59uHI/AAAAAAAAAow/VH4JIOStJEE/s100/Japan_Digital_Landscape__03.jpg" href="https://lh5.googleusercontent.com/-Ext6sWxNkCs/Ud5u6T59uHI/AAAAAAAAAow/VH4JIOStJEE/s0/Japan_Digital_Landscape__03.jpg" target="iframe" > img 01</a></li>
<li><a class="themeitem" rel="https://lh3.googleusercontent.com/-d0HIR9eXwKo/Ud5vuw05OSI/AAAAAAAAApA/0uOJ7o8Og-Q/s100/Japan_Digital_Landscape__04.jpg" href="https://lh3.googleusercontent.com/-d0HIR9eXwKo/Ud5vuw05OSI/AAAAAAAAApA/0uOJ7o8Og-Q/s0/Japan_Digital_Landscape__04.jpg" target="iframe" >img 02</a></li>
<li><a class="themeitem" rel="https://lh3.googleusercontent.com/-ctCo6iR5isE/Ud5vaTX7TiI/AAAAAAAAAo4/op7NoNQaGEY/s100/Japan_Digital_Landscape__05.jpg" href="https://lh3.googleusercontent.com/-ctCo6iR5isE/Ud5vaTX7TiI/AAAAAAAAAo4/op7NoNQaGEY/s0/Japan_Digital_Landscape__05.jpg" target="iframe" >img 03</a></li>
<li><a class="themeitem" rel="https://lh4.googleusercontent.com/-LWusB7oUdCo/Ud5wdK4NlLI/AAAAAAAAApQ/5sewW5zei58/s100/Japan_Digital_Landscape__07.jpg" href="https://lh4.googleusercontent.com/-LWusB7oUdCo/Ud5wdK4NlLI/AAAAAAAAApQ/5sewW5zei58/s0/Japan_Digital_Landscape__07.jpg" target="iframe" >img 04</a></li>
<li><a class="themeitem" rel="https://lh5.googleusercontent.com/-q9MiQIy8TjQ/Ud5wys_UV8I/AAAAAAAAApY/xExg6AYr9IE/s100/Japan_Digital_Landscape__08.jpg" href="https://lh5.googleusercontent.com/-q9MiQIy8TjQ/Ud5wys_UV8I/AAAAAAAAApY/xExg6AYr9IE/s0/Japan_Digital_Landscape__08.jpg" target="iframe" >img 05</a></li>
<li><a class="themeitem" rel="https://lh5.googleusercontent.com/-X5q2CDvY2Wo/Ud5xqHIu-pI/AAAAAAAAApo/VL2Lc4HkudA/s100/Japan_Digital_Landscape__10.jpg" href="https://lh5.googleusercontent.com/-_sdS07m5fbg/Ud5xXmy8dgI/AAAAAAAAApg/-oLjte0BD7Q/s0/Japan_Digital_Landscape__09.jpg" target="iframe" >img 06</a></li>
<li><a class="themeitem" rel="https://lh6.googleusercontent.com/-qjKgiAB5GpA/Ud5x1fpWtmI/AAAAAAAAApw/OqmVevGIFWs/s100/Japan_Digital_Landscape__11.jpg" href="https://lh6.googleusercontent.com/-qjKgiAB5GpA/Ud5x1fpWtmI/AAAAAAAAApw/OqmVevGIFWs/s0/Japan_Digital_Landscape__11.jpg" target="iframe" >img 07</a></li>
<li><a class="themeitem" rel="https://lh5.googleusercontent.com/-0prMuRylUrg/Ud5zIIN60XI/AAAAAAAAAqQ/CWUDfbYQo0I/s100/Japan_Digital_Landscape__15.jpg" href="https://lh5.googleusercontent.com/-0prMuRylUrg/Ud5zIIN60XI/AAAAAAAAAqQ/CWUDfbYQo0I/s0/Japan_Digital_Landscape__15.jpg" target="iframe" >img 08</a></li>
</ul>
</div>
</div>
</div>
</div>
<iframe id="iframe" name="iframe" src="http://lh5.googleusercontent.com/-Ext6sWxNkCs/Ud5u6T59uHI/AAAAAAAAAow/VH4JIOStJEE/s0/Japan_Digital_Landscape__02.jpg" width="100%" scrolling="auto" frameborder="0" style="visbility:hidden"></iframe>
</body>
...
No comments:
Post a Comment