您的位置：首页 > Web前端 > JavaScript

第15课时 360度全景图、QQ幻灯片、倒计时、放大镜效果、苹果官网产品展示

2017-03-03 07:15 555 查看

360度全景图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>360度全景图片</title>
<style>
body {margin:0;}
img {width:640px; height:378px; position:absolute; left:50%; top:50%; margin-top:-189px; margin-left:-320px;}
#bg {width:100%; height:100%; position:absolute; left:0; top:0; filter:alpha(opacity:60); opacity:0.6; background:black; z-index:1;}

#prog {width:324px; height:40px; background:url(img/bar.png) no-repeat 0 bottom; position:absolute; z-index:2; top:50%; left:50%; margin:-20px 0 0 -162px; font-family:arial; font-size:12px; color:#fff; text-align:center;}
#prog span {font-family:"宋体";}
#bar {width:0%; height:16px; background:url(img/bar_line.gif) repeat-x; overflow:hidden; position:absolute; bottom:2px; left:2px;}
</style>
<script type="text/javascript" src="js/miaov.js" ></script>
</head>
<body>
<img id="img1" src="img/miaov (0).jpg" />
<script type="text/javascript">
window.onload=function()
{
var x=0;
var oImg=document.getElementById('img1');
var aImg=document.getElementsByTagName('img');
var oLastImg=oImg;
var lastX=0;
var iSpeed=0;
var timer=null;
var i=0;

for(i=1;i<77;i++)
{
(function (oNewImg){
var oImg=new Image();

oImg.onload=function ()
{
oNewImg.src=this.src;
};
oImg.src='img/miaov ('+i+').jpg';

oNewImg.style.display='none';

document.body.appendChild(oNewImg);
})(document.createElement('img'));
}

document.onmousedown=function (ev)
{
var oEvent=ev||event;
var disX=oEvent.clientX-x;

clearInterval(timer);

document.onmousemove=function (ev)
{
var oEvent=ev||event;

x=oEvent.clientX-disX;

move();

iSpeed=x-lastX;
lastX=x;

//oImg.src='img/miaov ('+l+').jpg';

return false;
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;

document.title=iSpeed;

timer=setInterval(function (){
x+=iSpeed;

move();
}, 30);
};

function move()
{
if(iSpeed>0)
{
iSpeed--;
}
else
{
iSpeed++;
}

if(iSpeed==0)
{
clearInterval(timer);
}

var l=parseInt(-x/10);

if(l>0)
{
l=l%77;
}
else
{
l=l+-Math.floor(l/77)*77;
}

document.title=iSpeed;

if(oLastImg!=aImg[l])
{
oLastImg.style.display='none';
aImg[l].style.display='block';
oLastImg=aImg[l];
}
}
return false;
};
};
</script>
</body>
</html>
window.onload=function ()
{
var SCALE=10;
var oImg=document.getElementById('img1');
var oTxt=document.getElementById('prog').getElementsByTagName('span')[0];
var oBar=document.getElementById('bar');
var aImg=[];
var iImgCount=77;
var iLoaded=0;
var iNow=0;
var i=0;
//加载所有资源
for(i=0;i<iImgCount;i++)
{
(function (i){
var oNewImg=new Image();
oNewImg.onload=function ()
{
oTxt.innerHTML=oBar.style.width=Math.ceil(100*iLoaded/iImgCount)+'%';
oNewImg.onload=null;

var oImg=document.createElement('img');
oImg.src=this.src;
oImg.style.display='none';
document.body.appendChild(oImg);
aImg[i]=oImg;

if(++iLoaded==iImgCount)onLoad();
};
oNewImg.src='img/miaov ('+i+').jpg';
})(i);
}

//效果
function onLoad()
{
for(i=0;i<iImgCount;i++)if(!aImg[i])alert('资源加载失败，请刷新重试');
var lastImg=null;
document.getElementById('prog').style.display=document.getElementById('bg').style.display='none';
document.body.removeChild(oImg);
var body=document.body;
oImg=null;
var timer=null;
var num=iNow;
var speed=0;

aImg[0].style.display='block';
lastImg=aImg[0];

document.onmousedown=function (ev)
{
var oEvent=ev||event;
var startX=oEvent.clientX;
var lastX=startX;

if(body.setCapture)
{
body.onmousemove=onMove;
body.onmouseup=onUp;

body.setCapture();
}
else
{
document.onmousemove=onMove;
document.onmouseup=onUp;
}

function onMove(ev)
{
var oEvent=ev||event;
var i=-(oEvent.clientX-startX)/SCALE;

num=(iNow+i+Math.abs(Math.floor(i/iImgCount))*iImgCount)%iImgCount;

if(lastImg!=aImg[parseInt(num)])
{
lastImg.style.display='none';
aImg[parseInt(num)].style.display='block';
lastImg=aImg[parseInt(num)];
}

speed=-(oEvent.clientX-lastX)/SCALE;
lastX=oEvent.clientX;

return false;
}

function onUp()
{
this.onmousemove=null;
this.onmouseup=null;

if(body.releaseCapture)body.releaseCapture();

iNow=num;

startMove();
}

stopMove();

return false;
};

function startMove()
{
timer=setInterval(function (){
iNow=(iNow+speed+Math.abs(Math.floor(i/iImgCount))*iImgCount)%iImgCount;
lastImg.style.display='none';
aImg[parseInt(iNow)].style.display='block';
lastImg=aImg[parseInt(iNow)];

speed*=0.9;

if(Math.abs(speed)<=1)
{
clearInterval(timer);
speed=0;
}
}, 30);
}

function stopMove()
{
clearInterval(timer);
}
}
};

Js综合实例2 QQ幻灯片

Miaov.css
body,ul,h2{margin:0;padding:0; font:12px/20px Tahoma,"hiragino sans gb",Helvetica,Arial;}
img{border:none;}
li{list-style:none;}
body{background:#101010;}
#box{width:660px;height:330px;position:relative;overflow:hidden;margin:60px auto 0;}
#pic_list{position:relative;z-index:1;}
#pic_list li{position:absolute;left:0;top:0;opacity:0;fliter:alpha(opacity=0);z-index:1;}
.mark{height:90px;width:660px;background:#000;position:absolute;left:0;bottom:0;opacity:0.3;filter:alpha(opacity=30);}
#text_list{position:absolute;bottom:60px;left:50px;position:absolute;z-index:5;height:20px;overflow:hidden;}
#text_list h2{display:none;}
#text_list .show{display:block;}
#text_list a{color: #FFFFFF;font-family: "Microsoft YaHei";font-size: 18px;font-weight: normal;text-decoration:none;}
#ico_list{position:absolute;bottom:10px;left:12px;width:525px;overflow:hidden;height:46px;z-index:3;}
#ico_list ul{width:1050px;position:absolute;left:0;top:0;}
#ico_list li{width:75px;float:left;}
#ico_list li a{width:68px;padding-top:6px;display:block;}
#ico_list li a img{border: 2px solid #DFE8E4; height:36px;width:64px;background:#040303;opacity:0.7;filter:alpha(opacity=70);}
#ico_list .active{background:url(../img/a_hover.gif) no-repeat center 0;}
#ico_list .active img{opacity:1;filter:alpha(opacity=100);border: 3px solid #fff; height:34px;width:62px;}
.btn{background:url(../img/btn.gif) no-repeat;height:38px;width:38px;position: absolute;bottom:11px; opacity:0.5;filter:alpha(opacity=50);cursor:default;z-index:3;}
.showBtn{ opacity:1;filter:alpha(opacity=100);cursor:pointer;z-index:4;}
#btn_prev{right:56px;}
#btn_next{right:20px;background-position:right 0;}
Miaov.js
function css(obj, attr, value)
{
if(arguments.length==2)
{
if(attr!='opacity')
{
return parseInt(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]);
}
else
{
return Math.round(100*parseFloat(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]));
}
}
else if(arguments.length==3)
switch(attr)
{
case 'width':
case 'height':
case 'paddingLeft':
case 'paddingTop':
case 'paddingRight':
case 'paddingBottom':
value=Math.max(value,0);
case 'left':
case 'top':
case 'marginLeft':
case 'marginTop':
case 'marginRight':
case 'marginBottom':
obj.style[attr]=value+'px';
break;
case 'opacity':
obj.style.filter="alpha(opacity:"+value+")";
obj.style.opacity=value/100;
break;
default:
obj.style[attr]=value;
}

return function (attr_in, value_in){css(obj, attr_in, value_in)};
}

var MIAOV_MOVE_TYPE={
BUFFER: 1,
FLEX: 2
};

function miaovStopMove(obj)
{
clearInterval(obj.timer);
}

function miaovStartMove(obj, oTarget, iType, fnCallBack, fnDuring)
{
var fnMove=null;
if(obj.timer)
{
clearInterval(obj.timer);
}

switch(iType)
{
case MIAOV_MOVE_TYPE.BUFFER:
fnMove=miaovDoMoveBuffer;
break;
case MIAOV_MOVE_TYPE.FLEX:
fnMove=miaovDoMoveFlex;
break;
}

obj.timer=setInterval(function (){
fnMove(obj, oTarget, fnCallBack, fnDuring);
}, 30);
}

function miaovDoMoveBuffer(obj, oTarget, fnCallBack, fnDuring)
{
var bStop=true;
var attr='';
var speed=0;
var cur=0;

for(attr in oTarget)
{
cur=css(obj, attr);
if(oTarget[attr]!=cur)
{
bStop=false;

speed=(oTarget[attr]-cur)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);

css(obj, attr, cur+speed);
}
}

if(fnDuring)fnDuring.call(obj);

if(bStop)
{
clearInterval(obj.timer);
obj.timer=null;

if(fnCallBack)fnCallBack.call(obj);
}
}

function miaovDoMoveFlex(obj, oTarget, fnCallBack, fnDuring)
{
var bStop=true;
var attr='';
var speed=0;
var cur=0;

for(attr in oTarget)
{
if(!obj.oSpeed)obj.oSpeed={};
if(!obj.oSpeed[attr])obj.oSpeed[attr]=0;
cur=css(obj, attr);
if(Math.abs(oTarget[attr]-cur)>=1 || Math.abs(obj.oSpeed[attr])>=1)
{
bStop=false;

obj.oSpeed[attr]+=(oTarget[attr]-cur)/5;
obj.oSpeed[attr]*=0.7;

css(obj, attr, cur+obj.oSpeed[attr]);
}
}

if(fnDuring)fnDuring.call(obj);

if(bStop)
{
clearInterval(obj.timer);
obj.timer=null;

if(fnCallBack)fnCallBack.call(obj);
}
}
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>妙味课堂--js视频解答</title>
<link href="css/miaov.css" rel="stylesheet" />
<script src="js/miaov.js"></script>
<script>
window.onload = function() {
var oDiv = document.getElementById('box');
var aPicLi = document.getElementById('pic_list').getElementsByTagName('li');
var aTxtLi = document.getElementById('text_list').getElementsByTagName('li');
var oIcoUl = document.getElementById('ico_list').getElementsByTagName('ul')[0];
var aIcoLi = document.getElementById('ico_list').getElementsByTagName('li');
var oBtnPrev = document.getElementById('btn_prev');
var oBtnNext = document.getElementById('btn_next');
var iNowUlLeft = 0;
var iNow = 0;
var i = 0;

oBtnPrev.onclick = function() {
if(iNowUlLeft > 0) {
iNowUlLeft--;

fixUlLeft();
}
};

function fixUlLeft() {
oBtnPrev.className = iNowUlLeft == 0 ? 'btn' : 'btn showBtn';
oBtnNext.className = iNowUlLeft == (aIcoLi.length - 7) ? 'btn' : 'btn showBtn';
miaovStartMove(oIcoUl, {
left: -aIcoLi[0].offsetWidth * iNowUlLeft
}, MIAOV_MOVE_TYPE.BUFFER);
}

oBtnNext.onclick = function() {
if(iNowUlLeft < aIcoLi.length - 7) {
iNowUlLeft++;

fixUlLeft();
}
};

for(i = 0; i < aIcoLi.length; i++) {
aIcoLi[i].index = i;
aIcoLi[i].onclick = function() {
if(iNow == this.index) {
return;
}

iNow = this.index;

tab();
};
}

function tab() {
for(i = 0; i < aIcoLi.length; i++) {
aIcoLi[i].className = '';
aTxtLi[i].getElementsByTagName('h2')[0].className = '';
aPicLi[i].style.filter = 'alpha(opacity:0)';
aPicLi[i].style.opacity = 0;
miaovStopMove(aPicLi[i]);
}
aIcoLi[iNow].className = 'active';
aTxtLi[iNow].getElementsByTagName('h2')[0].className = 'show';
miaovStartMove(aPicLi[iNow], {
opacity: 100
}, MIAOV_MOVE_TYPE.BUFFER);
}

function autoPlay() {
iNow++;

if(iNow >= aIcoLi.length) {
iNow = 0;
}

if(iNow < iNowUlLeft) {
iNowUlLeft = iNow;
} else if(iNow >= iNowUlLeft + 7) {
iNowUlLeft = iNow - 6;
}

fixUlLeft();
tab();
}

var timer = setInterval(autoPlay, 3000);

oDiv.onmouseover = function() {
clearInterval(timer);
};

oDiv.onmouseout = function() {
timer = setInterval(autoPlay, 3000);
};
};
</script>
</head>

<body>
<div id="box">
<ul id="pic_list">
<li style="z-index:2;opacity:1;fliter:alpha(opacity=100);">
<a href="http://www.miaov.com"><img src="img/pic_1.jpg" alert="妙味课堂_js精品课程" /></a>
</li>
<li>
<a href="http://www.miaov.com"><img src="img/pic_2.jpg" alert="妙味课堂_js精品课程" /></a>
</li>
<li>
<a href="http://www.miaov.com"><img src="img/pic_3.jpg" alert="妙味课堂_js精品课程" /></a>
</li>
<li>
<a href="http://www.miaov.com"><img src="img/pic_4.jpg" alert="妙味课堂_js精品课程" /></a>
</li>
<li>
<a href="http://www.miaov.com"><img src="img/pic_5.jpg" alert="妙味课堂_js精品课程" /></a>
</li>
<li>
<a href="http://www.miaov.com"><img src="img/pic_6.jpg" alert="妙味课堂_js精品课程" /></a>
</li>
<li>
<a href="http://www.miaov.com"><img src="img/pic_7.jpg" alert="妙味课堂_js精品课程" /></a>
</li>
<li>
<a href="http://www.miaov.com"><img src="img/pic_8.jpg" alert="妙味课堂_js精品课程" /></a>
</li>
<li>
<a href="http://www.miaov.com"><img src="img/pic_9.jpg" alert="妙味课堂_js精品课程" /></a>
</li>
<li>
<a href="http://www.miaov.com"><img src="img/pic_10.jpg" alert="妙味课堂_js精品课程" /></a>
</li>
<li>
<a href="http://www.miaov.com"><img src="img/pic_11.jpg" alert="妙味课堂_js精品课程" /></a>
</li>
<li>
<a href="http://www.miaov.com"><img src="img/pic_12.jpg" alert="妙味课堂_js精品课程" /></a>
</li>
<li>
<a href="http://www.miaov.com"><img src="img/pic_13.jpg" alert="妙味课堂_js精品课程" /></a>
</li>
<li>
<a href="http://www.miaov.com"><img src="img/pic_14.jpg" alert="妙味课堂_js精品课程" /></a>
</li>
</ul>
<div class="mark"></div>

<ul id="text_list">
<li>
<h2 class="show"><a href="#">《武则天秘史》[至22集]姐姐与皇上偷情，媚娘抓奸在床...</a></h2></li>
<li>
<h2><a href="#">《无底洞》金钱、美女、权利、复仇等欲望让人不可自拔...</a></h2></li>
<li>
<h2><a href="#">《巴黎宝贝》邓超巴黎当奶爸，上演基情、卖萌、跨国恋..</a></h2></li>
<li>
<h2><a href="#">《我的女儿是花儿》[至3集]“富二代”冰王子恋上贫家女..</a></h2></li>
<li>
<h2><a href="#">《法证先锋3》[至26集]写字楼惊现“女僵尸”尸体！</a></h2></li>
<li>
<h2><a href="#">《非常了得》孟非郭德纲大曝台下私生活，内地Hold姐来挑战</a></h2></li>
<li>
<h2><a href="#">第二届九分钟电影11月20日独家首映 视觉盛宴恭迎各位看官</a></h2></li>
<li>
<h2><a href="#">《快女微电影》 洪辰脸伤痊愈 快女微电影收官作复拍</a></h2></li>
<li>
<h2><a href="#">《称心如意》京城第一“育婴男”Hold住全场 萝莉热舞走光</a></h2></li>
<li>
<h2><a href="#">《男人帮》[全30集]悲喜双响炮，一个完美结局</a></h2></li>
<li>
<h2><a href="#">《辛亥革命》成龙、赵文瑄、李冰冰、胡歌演绎革命腥风血雨</a></h2></li>
<li>
<h2><a href="#">《李献计历险记》房祖名患差时症为寻女友开启超时空冒险</a></h2></li>
<li>
<h2><a href="#">Justin bieber女友动感热单全球首发。</a></h2></li>
<li>
<h2><a href="#">第八届中国（重庆）国际园林博览会</a></h2></li>
</ul>
<div id="ico_list">
<ul>
<li class="active">
<a href="#"><img src="img/ico_1.jpg" alt="妙味课堂富有人性化的IT培训" /></a>
</li>
<li>
<a href="#"><img src="img/ico_2.jpg" alt="妙味课堂富有人性化的IT培训" /></a>
</li>
<li>
<a href="#"><img src="img/ico_3.jpg" alt="妙味课堂富有人性化的IT培训" /></a>
</li>
<li>
<a href="#"><img src="img/ico_4.jpg" alt="妙味课堂富有人性化的IT培训" /></a>
</li>
<li>
<a href="#"><img src="img/ico_5.jpg" alt="妙味课堂富有人性化的IT培训" /></a>
</li>
<li>
<a href="#"><img src="img/ico_6.jpg" alt="妙味课堂富有人性化的IT培训" /></a>
</li>
<li>
<a href="#"><img src="img/ico_7.jpg" alt="妙味课堂富有人性化的IT培训" /></a>
</li>
<li>
<a href="#"><img src="img/ico_8.jpg" alt="妙味课堂富有人性化的IT培训" /></a>
</li>
<li>
<a href="#"><img src="img/ico_9.jpg" alt="妙味课堂富有人性化的IT培训" /></a>
</li>
<li>
<a href="#"><img src="img/ico_10.jpg" alt="妙味课堂富有人性化的IT培训" /></a>
</li>
<li>
<a href="#"><img src="img/ico_11.jpg" alt="妙味课堂富有人性化的IT培训" /></a>
</li>
<li>
<a href="#"><img src="img/ico_12.jpg" alt="妙味课堂富有人性化的IT培训" /></a>
</li>
<li>
<a href="#"><img src="img/ico_13.jpg" alt="妙味课堂富有人性化的IT培训" /></a>
</li>
<li>
<a href="#"><img src="img/ico_14.jpg" alt="妙味课堂富有人性化的IT培训" /></a>
</li>
</ul>
</div>
<a href="#" id="btn_prev" class="btn"></a>
<a href="#" id="btn_next" class="btn showBtn"></a>
</div>
</body>

</html>

Js综合案例 JavaScript基础——变量
变量的定义

声明

声明只是告诉系统，什么也不做 var a

声明同时赋值

最常用的一种方式，好的编程习惯

同时声明多个变量

可以同时声明多个变量，但是不好

变量名组成

中文也可以，不能用关键字

变量的作用域

什么是作用域

起作用的范围

全局变量——全部函数

var a; //全局变量——在所有函数中都能用

function aaa()

{
a=12;

}

function bbb()

{
alert(a);

}

局部变量——当前函数

闭包

不声明而直接使用局部变量会怎么样

function aaa()
{
var a=12; //局部变量——只能在当前函数有用
}

变量类型

 变量类型

• 弱语言也有类型

 typeof

• 查看变量的类型

• 常见类型

– number、string、boolean、object、undefined、function

var a=12;
//alert(typeof a); //number

a='abc';
//alert(typeof a); //string

a=true;
//alert(typeof a); //boolean——布尔

a=function ()
{
alert('a');
};
//alert(typeof a); //function

a=document;
//alert(typeof a); //object

var b;
alert(typeof b); //undefined（没有定义）

//undefined
//1.真的没定义
//2.定义了，但是没有放东西进去

•	VQuery选择器
function $(vArg)
{
if(typeof vArg=='function')
{
window.onload=vArg;
}
else if(typeof vArg=='string')
{
return document.getElementById(vArg);
}
else if(typeof vArg=='object')
{
return vArg;
}
}

$(function (){
$('div1').onclick=function (){
$(this).style.background='red';
};
});

/*$(function (){
$('#div1').click(function (){
$(this).css('background', 'red');
});
});*/

变量类型转换
	为什么要转换
•	超简易计算器
	转换为数字
•	parseInt、parseFloat
–	NaN和isNaN
•	Number
–	严格转换
var str='abc';

//isNaN();

alert(isNaN(parseInt(str)));

//NaN——Not a Number(不是数字)
	隐式类型转换
•	==和减法
•	隐式类型转换的问题
var a='12';
var b=12;
//alert(a==b);	//==可以先把两边的东西，转成一样的类型，然后再比较
alert(a===b);	//懒，不做转换，直接比较
变量使用习惯
	只存储一种类型的值
	匈牙利命名法
•	首字母大写
•	类型前缀
–	常见前缀

Js综合实例 倒计时案例
<!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>倒计时 - 妙味课堂 - www.miaov.com</title>
<!--[if lte IE 6]>
<script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
<script type="text/javascript">
DD_belatedPNG.fix('a');
</script>
<![endif]-->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript">
window.onload=function ()
{
var oFill=document.getElementById('fill_in');
var oInputYear=oFill.getElementsByTagName('input')[0];
var oInputMonth=oFill.getElementsByTagName('input')[1];
var oInputDay=oFill.getElementsByTagName('input')[2];

var oBtn=document.getElementById('go');
var oBtn2=document.getElementById('go2');

var oTxtDay=document.getElementById('day');
var oTxtHour=document.getElementById('hour');
var oTxtMin=document.getElementById('min');
var oTxtSec=document.getElementById('sec');
var oTxtTarget=document.getElementById('target').getElementsByTagName('strong')[0];

var timer=null;

oBtn2.onclick=function ()
{
timer=setInterval(updateTime, 1000);
updateTime();
oTxtTarget.innerHTML=oInputYear.value+"年"+oInputMonth.value+"月"+oInputDay.value+"日";
};

function fillZero(num, digit)
{
var str=''+num;

while(str.length<digit)
{
str='0'+str;
}

return str;
}

function updateTime()
{
var oDateEnd=new Date();
var oDateNow=new Date();

var iRemain=0;

var iDay=0;
var iHour=0;
var iMin=0;
var iSec=0;

oDateEnd.setFullYear(parseInt(oInputYear.value));
oDateEnd.setMonth(parseInt(oInputMonth.value)-1);
oDateEnd.setDate(parseInt(oInputDay.value));
oDateEnd.setHours(0);
oDateEnd.setMinutes(0);
oDateEnd.setSeconds(0);

iRemain=(oDateEnd.getTime()-oDateNow.getTime())/1000;

if(iRemain<=0)
{
clearInterval(timer);
iRemain=0;
alert('已过时间');
}

iDay=parseInt(iRemain/86400);
iRemain%=86400;

iHour=parseInt(iRemain/3600);
iRemain%=3600;

iMin=parseInt(iRemain/60);
iRemain%=60;

iSec=iRemain;

oTxtDay.innerHTML=fillZero(iDay,3);
oTxtHour.innerHTML=fillZero(iHour,2);
oTxtMin.innerHTML=fillZero(iMin,2);
oTxtSec.innerHTML=fillZero(iSec,2);
}

var t=null;
var alpha=0;
var bShow=true;
setInterval(function (){
if(bShow)
{
startMove(100);
}
else
{
startMove(0);
}

bShow=!bShow;

function startMove(iTarget)
{
if(t)clearInterval(t);
t=setInterval(function (){
doMove(iTarget);
}, 30);
}

function doMove(iTarget)
{
var iSpeed=0;
if(alpha<iTarget)
{
iSpeed=2;
}
else
{
iSpeed=-2;
}

if(alpha==iTarget)
{
clearInterval(t);
t=null;

if(iTarget==100)
{
startMove(0);
}
}
else
{
alpha+=iSpeed;

oBtn2.style.filter="alpha(opacity:"+alpha+")";
oBtn2.style.opacity=alpha/100;
}
}
}, 2000);
};
</script>
<body>

<div id="miaov">
<div id="fill_in">
<span class="title">请输入：</span>
<input type="text" class="long_text" value="2012" />
<span class="space1">年</span>
<input type="text" class="text" value="12" />
<span class="space2">月</span>
<input type="text" class="text" value="22" />
<span class="space3">日</span>
</div>

<a href="javascript:;" id="go" class="go"></a>
<a href="javascript:;" id="go2" class="active"></a>

<p id="target">
现在距离 -
<strong>2012年12月22日</strong>
- 还剩：
</p>

<div id="date">
<p id="day">000</p>
<p id="hour">00</p>
<p id="min">00</p>
<p id="sec">00</p>
</div>

<h1 title="妙味课堂-www.miaov.com"><a href="http://www.miaov.com"></a></h1>
</div>

</body>
</html>
Style.css

* { padding: 0; margin: 0; }
body { background: #191919 url(images/body.gif); margin: 20px 0; }

#miaov { width: 600px; height: 660px; background: url(images/miaov_bg.jpg) no-repeat; position: relative; margin: 0 auto; }

#fill_in { font-size: 14px; color: #ccc; font-weight: bold; position: absolute; top: 108px; left: 136px; }
#fill_in input { background: none; border: 0; text-align: center; font-weight: bold; font-size: 14px; color: #ccc; float: left; overflow: hidden;height: 18px; line-height: 18px; color: #666; position: relative; top: 2px; }
#fill_in span { float: left; padding-top: 4px; text-align:center; }
#fill_in .long_text { width: 80px;  }
#fill_in .text { width: 50px; }
#fill_in .title { width: 60px; }
#fill_in .space1 { width: 36px; }
#fill_in .space2 { width: 28px; }
#fill_in .space3 { padding-left: 8px; }

.go { position: absolute; top: 155px; left: 237px; width: 150px; height: 150px; }
.go:hover { background: url(images/btn_hover.jpg) no-repeat; }
.active {position: absolute; top: 155px; left: 237px; width: 150px; height: 150px; background: url(images/btn_hover.jpg) no-repeat; filter:alpha(opacity:0); opacity:0;}

#target { width: 100%; text-align: center; color: #ccc; font-weight: bold; position: absolute; left: 0; top: 336px; font-family: arial; }
#target strong { color: #fef58c; }

#date { position: absolute; top: 392px; right: 92px; color: #fc3; font-size: 48px; font-family: arial; font-weight: bold; }
#date p { position: absolute; top: 0; }
#day { right: 340px; }
#hour { right: 236px; }
#min { right: 102px; }
#sec { right: 0; }

h1 { position: absolute; bottom: 0; right: 0; }
h1 a { position: absolute; right: 40px; bottom: 30px; width: 292px; height: 72px; }

JS综合实例放大镜效果

<!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>放大镜 - 妙味课堂 - www.miaov.com</title>
<style type="text/css">

#div1 { width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; }

#div1 .small_pic { width: 200px; height: 200px; background: #eee; position: relative; }
#div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }
#div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;}
#div1 .big_pic { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; }
#div1 .big_pic img { position:absolute; top: -30px; left: -80px; }
</style>
<script type="text/javascript">
function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName('*');
var aTmp=[];
var i=0;

for(i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aTmp.push(aEle[i]);
}
}

return aTmp;
}

window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oMark=getByClass(oDiv, 'mark')[0];
var oFloat=getByClass(oDiv, 'float_layer')[0];
var oBig=getByClass(oDiv, 'big_pic')[0];
var oSmall=getByClass(oDiv, 'small_pic')[0];
var oImg=oBig.getElementsByTagName('img')[0];

oMark.onmouseover=function ()
{
oFloat.style.display='block';
oBig.style.display='block';
};

oMark.onmouseout=function ()
{
oFloat.style.display='none';
oBig.style.display='none';
};

oMark.onmousemove=function (ev)
{
var oEvent=ev||event;

var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;

if(l<0)
{
l=0;
}
else if(l>oMark.offsetWidth-oFloat.offsetWidth)
{
l=oMark.offsetWidth-oFloat.offsetWidth;
}

if(t<0)
{
t=0;
}
else if(t>oMark.offsetHeight-oFloat.offsetHeight)
{
t=oMark.offsetHeight-oFloat.offsetHeight;
}

oFloat.style.left=l+'px';
oFloat.style.top=t+'px';

var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth);
var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight);

oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px';
oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px';
};
};

</script>
</head>

<body>

<div id="div1">

<div class="small_pic">
<span class="mark"></span>
<span class="float_layer"></span>
<img src="images/small.png" alt="妙味课堂 - 放大镜图片一" longdesc="http://www.miaov.com" />
</div>

<div class="big_pic">
<img src="images/big.png" alt="妙味课堂 - 放大镜图片二" longdesc="http://www.miaov.com" />
</div>

</div>

</body>
</html>

Js综合案例:苹果官网最新产品展示

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
body{background:#EBEBED;_position:relative;_height:100%;}
img{border:none;display:block;}
li{list-style:none;}
.page{
-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
background:#FFFFFF;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-style: solid;
border-width: 1px;
margin:5px auto 0;
width:980px;
}
.miaov_box{
overflow: hidden;
position: relative;
width: 820px;
z-index: 0;
height:158px;
margin: 0 70px;
}
.miaov_box_head{
width: 1680px;
}
.miaov_box_head li{
width:140px;
float:left;
text-align: center;
}
a{
text-decoration:none;
font: 12px/18px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
color:#7F7F7F;
}
.miaov_box_head li a:hover{color:#333;}
.miaov_box_foot{
height:30px;
text-align:center;
background:#fff;
overflow:hidden;
background:url(img/nav_bg.png) no-repeat 0 0;
background:-moz-linear-gradient(center bottom, rgba(223,223,223,1) 0%, rgba(242,242,242,1) 66%, rgba(242,242,242,1) 90%, rgba(230,230,230,1) 93%, rgba(190,190,190,1) 96%, rgba(150,150,150,1) 100%);
background:-webkit-gradient(linear, left bottom, left top, from(rgba(223,223,223,1)), color-stop(66%, rgba(242,242,242,1)), color-stop(90%, rgba(242,242,242,1)), color-stop(93%, rgba(230,230,230,1)), color-stop(96%, rgba(210,210,210,1)), to(rgba(140,140,140,1)));
border-bottom:1px solid #ebebeb;
position:relative;
}
.caret{
background: url(img/caret_active.gif) no-repeat scroll 0 0;
display: block;
height: 8px;
margin: 0 0 -8px -7px;
position: absolute;
width: 15px;
}
.miaov_box_foot a{
display: inline-block;
margin: 0 15px;
padding: 8px 0 6px;
cursor:pointer;
text-shadow: 0 1px 0 #FFFFFF;
}
.miaov_box_foot .show{
cursor: default;
color:#2B2B2B;
}
.miaov_box_foot a:hover{color:#000;}
.miaov{height:36px;line-height:26px;text-align:center;position:fixed;_position:absolute;bottom:0;width:100%;}
.miaov a{color:#777;font-size:16px;}
.miaov a:hover{color:#555;}
.miaov_head{height:36px;width:980px;overflow:hidden;margin:0 auto;}
.miaov_head .left{float:left;}
.miaov_head .right{float:right;}
.miaov_head a{line-height:36px;color:#777;}
.miaov_head a:hover{color:#555;}
</style>
<script type="text/javascript" src="miaov.js"></script>
<script type="text/javascript">
function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName('*');
var aResult=[];
var i=0;

for(i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
}

return aResult;
}

window.onload=function ()
{
var oDiv=document.getElementById('div1');
var aLi=getByClass(oDiv, 'miaov_box_head')[0].getElementsByTagName('li');
var aBtn=getByClass(oDiv, 'miaov_box_foot')[0].getElementsByTagName('a');
var oCaret=getByClass(oDiv, 'caret')[0];
var aPos=[];
var timer=null;
var i=0;

for(i=0;i<aLi.length;i++)
{
aLi[i].index=i;
aPos[i]=aLi[i].offsetLeft;
}

for(i=0;i<aLi.length;i++)
{
aLi[i].style.position='absolute';
aLi[i].style.left=aPos[i]+'px';
}

aBtn[0].onclick=function ()
{
var i=aLi.length-1;

clearTimeout(timer);

function next()
{
var obj=aLi[i];
if(i>=aLi.length/2)
{
miaovStartMove(aLi[i], {left: 900}, MIAOV_MOVE_TYPE.FLEX);
timer=setTimeout(next, 100);
i--;
}
else
{
timer=setTimeout(next2, 150);
}
}

function next2()
{
if(i>=0)
{
miaovStartMove(aLi[i], {left: aPos[i]}, MIAOV_MOVE_TYPE.FLEX);
timer=setTimeout(next2, 100);
}
i--;
}

next();

aBtn[1].className='';
this.className='show';
miaovStartMove(oCaret, {left: this.offsetLeft+this.offsetWidth/2}, MIAOV_MOVE_TYPE.BUFFER);
};

aBtn[1].onclick=function ()
{
var i=0;

clearTimeout(timer);

function next()
{
var obj=aLi[i];
if(i<aLi.length/2)
{
miaovStartMove(aLi[i], {left: -200}, MIAOV_MOVE_TYPE.FLEX);
timer=setTimeout(next, 100);
i++;
}
else if(i==aLi.length/2)
{
timer=setTimeout(next2, 150);
}
}

function next2()
{
if(i<aLi.length)
{
miaovStartMove(aLi[i], {left: aPos[i-aLi.length/2]}, MIAOV_MOVE_TYPE.FLEX);
timer=setTimeout(next2, 100);
}
i++;
}

next();

aBtn[0].className='';
this.className='show';
miaovStartMove(oCaret, {left: this.offsetLeft+this.offsetWidth/2}, MIAOV_MOVE_TYPE.BUFFER);
};
};
</script>
</head>

<body>
<div class='miaov_head'>
<a href="http://www.miaov.com" target="_blank" class='left'>妙味课堂　http://www.miaov.com</a>
<a href="http://www.miaov.com/contact.html.php" target="_blank" class='right'>联系我们</a>
</div>
<div id="div1" class="page">
<div class="miaov_box">
<ul class="miaov_box_head">
<li><a href="http://www.miaov.com"><img src="img/1.jpg" alt=""/>iPod shuffle</a></li>
<li><a href="http://www.miaov.com"><img src="img/2.jpg" alt=""/>iPod nano</a></li>
<li><a href="http://www.miaov.com"><img src="img/3.jpg" alt=""/>iPod classic</a></li>
<li><a href="http://www.miaov.com"><img src="img/4.jpg" alt=""/>iPod touch</a></li>
<li><a href="http://www.miaov.com"><img src="img/5.jpg" alt=""/>Apple TV</a></li>
<li><a href="http://www.miaov.com"><img src="img/6.jpg" alt=""/>Accessories</a></li>
<li><a href="http://www.miaov.com"><img src="img/7.jpg" alt=""/>Download iTunes 10</a></li>
<li><a href="http://www.miaov.com"><img src="img/8.jpg" alt=""/>iTunes Gift Cards</a></li>
<li><a href="http://www.miaov.com"><img src="img/9.jpg" alt=""/>Nike + iPod</a></li>
<li><a href="http://www.miaov.com"><img src="img/10.jpg" alt=""/>(PRODUCT) RED</a></li>
<li><a href="http://www.miaov.com"><img src="img/11.jpg" alt=""/>MobileMe</a></li>
<li><a href="http://www.miaov.com"><img src="img/12.jpg" alt=""/>In-Ear Headphones</a></li>
</ul>
</div>
<div class="miaov_box_foot">
<span style="left: 424px;" class="caret"></span>
<a class="show">Products</a>
<a>iTunes and more</a>
</div>
</div>
<h2 class="miaov"><a href="http://www.miaov.com" target="_blank">妙味课堂　http://www.miaov.com</a></h2>
</body>
</html>
Miaov.js
function css(obj, attr, value)
{
if(arguments.length==2)
return parseFloat(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]);
else if(arguments.length==3)
switch(attr)
{
case 'width':
case 'height':
case 'paddingLeft':
case 'paddingTop':
case 'paddingRight':
case 'paddingBottom':
value=Math.max(value,0);
case 'left':
case 'top':
case 'marginLeft':
case 'marginTop':
case 'marginRight':
case 'marginBottom':
obj.style[attr]=value+'px';
break;
case 'opacity':
obj.style.filter="alpha(opacity:"+value*100+")";
obj.style.opacity=value;
break;
default:
obj.style[attr]=value;
}

return function (attr_in, value_in){css(obj, attr_in, value_in)};
}

var MIAOV_MOVE_TYPE={
BUFFER: 1,
FLEX: 2
};

function miaovStartMove(obj, oTarget, iType, fnCallBack, fnDuring)
{
var fnMove=null;
if(obj.timer)
{
clearInterval(obj.timer);
}

switch(iType)
{
case MIAOV_MOVE_TYPE.BUFFER:
fnMove=miaovDoMoveBuffer;
break;
case MIAOV_MOVE_TYPE.FLEX:
fnMove=miaovDoMoveFlex;
break;
}

obj.timer=setInterval(function (){
fnMove(obj, oTarget, fnCallBack, fnDuring);
}, 15);
}

function miaovDoMoveBuffer(obj, oTarget, fnCallBack, fnDuring)
{
var bStop=true;
var attr='';
var speed=0;
var cur=0;

for(attr in oTarget)
{
cur=css(obj, attr);
if(oTarget[attr]!=cur)
{
bStop=false;

speed=(oTarget[attr]-cur)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);

css(obj, attr, cur+speed);
}
}

if(fnDuring)fnDuring.call(obj);

if(bStop)
{
clearInterval(obj.timer);
obj.timer=null;

if(fnCallBack)fnCallBack.call(obj);
}
}

function miaovDoMoveFlex(obj, oTarget, fnCallBack, fnDuring)
{
var bStop=true;
var attr='';
var speed=0;
var cur=0;

for(attr in oTarget)
{
if(!obj.oSpeed)obj.oSpeed={};
if(!obj.oSpeed[attr])obj.oSpeed[attr]=0;
cur=css(obj, attr);
if(Math.abs(oTarget[attr]-cur)>1 || Math.abs(obj.oSpeed[attr])>1)
{
bStop=false;

obj.oSpeed[attr]+=(oTarget[attr]-cur)/5;
obj.oSpeed[attr]*=0.7;
var maxSpeed=65;
if(Math.abs(obj.oSpeed[attr])>maxSpeed)
{
obj.oSpeed[attr]=obj.oSpeed[attr]>0?maxSpeed:-maxSpeed;
}

css(obj, attr, cur+obj.oSpeed[attr]);
}
}

if(fnDuring)fnDuring.call(obj);

if(bStop)
{
clearInterval(obj.timer);
obj.timer=null;
if(fnCallBack)fnCallBack.call(obj);
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 360度全景图片 QQ幻灯片倒计时放大镜效果

相关文章推荐

新的分享

章节导航