关于点击三角丝滑旋转180度css3 jq处理方法
来源:互联网 发布:网络订餐食品安全问题 编辑:程序博客网 时间:2024/04/28 08:44
问题: 我们经常会遇见点击一个小三角使之丝滑的旋转180度上下旋转,怎么实现呢,需要css3搭配jq 来处理
如图:1.点击前 2.点击后(效果丝滑旋转)
1.html 页面内容
<div class="user-list-title">标准点播-<small>体验版</small>
<img src="http://i1.letvimg.com/lc07_lecloud/201610/09/11/32/userCenter/jiantoublue1.png" class="user-arrow">
</div>
2.css 内容
.user-arrow{//这是箭头的样式
width:12px;
position:absolute;
right:26px;
margin-top: 8px;
display:inline-block;//放箭头的标签一定是块级元素
}
.user-arrow:hover{
cursor:pointer;
}
.rotate{
transform-origin:center center; //旋转中心要是正中间 才行
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transition: transform 0.2s; //过度时间 可调
-moz-transition: -moz-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
-ms-transition: -ms-transform 0.2s;
}
.rotate1{
transform-origin:center center;
transform: rotate(0deg); //返回原点
-webkit-transform: rotate(0deg);
-moz-transform: rotate(deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transition: transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
-ms-transition: -ms-transform 0.2s;
}
3.jq 处理方法
$(function() {
var usercenter = {
init:function(){
this.modal();
},
modal: function() {
$(".user-arrow").click(function(){
if($(this).hasClass("rotate")){ //点击箭头旋转180度
$(this).removeClass("rotate");
$(this).addClass("rotate1");
}else{
$(this).removeClass("rotate1"); //再次点击箭头回来
$(this).addClass("rotate");
}
})
}
}
usercenter.init();
})
- 关于点击三角丝滑旋转180度css3 jq处理方法
- css3模拟jq点击事件
- css3模拟jq点击事件
- css3模拟jq点击事件
- css3实现旋转小三角动画
- 关于分别使用CSS3和JQ制作IOS7开关按钮的方法
- CSS3复习——小三角、旋转、过渡
- CSS3做一个三角,并将文字旋转
- css3 360度旋转
- android自定义实现点击底部选择三角号旋转
- 按钮只能点击一次的jq方法
- 图片的每点击一次旋转90度, filter和css3属性
- 关于单行文字,多行文字溢出隐藏时 css jq处理方法 兼容各个浏览器
- jq里面关于单选按钮 type="radio" 判断最优处理方法
- css3.0实现背景旋转的方法
- 关于iPhone的点击事件绑定无效的处理方法
- 瀑布流实现的三种方法js jq css3
- css3、jq、js三种方法实现逐渐消失
- Dreamweaver 快捷菜单命令
- 二级列表
- html5
- diff: /../Podfile.lock: No such file or directory
- Centos 6.5 安装 mysql-5.6.34 (详细图文)
- 关于点击三角丝滑旋转180度css3 jq处理方法
- 数字选择Dialog
- 用runtime中的函数通过key关联对象
- 自定义ScaleLayout (模仿小米相册查看图片效果)(转载自作者 _deadline )
- Java生成验证码
- 你知道反向链接有哪些作用吗?
- hive的自定义函数
- 快速排序算法原理及java递归实现
- [剑指offer学习心得]之:最小的k个数