大家好,今天给大家介绍一款,jquery实现的按鼠标滑过方向增加元素边框html页面源码(图1)。送给大家哦,获取方式在本文末尾。
图1
按鼠标经过的方向控制背景方块元素移动(图2)
图2
源码完整,需要的朋友可以下载学习(图3)
图3
本源码编码:10151,需要的朋友,点击下面的链接后,搜索10151,即可获取。
<!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>jQuery插件--鼠标滑过(方向)图片边框特效</title>
<style type="text/css">
body{background-color: #272727}
.wrapper{width: 680px;margin: 50px auto;}
.img{margin: 10px;width:200px;height:200px;}
</style>
</head>
<body>
<div class="wrapper">
<img src="static/picture/t1.png" class="img">
<img src="static/picture/t2.png" class="img">
<img src="static/picture/t3.png" class="img">
<br>
<img src="static/picture/t3.png" class="img">
<img src="static/picture/t1.png" class="img" style="border-radius: 40px; -moz-border-radius : 40px;">
<img src="static/picture/t2.png" class="img">
<br>
<img src="static/picture/t1.png" class="img">
<img src="static/picture/t2.png" class="img">
<img src="static/picture/t3.png" class="img">
</div>
<script src="static/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="static/js/jquery.focus-follow.js"></script>
<script>
$(function() {
$(".img").focusFollow({
wrapper: '#wrapper',
color: '#00dcff',
opacity: 0.5,
margin_horizontal: 8,
margin_vertical: 8,
speed: 300,
timeout: 500
});
});
</script>
</body>
</html>