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

js实现琴弦效果(兼容IE7)

2016-04-08 14:15 447 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="-1">
<title>魔幻英雄小游戏</title>
<style>
#list{
width: 302px; margin: 50px auto; padding: 0; list-style: none;
}
#list li{
height: 40px; font: 12px/40px "宋体"; border:1px solid #000; position: relative;
}
#list span{
height: 12px; line-height: 12px;
}
</style>
<script src="move.js"></script>
<script>
window.onload = function(){
var oList = document.getElementById('list');
var aLi = document.getElementsByTagName('li');
var iLiHeight = aLi[0].offsetHeight;
for (var i = aLi.length - 1; i >= 0; i--) {
var sHtml = aLi[i].innerHTML;
aLi[i].innerHTML ='';
for(var j = 0; j<sHtml.length; j++){
aLi[i].innerHTML +="<span>"+sHtml.charAt(j)+"</span>";
}
var aSpan = aLi[i].children;
var iSpanHeight = aSpan[0].offsetHeight;
for(var j = 0; j<aSpan.length; j++){
var oSpan = aSpan[j];
oSpan.style.left = oSpan.offsetLeft + 'px';
oSpan.style.top = oSpan.offsetTop + 'px';
oSpan.startTop = oSpan.offsetTop;
}
for(var j = 0; j<aSpan.length; j++){
aSpan[j].style.position = 'absolute';
(function(aSpan,nub2){
var iStart = 0;
var oSpan = aSpan[nub2];
oSpan.onmouseover = function(ev ){
var ev = event || ev;
iStart = ev.clientY;
}
oSpan.onmousemove = function(ev ){
var ev = event || ev;
var iDis = ev.clientY - iStart;
var iNub = iDis >0?1:-1;
if(this.startTop + iDis  > 0 && this.startTop + iDis < iLiHeight - iSpanHeight){
// this.style.top = this.startTop + iDis + 'px';
for(var j = 0; j<aSpan.length;j++){
if(Math.abs(iDis)> Math.abs(nub2-j)){
aSpan[j].style.top = aSpan[j].startTop + (Math.abs(iDis) - Math.abs(nub2-j))*iNub+'px';
}else{
aSpan[j].style.top = aSpan[j].startTop +'px';
}
}
}
}
oSpan.onmouseout = function(ev ){
for(var j = 0; j<aSpan.length;j++){
startMove(aSpan[j],{top:aSpan[j].startTop},500,"elasticOut");
}
}
})(aSpan,j)

}
};

}
</script>
</head>
<body>
<ul id="list">
<li>魔幻英雄小游戏文字列表图片高斯斯文模糊切换1</li>
<li>魔幻英雄小游戏文字列表图片高斯斯文模糊切换222</li>
<li>魔幻英雄小游戏文字列表图片高斯斯文模糊切换3333</li>
<li>魔幻英雄小游戏文字列表图片高斯斯文模糊切换44444</li>
<li>魔幻英雄小游戏文字列表图片高斯斯文模糊切换555555</li>
</ul>
</body>
</html>

MOVE.JS

// JavaScript Document

//t 时间变化量time，B初始量 begin，C变化量change，D，时间duraction
var Tween = {
linear:function(t,b,c,d){
return t*c/d+b;
},
easeIn:function(t,b,c,d){
return c*(t/=d)*t+b;
},
elasticOut:function (t, b, c, d, a, p) {
if (t == 0) return b;
if ((t /= d) == 1) return b + c;
if (!p) p = d * .3;
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
}
else var s = p / (2 * Math.PI) * Math.asin(c / a);
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
}

}

function startMove(obj, json,times,fx, fn) {

clearInterval(obj.timer);

var iCur = {};

var startTime = now();

for(var attr in json){

if (attr == 'opacity') {

iCur[attr] = parseInt(parseFloat(getStyle(obj, attr)) * 100);

} else {

iCur[attr] = parseInt(getStyle(obj, attr));
}

}

obj.timer = setInterval(function() {

var changeTime = now();

//

var t = times - Math.max(0,startTime- changeTime+times);

for (var attr in json) {

var value = Tween[fx](t,iCur[attr],json[attr]-iCur[attr],times);

//console.log(value);

if (attr == 'opacity') {

obj.style.filter = 'alpha(opacity=' + value + ') ';

obj.style.opacity = value / 100;

} else {

obj.style[attr] = value + 'px';
}
}

if (t==times) {

clearInterval(obj.timer);

if (fn) {

fn.call(obj)
}
}

}, 13)
}

function getStyle(obj, attr) {

if (obj.currentStyle) {

return obj.currentStyle[attr];

} else {

return getComputedStyle(obj, false)[attr];
}
}

function now(){

return new Date().getTime();
}

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

标签： js javascript JS效果

相关文章推荐

新的分享

章节导航