利用HTML5实现超链接悬停显示图片特效



10 39 14



特效描述:利用HTML5实现 超链接 悬停显示 图片特效,利用HTML5实现超链接悬停显示图片特效

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />

2. 引入JS

<script src="js/charming.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/demo.js"></script>
<script src="js/charming.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/demo.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
</head>
<body class="loading">
<main>
	<div class="content">
		<div class="block" data-fx="1">
			<a class="block__title" data-img="img/1.jpg">Effect 1</a>
			<a class="block__link" data-img="img/2.jpg">chloride</a>
			<a class="block__link" data-img="img/3.jpg">magnesium</a>
			<a class="block__link" data-img="img/4.jpg">zinc</a>
			<a class="block__link" data-img="img/5.jpg">iodine</a>
		</div>
		<div class="block" data-fx="2">
			<a class="block__title" data-img="img/6.jpg">Effect 2</a>
			<a class="block__link" data-img="img/7.jpg">mimas</a>
			<a class="block__link" data-img="img/8.jpg">phobos</a>
			<a class="block__link" data-img="img/9.jpg">lapetus</a>
			<a class="block__link" data-img="img/10.jpg">titania</a>
		</div>
		<div class="block" data-fx="3">
			<a class="block__title" data-img="img/11.jpg">Effect 3</a>
			<a class="block__link" data-img="img/12.jpg">Capitate</a>
			<a class="block__link" data-img="img/13.jpg">Triquetral</a>
			<a class="block__link" data-img="img/14.jpg">scaphoid</a>
			<a class="block__link" data-img="img/15.jpg">Hamate</a>
		</div>
		<div class="block" data-fx="4">
			<a class="block__title" data-img="img/16.jpg">Effect 4</a>
			<a class="block__link" data-img="img/17.jpg">stratus</a>
			<a class="block__link" data-img="img/18.jpg">cirrus</a>
			<a class="block__link" data-img="img/19.jpg">nimbus</a>
			<a class="block__link" data-img="img/20.jpg">cumulus</a>
		</div>
		<div class="block" data-fx="5">
			<a class="block__title" data-img="img/2.jpg">Effect 5</a>
			<a class="block__link" data-img="img/4.jpg">king's quest</a>
			<a class="block__link" data-img="img/6.jpg">asteroids</a>
			<a class="block__link" data-img="img/8.jpg">centipede</a>
			<a class="block__link" data-img="img/10.jpg">defender</a>
		</div>
		<div class="block" data-fx="6">
			<a class="block__title" data-img="img/9.jpg">Effect 6</a>
			<a class="block__link" data-img="img/7.jpg">Jerry</a>
			<a class="block__link" data-img="img/5.jpg">Michael</a>
			<a class="block__link" data-img="img/3.jpg">Jason</a>
			<a class="block__link" data-img="img/1.jpg">Julia</a>
		</div>
		<div class="block" data-fx="7">
			<a class="block__title" data-img="img/10.jpg">Effect 7</a>
			<a class="block__link" data-img="img/8.jpg">Mistral</a>
			<a class="block__link" data-img="img/6.jpg">Sirocco</a>
			<a class="block__link" data-img="img/4.jpg">Khamseen</a>
			<a class="block__link" data-img="img/2.jpg">Brickfielder</a>
		</div>
		<div class="block" data-fx="8">
			<a class="block__title" data-img="img/20.jpg">Effect 8</a>
			<a class="block__link" data-img="img/19.jpg">Quechan</a>
			<a class="block__link" data-img="img/3.jpg">Chemehuevi</a>
			<a class="block__link" data-img="img/14.jpg">Meskwaki</a>
			<a class="block__link" data-img="img/12.jpg">Ponca</a>
		</div>
		<div class="block" data-fx="9">
			<a class="block__title" data-img="img/1.jpg">Effect 9</a>
			<a class="block__link" data-img="img/2.jpg">Dugbe</a>
			<a class="block__link" data-img="img/3.jpg">Lordsdale</a>
			<a class="block__link" data-img="img/4.jpg">Sindbis</a>
			<a class="block__link" data-img="img/7.jpg">Cowpox</a>
		</div>
		<div class="block" data-fx="10">
			<a class="block__title" data-img="img/6.jpg,img/9.jpg,img/8.jpg">Effect 10</a>
			<a class="block__link" data-img="img/5.jpg,img/4.jpg,img/11.jpg">Khufu</a>
			<a class="block__link" data-img="img/12.jpg,img/13.jpg,img/14.jpg">Hatshepsut</a>
			<a class="block__link" data-img="img/17.jpg,img/16.jpg,img/15.jpg">Tutankhamun</a>
			<a class="block__link" data-img="img/19.jpg,img/20.jpg,img/1.jpg">Djoser</a>
		</div>
		<div class="content__text">
			All you have to learn here is how to have fun. It's almost like something out of a <a class="content__text-link" data-img="img/20.jpg" data-fx="1">fairytale</a> book. Almost everything is going to happen for you automatically - you don't have to spend any time <a class="content__text-link" data-img="img/19.jpg" data-fx="2">working</a> or worrying. Take your time. Speed will come later. A thin paint will stick to a thick paint. There comes a nice little <a class="content__text-link" data-img="img/18.jpg" data-fx="3">fluffer</a>.
			You can create the world you want to see and be a part of. You have that <a class="content__text-link" data-img="img/17.jpg" data-fx="4">power</a>. Don't forget to tell these special people in your life just how special they are to you. Let's build an almighty <a class="content__text-link"  data-img="img/16.jpg" data-fx="5">mountain</a>. Isn't that fantastic that you can create an almighty tree that fast? The only <a class="content__text-link" data-img="img/15.jpg" data-fx="6">prerequisite</a> is that it makes you happy. If it makes you happy then it's good.
			This is your <a class="content__text-link" data-img="img/14.jpg" data-fx="7">creation</a> - and it's just as unique and <a class="content__text-link" data-img="img/13.jpg" data-fx="8">special</a> as you are. Decide where your cloud lives. Maybe he lives right in here. You have to make those little <a class="content__text-link" data-img="img/12.jpg" data-fx="9">noises</a> or it won't work. Just go out and talk to a tree. Make <a class="content__text-link" data-img="img/10.jpg,img/14.jpg,img/15.jpg" data-fx="10">friends</a> with it. This is truly an almighty mountain.
		</div>
	</div>
</main>
<div style="text-align:center;margin:-150px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 其他 鼠标悬停 图片切换 图片选项卡 图标选项卡

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到