每天一個jquery外掛-圖示的動畫

圖示的動畫

今天已經很晚了，就記錄一下我感興趣的樣式，並且記錄一下我對他的封包成外掛的想法

今天瀏覽別人家的網站的時候，有一個小樣式吸引了我的目光，它長這樣↓
在這裡插入圖片描述

其實想想這種小樣式真的在很多地方都見過，之前總是想著要去搞懂它，但是一直沒有在意，今天就決定搞懂這個了。經過研究，其實翻了翻別人的原始碼看了看實現內容，嗯，用字型圖示實現的原理沒看懂，但是還是那句話

只要思想不滑坡，方法總比困難多

既然這個問題暫時沒解決，我就打算用自己的方法來實現一下，後面肯定是實現了，效果如下
在這裡插入圖片描述

其實真正做起來感覺這個樣式還是比較好理解的，我的做法就是哼哧哼哧自己去阿里圖示庫找了幾張圖片然後搓了一個大圖片出來，把他們以對應的邏輯給整到一個圖片裡面去，最後把這個圖片扔進容器裡面當背景，拒絕repeat然後讓圖片的一半或者三分之一填滿容器，動畫效果就是把這個圖片在背景圖片裡面整體的挪上一半或者三分之一，中間有個時間軸，這個效果就出來了！

程式碼實現如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圖示動畫</title>
		<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<script src="js/jquery-3.4.1.min.js"></script 
>
		<style>
			.divborder{
				border: 1px solid lightgray;
				border-radius: 5px;
			}
			.box{
				margin: 5px;
				padding: 5px;
				width: 10px;
			}
			.box:hover{
				cursor: pointer;
			}
			.img1{
				height: 32px;
				width: 32px;
				background-image: url('imgs/twolove.png');
				background-size 
: 100% 200%;
				background-repeat: no-repeat;
				transition-property: background-position;
				transition-duration: 0.5s;
			}
			.img2{
				height: 32px;
				width: 32px;
				background-image: url('imgs/treestart.png');
				background-size: 100% 300%;
				background-repeat: no-repeat;
				transition-property: background-position;
				transition-duration: 0.5s;
			}
			.img1:hover{
				background-position-y:100%;
			}
			.imghover:hover{
				background-position-y:50%;
			}
			.full{
				background-position-y:100%;
			}
			.img3{
				border: 1px solid lightgray;
				width: 32px;
				height: 32px;
				background-image: url(imgs/女.png);
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<p><div class="img1 box divborder"></div>靜止-懸浮</p>
			<p><div class="img2 imghover box divborder"></div>靜止-懸浮-點選</p>
		</div>
	</body>
</html>
<script>
	$(".img2").click(function(){
		$(this).toggleClass('full');
		$(this).toggleClass('imghover');
	})
	
</script>

效果實現了，不過我再去看看其他的實現方法，安~

每天學一個jquery外掛-圖示的動畫

每天一個jquery外掛-圖示的動畫

圖示的動畫

每天學一個jquery外掛-圖示的動畫

每天學一個jquery外掛-仿樓梯滾動

每天學一個jquery外掛-彈出提示框2

每天學一個jquery外掛-記分牌效果

每天學一個jquery外掛-B站的景深

每天學一個jquery外掛-密碼的等級

每天學一個jquery外掛-滑鼠的特效

每天學一個jquery外掛-做個點名器

每天學一個jquery外掛-css實現電風扇2

每天學一個jquery外掛-五角星打分

每天學一個jquery外掛-五角星打分2

每天學一個jquery外掛-省市縣聯動

每天學一個jquery外掛-做拖動效果1

每天學一個jquery外掛-滑動的底邊

每天學一個jquery外掛-自定義標題

每天學一個jquery拆件-圖片的預覽

分享一個JQuery 圖片裁剪外掛，然後用C# 把裁剪的圖片儲存在本地

jquery數字滾動動畫使用leoTextAnimate.js外掛

jQuery外掛simplePagination的使用方法示例

JQuery外掛tablesorter表格排序實現過程解析

每天學一個jquery外掛-圖示的動畫

每天一個jquery外掛-圖示的動畫

圖示的動畫

相關推薦