JS實(shí)現(xiàn)的另類手風(fēng)琴效果網(wǎng)頁內(nèi)容切換代碼
更新時(shí)間：2015年09月08日 09:46:43 作者：企鵝
這篇文章主要介紹了JS實(shí)現(xiàn)的另類手風(fēng)琴效果網(wǎng)頁內(nèi)容切換代碼,通過JavaScript響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素樣式屬性實(shí)現(xiàn)手風(fēng)琴效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)的另類手風(fēng)琴效果網(wǎng)頁內(nèi)容切換代碼。分享給大家供大家參考。具體如下：
這是一款以海賊王為題材的另類手風(fēng)琴效果，用到三張背景圖片，請順著代碼自已下載吧，多看看類似特效的編寫思路，對于提高你的Js編程水平有不少幫助的。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-sfq-web-cha-style-codes/
具體代碼如下：
<!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 type="text/css">
body{margin:0px;padding:0px;overflow:hidden;background:#151515;}
#box{width:710px;height:350px;padding:2px 0 2px 2px;margin:210px auto;background:#111;}
#box ul{margin:0px;padding:0px;float:left;}
#box li{width:75px;height:350px;float:left;display:inline;margin-right:2px;overflow:hidden;list-style-type:none;position:relative;}
.pos1, .pos2, .pos3, .pos4, .pos5{width:75px;height:350px;float:left;text-decoration:none;}
.pos1 span, .pos2 span, .pos3 span, .pos4 span, .pos5 span{width:75px;height:350px;float:left;top:0px;left:0px;filter:alpha(opacity=10);opacity:0.1;overflow:hidden;position:absolute; text-decoration:none;}
.pos1 span.preview{background:url(images/bw.jpg) no-repeat;}
.pos1 span.img_pre{left:75px;background:url(images/color.jpg) no-repeat;}
.pos2 span.preview{background:url(images/bw.jpg) no-repeat -75px 0;}
.pos2 span.img_pre{left:75px;background:url(images/color.jpg) no-repeat -75px 0;}
.pos3 span.preview{background:url(images/bw.jpg) no-repeat -152px 0;}
.pos3 span.img_pre{left:75px;filter:alpha(opacity=100);opacity:1;background:url(images/color.jpg) no-repeat -152px 0;}
.pos4 span.preview{background:url(images/bw.jpg) no-repeat -228px 0;}
.pos4 span.img_pre{left:75px;background:url(images/color.jpg) no-repeat -228px 0;}
.pos5 span.preview{background:url(images/bw.jpg) no-repeat -303px 0;}
.pos5 span.img_pre{left:75px;background:url(images/color.jpg) no-repeat -303px 0;}
.inner {width:280px;height:310px;float:left;padding:20px;background:#fff;overflow:hidden;border-right:5px solid #f0f0f0; position:absolute;top:0px;left:75px;}
.inner h2{width:280px;height:60px;float:left;color:#555555;font-family:"微軟雅黑";line-height:60px;font-size:18px;text-indent:10px;margin:0px;padding:0px;background:url(images/stripe_light.gif);}
.inner h3{width:280px;height:40px;float:left;color:#fff;font-family:"微軟雅黑";line-height:40px;font-size:14px;text-indent:10px;margin:0px;padding:0px;background:url(images/stripe.gif);}
.inner p{width:260px;height:200px;float:left;color:#000;font-family:"微軟雅黑";line-height:25px;font-size:12px;margin:0px;padding:0px 10px;}
</style>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box');
var aLi = oBox.getElementsByTagName('li');
var aA = oBox.getElementsByTagName('a');
var aPrev = getClass(oBox, 'preview');
var aImg = getClass(oBox, 'img_pre');
var i = 0;
for(i=0;i<aA.length;i++){
aA[i].index = i;
aA[i].onclick = function(){
for(i=0;i<aLi.length;i++){
if(aLi[this.index].style.width != '400px')startMove(aLi[i], {width:75}, 5);
startMove(aPrev[i], {opacity:10}, 5);
startMove(aImg[i], {opacity:0, left:75}, 5);
}
if(aLi[this.index].style.width != '400px'){
startMove(oBox, {width:710}, 5);
startMove(aImg[this.index], {opacity:100, left:0}, 5);
startMove(aLi[this.index], {width:400}, 5);
}else{
startMove(aLi[this.index], {width:75}, 5);
for(i=0;i<aLi.length;i++){
startMove(aPrev[i], {opacity:100}, 5);
}
startMove(oBox, {width:385}, 5);
}
};
}
};
function getClass(oParent, sClass){
var aElem = oParent.getElementsByTagName('*');
var aClass = [];
var i = 0;
for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
return aClass;
}
function startMove(obj, json, iT, fnEnd){
if(obj.timer)clearInterval(obj.timer);
obj.timer = setInterval(function (){
doMove(obj, json, iT, fnEnd);
}, 30);
}
function getStyle(obj, attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
function doMove(obj, json, iT, fnEnd){
var iCur = 0;
var attr = '';
var bStop = true;
for(attr in json){
attr == 'opacity' ? iCur = parseInt(100*parseFloat(getStyle(obj, 'opacity'))) : iCur = parseInt(getStyle(obj, attr));
if(isNaN(iCur))iCur = 0;
var iSpeed = (json[attr]-iCur) / iT;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(parseInt(json[attr])!=iCur)bStop = false;
if(attr=='opacity'){
obj.style.filter = "alpha(opacity:"+(iCur+iSpeed)+")";
obj.style.opacity = (iCur + iSpeed) / 100;
}else{
attr == 'zIndex' ? obj.style[attr] = iCur + iSpeed : obj.style[attr] = iCur + iSpeed +'px';
}
}
if(bStop){
clearInterval(obj.timer);
obj.timer = null;
if(fnEnd)fnEnd();
}
}
</script>
</head>
<body>
<div id="box">
<li>
<a href="javascript:;" class="pos1">
<span class="preview"></span>
<span class="img_pre"></span>
</a>
<div class="inner">
<h2>烏索普</h2>
<h3>草帽海賊團(tuán)【狙擊手】</h3>
<p>懸賞：3000萬（司法島事件）</p>
</div>
</li>
<li>
<a href="javascript:;" class="pos2">
<span class="preview"></span>
<span class="img_pre"></span>
</a>
<div class="inner">
<h2>羅羅諾亞·索隆</h2>
<h3>草帽海賊團(tuán)【劍士】</h3>
<p>懸賞：6千萬（阿拉巴斯坦事件）→1億2000萬（司法島事件）</p>
</div>
</li>
<li style="width:400px;">
<a href="javascript:;" class="pos3">
<span class="preview"></span>
<span class="img_pre" style="left:0px;"></span>
</a>
<div class="inner">
<h2>蒙其·D·路飛</h2>
<h3>草帽海賊團(tuán)【船長】</h3>
<p>惡魔果實(shí)：橡膠果實(shí)<br />懸賞：3千萬（可可亞西村事件）→1億（阿拉巴斯坦事件）→3億（司法島事件)→4億（頂上戰(zhàn)爭后）</p>
</div>
</li>
<li>
<a href="javascript:;" class="pos4">
<span class="preview"></span>
<span class="img_pre"></span>
</a>
<div class="inner">
<h2>娜美</h2>
<h3>草帽海賊團(tuán)【航海士】</h3>
<p>懸賞：1600萬（司法島事件）</p>
</div>
</li>
<li>
<a href="javascript:;" class="pos5">
<span class="preview"></span>
<span class="img_pre"></span>
</a>
<div class="inner">
<h2>香吉士</h2>
<h3>草帽海賊團(tuán)【廚師】</h3>
<p>懸賞：7700萬（司法島事件）</p>
</div>
</li>
</div>
</body>
</html>
希望本文所述對大家的JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
相關(guān)文章
這段時(shí)間接了一個(gè)微信小程序項(xiàng)目,從此打開小程序的新世界大門,下面這篇文章主要給大家介紹了關(guān)于小程序中監(jiān)聽頁面滾動的幾種方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
JavaScript實(shí)現(xiàn)獲取URL中參數(shù)值的4種方法
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)獲取URL中參數(shù)值的4種方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2025-02-02
JS實(shí)現(xiàn)聯(lián)想、自動補(bǔ)齊國家或地區(qū)名稱的功能
這篇文章主要介紹了JS實(shí)現(xiàn)聯(lián)想、自動補(bǔ)齊國家或地區(qū)名稱的功能，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
js常用排序，整理了，常用的數(shù)組互換。2010-12-12
javascript下string.format函數(shù)補(bǔ)充
在上一篇中，自謙懶人的咚鏘留言指出樓豬改寫的format函數(shù)在參數(shù)輸入11個(gè)后不起作用了2010-08-08
這篇文章主要為大家詳細(xì)介紹了javascript隨機(jī)生成26個(gè)大小寫字母，感興趣的朋友可以參考一下2016-02-02
由淺到深了解JavaScript類...2006-09-09
element必填校驗(yàn)輸入空格問題修改正則表達(dá)式、請求攔截器實(shí)現(xiàn)所有輸入框去除首尾空格(推薦)
這篇文章主要介紹了element必填校驗(yàn)輸入空格問題修改正則表達(dá)式、請求攔截器實(shí)現(xiàn)所有輸入框去除首尾空格,本文通過圖文實(shí)例代碼相結(jié)合給大家講解的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-02-02
JavaScript 監(jiān)聽textarea中按鍵事件
不同的瀏覽器中的事件監(jiān)聽機(jī)制是不同的，以onKeyPress事件為例。2009-10-10
詳解用原生JavaScript實(shí)現(xiàn)jQuery的某些簡單功能
本篇文章主要對用原生JavaScript實(shí)現(xiàn)jQuery的某些簡單功能進(jìn)行詳細(xì)全面的講解，具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12