js按钮切换

function loadEvent(){    $(".JS_tabTit li,.JS_tabTit a").on("click",function(e) {        $(this).addClass("active").siblings().removeClass("active");        var index = $(".JS_tabTit li,.JS_tabTit a").index(this);        $(".JS_tabCon").eq(index).show().siblings().hide();    });    $(".aptitudeStyle li img").each(function() {        $(this).click(function() {            var src = $(this).attr(‘src‘);

            $("body").append(‘<div class="browseImg"></div>‘,‘<div class="bodyBg"></div>‘);            $(".browseImg").append("<img id=‘slin‘ width=‘150‘ height=‘186‘ src=‘"+src+"‘/>");            $("body").css("overflow","hidden");

            $(".bodyBg").click(function() {                $(".browseImg").html("");                $("body").css("overflow","");                $(".browseImg,.bodyBg").remove();            });

        });    });}
.browseImg {   position: fixed;   top: 50%;   left: 50%;   margin: -267px 0 0 -387px;   width: 714px;   height: 494px;   overflow: hidden;   border: 1px solid #666666;   background:#fff;   padding: 20px;   z-index: 999;}.browseImg span {   position: absolute;   top: 0;   right: 0;   display: block;   background:#fff url(../images/icon/pop_close.png) no-repeat center;   width: 25px;   height: 25px;   overflow: hidden;   cursor: pointer;}.browseImg img {   width:100%;   height: 100%;}.bodyBg {   position: fixed;   top:0;   left:0;   width: 100%;   height: 100%;   background:#a0a0a0;   filter:alpha(opacity=60);     -moz-opacity:0.6;     -khtml-opacity: 0.6;     opacity: 0.6;    z-index: 888; }
时间: 2024-08-24 11:22:26

js按钮切换的相关文章

图片切换特效(1):原生JS图片切换效果

转自:http://www.codefans.net/jscss/code/4699.shtml <!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/1999/xhtml">

导航条点击按钮切换效果

<!--[if IE]><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><![endif]--><html xmlns="http://www.w3.org/1999/xhtml"><head>&

JS图片切换效果

源地址:http://www.codefans.net/jscss/code/4699.shtml <!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/1999/xhtml"&g

Android自定义组合控件--底部多按钮切换

效果图: 现在市场上大多数软件都是类似于上面的结构,底部有几个按钮用于切换到不同的界面.基于OOP思想,我想把下面的一整块布局封装成一个类,也就是我们的自定义组合控件-底部多按钮切换布局,我把它叫做BottomLayout 看上面的布局,几个按钮横向排列,我们先看一下布局 最外面LinearLayout 方向 horizontal,然后5个weight相同的RelativeLayout,每个RelativeLayout里面有一个Button(用了显示选中状态)个ImageView(用来显示红点)

初识安卓小程序(点击按钮切换屏幕颜色)

如图,点击按钮就会切换屏幕的颜色 首先,先创建一个安卓项目(我的版本是4.4.2的),名字为"world",当然,也可以别的名称 然后在res文件夹下找到layout文件夹,找到activity_main.xml或fragment_main.xml,在里面输入或拖拽按钮 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="htt

JS按钮控制内容左右滚动

运行效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS按钮控制内容左右滚动</title> <style> *{ padding: 0; margin: 0;} li{ list-style: none;} .clearfix{ *zoom:1;} .clearfix

小白自制按钮切换滚动的走马灯幻灯片脚本

<!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/1999/xhtml"> <head> <meta http-equiv="Content-

关于JS动态切换样式表

最近在项目开发中发现一个很纠结的问题:jquery动态添加的节点无法正常渲染CSS样式,一番百度谷歌后,遍寻未果,后来我索性换一种思路,在前台中定义好CSS样式,然后在动态生成时控制CSS样式的开启和关闭,其实动态开启和关闭CSS样式就一句代码: document.styleSheets[i].disabled=true/false; document.styleSheets是页面中所有用<style></style>标签定义的样式个数,你可以通过document.styleShe

IOS开发中UIBarButtonItem上按钮切换或隐藏实现案例

IOS开发中UIBarButtonItem上按钮切换或隐藏案例实现案例是本文要介绍的内容,这个代码例子的背景是:导航条右侧有个 edit button,左侧是 back button 和 add button. AD:[线下活动]三大新锐HTML 5企业汇聚51CTO—大话移动前端技术 IOS开发中UIBarButtonItem上按钮切换或隐藏案例实现案例是本文要介绍的内容,这个代码例子的背景是:导航条右侧有个 edit button,左侧是 back button 和 add button.代