jquery开关按钮效果

.circular1{
            width: 50px;
            height: 30px;
            border-radius: 16px;
            background-color: #ccc;
            transition: .3s;
            cursor: pointer;
 }
.round-button1{
            width: 30px;
            height: 30px;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 1px 5px rgba(0,0,0,.5);
            transition: .3s;
            position: relative;
            left: 0;
}
.round-button1:hover{
            transform: scale(1.2);
            box-shadow: 0 1px 8px rgba(0,0,0,.5);
}
<div class="circular1">
    <div class="round-button1"></div>
</div>
$(function () {
        $(‘.circular1‘).click(function () {
            var left = $(‘.round-button1‘).css(‘left‘);
            left = parseInt(left);
            if (left == 0) {
                $(‘.round-button1‘).css({‘left‘: ‘22px‘, ‘background-color‘: ‘#F00‘});
                $(this).css({‘background-color‘: ‘#e7e7e7‘, ‘box-shadow‘: ‘0 0 5px #999 inset‘})
            } else {
                $(‘.round-button1‘).css({‘left‘: ‘0‘, ‘background-color‘: ‘#fff‘})

            }
        })
    })

时间: 2024-10-13 16:09:43

jquery开关按钮效果的相关文章

jQuery楼层效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery楼层效果</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script

5种风格的 jQuery 分页效果【附代码】

5种风格的 jQuery 分页效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>jQuery Pagination - jPaginate</title> <meta http-equi

几个比较常用的jQuery交互效果

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">最近做了不少东西,都是比较杂碎的,但是也有一些比较经典jQuery的效果,我把它提炼出来吧,就算做笔记了,以后忘了可以翻阅一下.</span> 1.有的页面很长,当我们好不容易翻到底部的时候或者累死了还没翻到底部就想回到顶部的时候,这时候急切想要一个回到顶部的按钮,这个按钮可

【转】Jquery折叠效果

转自:http://www.cnblogs.com/clc2008/archive/2011/10/25/2223254.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

jquery 滚动效果插件

1.css <style> .fl { float: left; } .slider0 img { display: block; width:100px; padding: 2px; } .slider0 li { background: url("http://www.lampbrother.net/php/statics/images/lamp/php_qiye_bg.png") no-repeat scroll 120px 5px ; color: #000000;

JavaScript之jQuery-5 jQuery 动画效果(隐藏和显示、自定义动画、并发与排列效果)

一.jQuery 隐藏和显示 基本显示.隐藏效果 - show() / hide() - 作用: 通过同时改变元素的宽度和高度来实现显示或隐藏 - 用法: $obj.show(执行时间,回调函数); 执行时间:slow,normal,fast或毫秒数 回调函数:动画执行完毕之后要执行的函数 滑动式动画效果 - slideDown() / slideUp() - 作用: 通过改变高度来实现显示或者隐藏的效果 - 用法同 show() / hidden() 淡入淡出式动画效果 - fadeIn()

基于Bootstrap的jQuery开关按钮组合

Bootstrap是一款由Twitter推出的开源前端开发包,功能非常强大.今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的,看了按钮的主题样式,也都是Bootstrap的样式风格,比较清新和简单.这款jQuery开关按钮可以满足你不同的应用需求,包括样式.大小等. 在线预览   源码下载 实现的代码. html代码: <div class="container"> <div class="row"> <di

分享30个最佳 jQuery Lightbox 效果插件(转载)

您可能还喜欢 60款很酷的 jQuery 幻灯片演示和下载 Web开发者必备的20款超赞jQuery插件 提升你网站水平的 jQuery 插件推荐 12个很棒的学习 jQuery 的网站推荐 分享27款非常棒的 jQuery 表单插件 Lightbox 应该是最流行的图片浏览效果了,常具有功能包括:自动根据窗口的大小缩放图片,模式窗口,幻灯片方式播放,内容预加载,渐变等效果.Web开发者们模仿 Lightbox 开发了各种各样的图片浏览插件,有基于 jQuery 的,有基于 Prototype

今日工作总结:jquery轮转效果的集成与前台页面banner的设计思路总结

今日做了两个项目中的两个问题,现在特来总结一下,以便分享给更多的朋友们. 1.jquery轮转效果的集成 涉及到jquery的不同版本问题,解决办法是在后缀用jQuery代替$.项目地址在:121.40.62.79 可以访问,并通过查看源代码获取到. jquery代码如下: <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type