JavaScript类——鼠标点击下笑脸变化
2017-10-25 00:00
99 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态笑脸</title>
<style>
* {
box-sizing: border-box;
}
.container {
width: 400px;
min-height: 400px;
background-color: yellow;
overflow: auto;
display: block;
margin: 0 auto;
border-radius:200px;
}
.eyebox {
width: 400px;
display: block;
margin: 0 auto;
text-align: center;
margin-top: 100px;
margin-bottom: 60px;
}
.eye {
height: 100px;
width: 100px;
background-color: white;
border: 4px solid white;
border-radius: 100%;
display: inline-block;
margin: 0 20px;
position: relative;
padding: 20px;
overflow: hidden;
}
.eye .pupil {
height: 25px;
width: 25px;
border-radius: 100%;
display: inline-block;
background-color: black;
position: absolute;
margin-left: -10px;
left: 50px;
margin: 10px;
}
.smile {
height: 100px;
width: 200px;
border-radius: 0 0 200px 200px;
background: #ee3a4c;
margin: 0 auto;
overflow: hidden;
transition: all .4s;
transform-origin: center;
}
.smile:hover {
transition: all .4s;
height: 33.33333px;
width: 33.33333px;
border-radius: 100%;
margin-top: 120px;
}
.smile:hover .teeth {
margin-left: -25px;
margin-top: -40px;
transition: all .4s;
}
.smile:hover .tongue {
transition: all .4s;
margin-left: -50px;
/*margin-top: $tongueDimensions*2;*/
}
.smile .teeth {
background-color: #fff;
transition: all .4s;
height: 33.33333px;
width: 33.33333px;
margin-left: 56.66667px;
position: relative;
}
.smile .teeth:after {
content: "";
background-color: #fff;
height: 33.33333px;
width: 33.33333px;
position: absolute;
left: 50px;
top: 0;
z-index: 10000;
}
.smile .tongue {
transition: all .4s;
height: 100px;
width: 100px;
background-color: pink;
border-radius: 100%;
margin-top: 40px;
margin-left: 15px;
display: inline-block;
position: relative;
}
.smile .tongue:after {
content: '';
height: 100px;
width: 100px;
background-color: pink;
border-radius: 100%;
display: inline-block;
position: absolute;
left: 50px;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
var limitX = 50,
limitY = 50;
var containerW = $('.container').width();
var containerH = $('.container').height();
$(".container").mousemove(function(e) {
var mouseY = Math.min(e.clientY / (containerH * .01), limitY);
var mouseX = Math.min(e.clientX / (containerW * .01), limitX);
$('.pupil').css('top', mouseY);
$('.pupil').css('left', mouseX);
console.log(e.clientY + ' ' + e.clientX);
});
});
</script>
</head>
<body>
<div class="container">
<div class="eyebox">
<div class="eye EL">
<div class="pupil"></div>
</div>
<div class="eye ER">
<div class="pupil"></div>
</div>
</div>
<div class="smile">
<div class="teeth"></div>
<div class="tongue"></div>
</div>
</div>
<div class="readout"></div>
</div>
</body>
</html>
更多精彩代码内容，就在QQ群434623999
<html>
<head>
<meta charset="UTF-8">
<title>动态笑脸</title>
<style>
* {
box-sizing: border-box;
}
.container {
width: 400px;
min-height: 400px;
background-color: yellow;
overflow: auto;
display: block;
margin: 0 auto;
border-radius:200px;
}
.eyebox {
width: 400px;
display: block;
margin: 0 auto;
text-align: center;
margin-top: 100px;
margin-bottom: 60px;
}
.eye {
height: 100px;
width: 100px;
background-color: white;
border: 4px solid white;
border-radius: 100%;
display: inline-block;
margin: 0 20px;
position: relative;
padding: 20px;
overflow: hidden;
}
.eye .pupil {
height: 25px;
width: 25px;
border-radius: 100%;
display: inline-block;
background-color: black;
position: absolute;
margin-left: -10px;
left: 50px;
margin: 10px;
}
.smile {
height: 100px;
width: 200px;
border-radius: 0 0 200px 200px;
background: #ee3a4c;
margin: 0 auto;
overflow: hidden;
transition: all .4s;
transform-origin: center;
}
.smile:hover {
transition: all .4s;
height: 33.33333px;
width: 33.33333px;
border-radius: 100%;
margin-top: 120px;
}
.smile:hover .teeth {
margin-left: -25px;
margin-top: -40px;
transition: all .4s;
}
.smile:hover .tongue {
transition: all .4s;
margin-left: -50px;
/*margin-top: $tongueDimensions*2;*/
}
.smile .teeth {
background-color: #fff;
transition: all .4s;
height: 33.33333px;
width: 33.33333px;
margin-left: 56.66667px;
position: relative;
}
.smile .teeth:after {
content: "";
background-color: #fff;
height: 33.33333px;
width: 33.33333px;
position: absolute;
left: 50px;
top: 0;
z-index: 10000;
}
.smile .tongue {
transition: all .4s;
height: 100px;
width: 100px;
background-color: pink;
border-radius: 100%;
margin-top: 40px;
margin-left: 15px;
display: inline-block;
position: relative;
}
.smile .tongue:after {
content: '';
height: 100px;
width: 100px;
background-color: pink;
border-radius: 100%;
display: inline-block;
position: absolute;
left: 50px;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
var limitX = 50,
limitY = 50;
var containerW = $('.container').width();
var containerH = $('.container').height();
$(".container").mousemove(function(e) {
var mouseY = Math.min(e.clientY / (containerH * .01), limitY);
var mouseX = Math.min(e.clientX / (containerW * .01), limitX);
$('.pupil').css('top', mouseY);
$('.pupil').css('left', mouseX);
console.log(e.clientY + ' ' + e.clientX);
});
});
</script>
</head>
<body>
<div class="container">
<div class="eyebox">
<div class="eye EL">
<div class="pupil"></div>
</div>
<div class="eye ER">
<div class="pupil"></div>
</div>
</div>
<div class="smile">
<div class="teeth"></div>
<div class="tongue"></div>
</div>
</div>
<div class="readout"></div>
</div>
</body>
</html>
更多精彩代码内容，就在QQ群434623999
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Jquery 实现表格颜色交替变化，点击选中行，鼠标移过颜色变化。
- 点击按扭后显示DIV,当然这个DIV 就显示在按扭旁边,当鼠标移动到DIV上时无变化,当鼠标移出DIV的时候,让DIV隐藏
- 改变鼠标贴图，点击变化
- 回到顶部，当页面下拉到一定高度时，就会出现回到顶部的按钮，点击回到顶部之后，会有一个速度的变化回滚到顶部，如果正在回到顶部时，鼠标的滚轮转动了就会停止回到顶部
- 高德地图 鼠标点击后 地图上点标记跟着变化
- 鼠标移到隔行变色的表格上，有背景变化，并且点击的时候选中复选框和背景色
- opencv 检测鼠标的点击和移动
- python模拟鼠标点击 zz
- Unity鼠标控制物体360°旋转和点击移动
- ExtJS表单提交时，不用鼠标点击按钮提交，直接通过回车键提交
- JS 获取鼠标点击位置
- 游戏界面的提示帮助（根据鼠标点击选取显示位置）
- 一行代码监听EditText变化改变Button可否点击
- delphi7 怎么让button按钮跟着鼠标点击dbgrideh数据行移动
- Jquery幻灯片特效代码分享--鼠标点击按钮时切换（1）
- Unity3d 梦魇射手--摄像机的射线检测（获取鼠标点击位置的检测）
- java基础学习之事件监听--鼠标点击
- /*设计一个鼠标点击速度比赛游戏。 *(1)显示一个按钮和文本框。 *(2)文本框显示鼠标点击次数*/ import javax.swing.*;//引用 import java.awt.*; i
- 鼠标点击更换菜单栏(笔记)
- JS实现鼠标点击展开或隐藏表格行的方法