Wednesday, March 21, 2012
Widget nhạc ẩn hiện khi Click chuột
Theo yêu cầu của một số bạn hôm nay tanchau123 giới thiệu cho các bạn thủ thuật tạo một trình nghe nhạc tự đổng ẩn hiện khi ta click chuột vào. Tiện ích này rất phù hợp với các bạn có tính phá cách, muốn tạo điểm nổi bật cho Blog của mình. Ưu điểm thủ thuật này là khi bạn ẩn trình nghe nhạc vẫn tiếp tục chạy nếu bạn không ấn tạm dừng. Có thể áp dụng với cả nhạc hình và nhạc không hình.
Xem Demo
☼ Bắt đầu thủ thuật
1. Đầu tiên bạn hãy vào tài khoản blogger
2. Vào Thiết kế chọn Phần tử trang - Thêm tiện ích - HTML/Javarscrip và dán code bên dưới vào:
<style type="text/css">
#gb{
position:fixed;
bottom:5px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:74px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8gsh3UXqou_yosYIpYvdkJ4BZagKyqmkz2qUiS9fldDwAMeeg9BKFzZP_ICsoIXmxm-1I9ZNZ8O5-RKwTt1P831BDL_fI2q99s1Mcmdcgcqpk9yZMZTvW7kMyFdweR-spru-pe3ML7MMI/s1600/widget-choi-nhac-an-hien-namkna-ngoctra.gif') no-repeat;
}
.gbcontent{
float:left;
background:none;
padding:3px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 75-w) : moveGB(71-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">
<object width="640" height="410"> <param name="movie" value="http://www.nhaccuatui.com/mv/xem-clip/7M3gJX08MBiU" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <embed src="http://www.nhaccuatui.com/mv/xem-clip/7M3gJX08MBiU" flashvars="target=blank" allowscriptaccess="always" quality="high" wmode="transparent" type="application/x-shockwave-flash" width="640" height="410"></embed></object></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (75-gb.offsetWidth).toString() + "px";
</script>Màu đỏ: là mã nhúng của đoạn nhạcMàu xanh: là ảnh hiện thị khi bạn Click vào.
Chú ý: Nếu muốn widget hiển thị bên trái thì bạn đổi lại thuộc tính của một số dòng sau:
Dòng 1:
float:left;
cursor:pointer;đổi thành:
float:right;
cursor:pointer;Dòng 2:
gb.style.right = x.toString() + "px";đổi thành:
gb.style.left = x.toString() + "px";Dòng 3:
gb.style.right = (75-gb.offsetWidth).toString() + "px";đổi thành:
gb.style.left = (75-gb.offsetWidth).toString() + "px";Ngoài ra, nếu bạn muốn dời "ảnh" vào sát slidebar thay vì để "hở" 1 khoảng nhìn không thẩm mỹ thì làm như sau:
Đổi dòng:
gb.opened ? moveGB(0, 75-w) : moveGB(71-w, 0);thành 1 số nào đó nhỏ hơn 75, ví dụ như:
gb.opened ? moveGB(0, 30-w) : moveGB(71-w, 0);Đổi dòng:
gb.style.right = (75-gb.offsetWidth).toString() + "px";cũng thành 1 số nhỏ hơn 75 nhưng phải giống với số 30 đã chọn ở trên chẳng hạn:
gb.style.right = (30-gb.offsetWidth).toString() + "px";Chúc các bạn thành công!!!
Comments[ 0 ]
Post a Comment