Maison >interface Web >js tutoriel >Comment obtenir un effet de carte de focus en utilisant js
Comment obtenir un effet de carte de focus en utilisant js
- 亚连original
- 2018-06-20 17:44:152725parcourir
L'éditeur ci-dessous partagera avec vous un exemple d'effet d'image de focus simple implémenté en js natif. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur pour y jeter un œil.
Utilisation de certaines fonctions de mouvement packagées, principalement des minuteries
L'effet est de changer automatiquement les images et les descriptions des images à intervalles réguliers.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul,
li,
p,
h3 {
padding: 0;
margin: 0;
list-style: none;
}
img {
border: none;
vertical-align: top;
}
#bg_box {
width: 1000px;
height: 590px;
margin: 50px auto;
position: relative;
background: url(img/bg1.jpg) no-repeat;
}
.pic {
width: 440px;
height: 274px;
position: absolute;
top: 50px;
left: 220px;
overflow: hidden;
}
.li_box {
width: 1760px;
height: 274px;
position: absolute;
left: 0;
}
.tags {
width: 440px;
height: 80px;
position: absolute;
bottom: -80px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
color: white;
padding-left: 20px;
padding-top: 15px;
box-sizing: border-box;
}
.tags:nth-of-type(1) {
/*bottom: 0;*/
}
.img {
float: left;
width: 440px;
height: 274px;
}
h3 {
font: bold 20px/30px "微软雅黑";
}
p {
font: 16px/30px "微软雅黑";
}
</style>
<script src="tween.js"></script>
<script src="commom.js"></script>
<script type="text/javascript">
window.onload = function() {
//获取元素
var liBbox = $('ul')[0];
var li = $('li');
var tags = $('.tags')
var num = 0; //设置初始位置
Change()
function Change() {
var M = tags[num];
MTween(M, 'bottom', 0, 500, 'px', 'linear', function() { //先让描述内容出现
num++
if(num > li.length - 1) { //边界设置。
return;
}
setTimeout(function() {
MTween(M, 'bottom', -80, 500, 'px', 'linear', function() { //让描述内容不显示
MTween(liBbox, 'left', -num * 440, 800, 'px', 'linear', function() {
Change();
}); //切换图片
});
}, 1000)
});
}
}
</script>
</head>
<body>
<section id="bg_box">
<p class="pic">
<ul class="li_box">
<li>
<img class="img" src="img/a5.gif">
</li>
<li>
<img class="img" src="img/a6.gif">
</li>
<li>
<img class="img" src="img/a7.gif">
</li>
<li>
<img class="img" src="img/a8.gif">
</li>
</ul>
<p class="tags">
<h3 class="title">下雨了~~~</h3>
<p class="tag">这是一个适合在家睡觉的日子!!</p>
</p>
<p class="tags">
<h3 class="title">包饺子~~~</h3>
<p class="tag">一只会居家过日子的小狐狸！！</p>
</p>
<p class="tags">
<h3 class="title">生气了~~~</h3>
<p class="tag">吃掉好吃的就不生气了！！</p>
</p>
<p class="tags">
<h3 class="title">出发了~~~</h3>
<p class="tag">来一段说走就走的旅行!!</p>
</p>
</p>
</section>
</body>
</html>commom.js
function MTween(obj,attr,end,duration,unit,way,callBack){
if(obj.isAnim) return;
//obj开始运动了 自定义属性
obj.isAnim = true;
if(!way){ //如果用户没有选择运动方式就默认匀速
way = 'linear';
}
if(!unit){ //如果用户没有选择运动方式就默认匀速
unit = '';
}
var start = parseFloat(getStyle(obj,attr));//起始位置
// var end = 1000;//目标点
// var duration = 1000;//动画执行的总时间 单位是毫秒
var startTime = Date.now();
var s = end - start; //总路程
// var v = s/duration; //计算出来的速度
//每次20ms走一帧
clearInterval(timer);
var timer = 0;
timer = setInterval(function(){
var endTime = Date.now();
//计算出当前时间
var t = endTime-startTime;
if(t>=duration){
t = duration;
clearInterval(timer);//到达目标点要清除定时器
}
// obj.style[attr] = t*s/duration+start+'px';
// console.log(Tween[way](t,start,s,duration))
obj.style[attr] = Tween[way](t,start,s,duration)+unit;
//透明度的兼容处理
if(attr=='opacity'){
obj.style.filter = 'Alpha(opacity='+Tween[way](t,start,s,duration)*100+')';
}
if(t==duration){
obj.isAnim = false;
//等到上一个动画完成 然后再调用
if(callBack){
callBack();
}
}
},20);
}tween.js
/*
* t : time 已过时间 当前时间-初始时间
* b : begin 起始值
* c : count 总的运动值 总路程
* d : duration 持续时间 总时间
*
* s = vt; => c = t*c/d 这里只计算总共要运动的路程 ，不包括起始位置
*
* attrVal = t*c/d + b;
*
* 曲线方程
*
* */
//Tween.linear();
var Tween = {
linear: function (t, b, c, d){ //匀速
return c*t/d + b;
},
easeIn: function(t, b, c, d){ //加速曲线
return c*(t/=d)*t + b;
},
easeOut: function(t, b, c, d){ //减速曲线
return -c *(t/=d)*(t-2) + b;
},
easeBoth: function(t, b, c, d){ //加速减速曲线
if ((t/=d/2) < 1) {
return c/2*t*t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInStrong: function(t, b, c, d){ //加加速曲线
return c*(t/=d)*t*t*t + b;
},
easeOutStrong: function(t, b, c, d){ //减减速曲线
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeBothStrong: function(t, b, c, d){ //加加速减减速曲线
if ((t/=d/2) < 1) {
return c/2*t*t*t*t + b;
}
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
elasticIn: function(t, b, c, d, a, p){ //正弦衰减曲线（弹动渐入）
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.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-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + 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*0.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;
},
elasticBoth: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d/2) == 2 ) {
return b+c;
}
if (!p) {
p = d*(0.3*1.5);
}
if ( !a || a < Math.abs(c) ) {
a = c;
var s = p/4;
}
else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
if (t < 1) {
return - 0.5*(a*Math.pow(2,10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
return a*Math.pow(2,-10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
},
backIn: function(t, b, c, d, s){ //回退加速（回退渐入）
if (typeof s == 'undefined') {
s = 1.70158;
}
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backOut: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 3.70158; //回缩的距离
}
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backBoth: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158;
}
if ((t /= d/2 ) < 1) {
return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
}
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
bounceIn: function(t, b, c, d){ //弹球减振（弹球渐出）
return c - Tween['bounceOut'](d-t, 0, c, d) + b;
},
bounceOut: function(t, b, c, d){//*
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
}
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
},
bounceBoth: function(t, b, c, d){
if (t < d/2) {
return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
}
return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
}
}Ce qui précède c'est que je l'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir.
Articles associés :
Introduction détaillée au mode proxy (Proxy) dans ES6
Introduction détaillée à la création de webpack
Comment implémenter l'empaquetage de fichiers à l'aide de webpack
Utiliser webpack pour créer un échafaudage de vue
Comment implémenter un calendrier utilisation des composants Vue (tutoriel détaillé)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter plusieurs requêtes AJAX à l'aide de JQUERYArticle suivant：Comment implémenter plusieurs requêtes AJAX à l'aide de JQUERY
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript