ホームページ > 記事 > ウェブフロントエンド > シンプルな小さなアニメーション効果
シンプルな小さなアニメーション効果
- PHP中文网オリジナル
- 2017-06-19 17:34:461760ブラウズ
デモエフェクト:
エフェクトを作成した後、それをプラグインにパッケージ化し、プラグインの作成を練習しました。
コード:
html: これについては何も言うことはありません。シンプルなレイアウトです。写真上に紹介文があり、その紹介文はエリアの外側に配置されています。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/reset.css?1.1.10" /><script src="js/jquery-2.1.0.js?1.1.10" type="text/javascript" charset="utf-8"></script><script src="js/TweenMax.js?1.1.10" type="text/javascript" charset="utf-8"></script><style type="text/css">ul {width: 800px;margin: 100px auto;}ul li {display: inline-block;width: 45%;cursor: pointer;position: relative;margin-top: 30px;overflow: hidden;}ul li img {width: 100%;height: 100%;}ul li .info {position: absolute;width: 100%;height: 100%;top: 100%;left: 100%;background-color: rgba(255, 255, 255, .6);color: #f00;text-align: center;line-height: 80px;}</style></head><body><ul class="clearfix"><li> <img src="img/animation1.jpg" /><div class="info">点我吧</div></li><li> <img src="img/animation2.jpg" /><div class="info">点我吧</div></li><li> <img src="img/animation3.jpg" /><div class="info">点我吧</div></li><li> <img src="img/animation4.jpg" /><div class="info">点我吧</div></li></ul><script src="js/lonelyAni.js?1.1.10" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {
$("ul li").lonelyMove({
moveClass: ".info"});
});</script></body></html>JS プラグイン エフェクト: エフェクトをプラグインにカプセル化し、後で直接呼び出します。
りー
以上がシンプルな小さなアニメーション効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：ハイチャートの使用例のコード次の記事：ハイチャートの使用例のコード