圖片翻轉(zhuǎn)效果具體實現(xiàn)代碼
更新時間：2014年01月09日 17:02:51 作者：
想必大家對圖片翻轉(zhuǎn)效果都有所了解吧，其實很容易實現(xiàn)的，下面有個不錯的示例，喜歡的朋友可以參考下
以下為程序代碼：
<!DOCTYPE html />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>圖片翻轉(zhuǎn)效果</title>
<style type="text/css">
.box {overflow:hidden;position:relative;}
.txt {width:100%;height:100%;background:#f51146;font-size:12px;position:absolute;top:-100%;color:white;
text-align:center;filter:alpha(Opacity=80);-moz-opacity:0.8;opacity:0.8;}
#b1 {background:url(http://biyuan.tk/u/upload/201310221457326875.jpg);width:232px;height:232px;}
#b2 {background:url(http://biyuan.tk/u/upload/201310221457486875.jpg);width:110px;height:110px;}
#b3 {background:url(http://biyuan.tk/u/upload/201310221458149843.jpg);width:110px;height:110px;}
</style>
</head>
<body>
<div id="obj">
<div class="box" id="b1"><div class="txt">文字說明<br />文字說明</br />文字</div></div>
<div class="box" id="b2"><div class="txt">文字說明<br />文字說明</br />文字</div></div>
<div class="box" id="b3"><div class="txt">文字說明<br />文字說明</br />文字</div></div>
</div>
<script type="text/javascript">
function Show(o, s, v){
clearInterval(Show.prototype["a" + v]);
Show.prototype["a" + v] = setInterval(function(){
if(s == -1) {
if(o.offsetTop <= -o.parentNode.offsetHeight) {
o.style.top = -o.parentNode.offsetHeight + "px";
return clearInterval(Show.prototype["a" + v]);
}
} else {
if(o.offsetTop >= -10) {
o.style.top = 0;
return clearInterval(Show.prototype["a" + v]);
}
}
o.style.top = (o.offsetTop * 1 + 10 * s) + "px";
}, 10);
}
var igs = document.getElementById('obj').getElementsByTagName("div");
for(var i = 0; i < igs.length; i ++) {
if(igs[i].className == "box") {
(function(x){
igs[x].onmouseover = function(){
Show(this.childNodes[0], 1, x);
this.onmouseout = function() {
Show(this.childNodes[0], -1, x);
}
}
})(i);
}
}
</script>
</body>
</html>
效果預(yù)覽：http://biyuan.tk/u/upload/201310221500310000.html
復(fù)制代碼 代碼如下:
<!DOCTYPE html />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>圖片翻轉(zhuǎn)效果</title>
<style type="text/css">
.box {overflow:hidden;position:relative;}
.txt {width:100%;height:100%;background:#f51146;font-size:12px;position:absolute;top:-100%;color:white;
text-align:center;filter:alpha(Opacity=80);-moz-opacity:0.8;opacity:0.8;}
#b1 {background:url(http://biyuan.tk/u/upload/201310221457326875.jpg);width:232px;height:232px;}
#b2 {background:url(http://biyuan.tk/u/upload/201310221457486875.jpg);width:110px;height:110px;}
#b3 {background:url(http://biyuan.tk/u/upload/201310221458149843.jpg);width:110px;height:110px;}
</style>
</head>
<body>
<div id="obj">
<div class="box" id="b1"><div class="txt">文字說明<br />文字說明</br />文字</div></div>
<div class="box" id="b2"><div class="txt">文字說明<br />文字說明</br />文字</div></div>
<div class="box" id="b3"><div class="txt">文字說明<br />文字說明</br />文字</div></div>
</div>
<script type="text/javascript">
function Show(o, s, v){
clearInterval(Show.prototype["a" + v]);
Show.prototype["a" + v] = setInterval(function(){
if(s == -1) {
if(o.offsetTop <= -o.parentNode.offsetHeight) {
o.style.top = -o.parentNode.offsetHeight + "px";
return clearInterval(Show.prototype["a" + v]);
}
} else {
if(o.offsetTop >= -10) {
o.style.top = 0;
return clearInterval(Show.prototype["a" + v]);
}
}
o.style.top = (o.offsetTop * 1 + 10 * s) + "px";
}, 10);
}
var igs = document.getElementById('obj').getElementsByTagName("div");
for(var i = 0; i < igs.length; i ++) {
if(igs[i].className == "box") {
(function(x){
igs[x].onmouseover = function(){
Show(this.childNodes[0], 1, x);
this.onmouseout = function() {
Show(this.childNodes[0], -1, x);
}
}
})(i);
}
}
</script>
</body>
</html>
效果預(yù)覽：http://biyuan.tk/u/upload/201310221500310000.html
相關(guān)文章
使用frame頁面嵌套，重啟了服務(wù)器的時候會出現(xiàn)登錄頁面在frame頁面中出現(xiàn)，解決方法是在登錄頁面里面用js判斷下當(dāng)前的地址信息2014-07-07
JavaScript仿淘寶頁面圖片滾動加載及刷新回頂部的方法解析
這篇文章主要介紹了JavaScript仿淘寶頁面圖片滾動加載及刷新回頂部的方法解析,包括懶加載和onbeforeunload等要點的理解,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了僅30行代碼實現(xiàn)Javascript中的MVC的方法，MVC的基礎(chǔ)是觀察者模式，這是實現(xiàn)model和view同步的關(guān)鍵，想要深入了解的朋友可以參考本文2016-02-02
每個頁面按照結(jié)構(gòu)可以分成三部分:window?page?tabbar.其中window和tabbar一般比較固定，page是平常業(yè)務(wù)開展的主要載體，根據(jù)業(yè)務(wù)需求進(jìn)行頁面配置。下面主要講一下window和tabbar，感興趣的朋友跟隨小編一起看看吧2022-11-11
RequireJS 可以幫助用戶異步按需的加載 JavaScript 代碼，并解決 JavaScript 模塊間的依賴關(guān)系，提升了前端代碼的整體質(zhì)量和性能2017-04-04
本篇文章主要介紹了js實現(xiàn)移動端編輯添加地址[模仿京東]的實例。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
stream.js 一個很小、完全獨立的Javascript類庫
stream.js 是一個很小、完全獨立的Javascript類庫，它為你提供了一個新的Javascript數(shù)據(jù)結(jié)構(gòu)：streams2011-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡單的select下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
不管瀏覽器更新的多快，號稱多么支持標(biāo)準(zhǔn)。廠商不同，他們之間還是有很多差異。我們需要區(qū)分出這些差異，針對不同的瀏覽器做不同的處理。2015-10-10
這篇文章主要介紹了微信WeixinJSBridge API使用實例,本文直接給出HTML代碼,代碼中包含了很多實用功能,如圖片預(yù)覽、分享到微博、隱藏右上角按鈕、獲取網(wǎng)絡(luò)狀態(tài)、發(fā)起公眾號微信支付等內(nèi)容,需要的朋友可以參考下2015-05-05