1.开关灯效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } </style> </head> <body> <input id="i1" type="button" value="开关" /> <div class="c1 hide">假装现在有效果了</div> <script src="jquery-1.12.4.js"></script> <script> $('#i1').click(function () { /* 第一种方法 if($('.c1').hasClass('hide')){ $('.c1').removeClass('hide') }else { $('.c1').addClass('hide') } */ //jquery实现方法 $('.c1').toggleClass('hide') }) </script> </body> </html>
2.模态对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .shade{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,.6) ; z-index: 20; } .modal{ position: fixed; left: 50%; top: 50%; height: 300px; width: 400px; margin-top: -150px; margin-left: -200px; z-index: 30; border: 1px solid #ddd; background-color: white; } . none; } .modal form { position: 200px; width: 229px; border: 1px; margin-left: -115px; margin-top: -100px; } .modal form p { float: right; margin-top: 12px; } .modal form span { right; display: inline-block; height: 18px; width: 170px; background-color: FFEBEB; text-align: center; border: 1px solid ffbdbe; color: e4393c; font-size: 14px; visibility: hidden; } .modal form [type="button"] { position: absolute; bottom: -30px; left: 115px; } .modal form [value="提交"]{ left: 50px; } </style> </head> <body> <div style="width: 300px; margin: 0 auto"> <input type="button" value="添加主机" onclick="return Add();" /> <table style="border: 2px solid #F5F5F5; width: 300px;"> <thead> <tr> <th >主机名</th> <th >IP</th> <th >端口</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td target="host">c1.com</td> <td target="ip">1.1.1.1</td> <td target="port">8888</td> <td onclick="Edit(this);">Edit</td> </tr> <tr> <td target="host">c2.com</td> <td target="ip">1.1.1.1</td> <td target="port">8888</td> <td onclick="Edit(this);">Edit</td> </tr> <tr> <td target="host">c3.com</td> <td target="ip">1.1.1.1</td> <td target="port">8888</td> <td onclick="Edit(this);">Edit</td> </tr> <tr> <td target="host">.com</td> <td target="ip">1.1.1.1</td> <td target="port">8888</td> <td onclick="Edit(this);">Edit</td> </tr> </tbody> </table> </div> <div class="shade hide"></div> <div class="modal hide"> <form action="" method="get"> <p>主机名:<input type="text" id="host" name="host"><br><span></span></p> <p>IP地址:<input type="text" id='ip' name="ip"><br><span></span></p> <p>端口号:<input type="text" id='port' name="port"><br><span></span><br></p> <input type="button" value="提交" onclick="return SubmitForm();"> <input type="button" value="取消" onclick="HideModal();"> </form> </div> <script src="jquery-1.12.4.js"></script> <script> $( () { $("tr:even").css("background-color","#f5f5f5"); }); Edit(ths) { $(".shade,.modal").removeClass("hide"); prevList = $(ths).prevAll(); prevList.each( () { var text = $(this).text(); var target = $(this).attr("target"); $("#"+target).val(text); }); } HideModal() { $(".shade,.modal").addClass("hide"); $(".modal").find("input[type='text']").val(""); Addd = false; } SubmitForm() { var flag = Detection(); try { if (Addd && flag){ $("tbody").append($("tr").last().clone()); $(".modal").find("input[type='text']"). () { var value = $(this).val(); var name = $(this).attr("name"); ($("tr").last().children()). () { if ($(this).attr("target") == name){ $(this).text(value); return } } )}); Addd = ; HideModal(); return ; } }catch (e){} if (flag){ $(".modal").find("input[type='text']"). () { val(); ); $(prevList). name){ $(this).text(value); } } )}); $(".modal,.shade").addClass("hide"); HideModal(); } flag; } Detection() { var flag = true; $(".modal").find("input[type='text']").val(); if (value.length == 0){ $(this).next().next().css("visibility","visible").text("亲,不能为空"); flag = ; ; }else { $(this).); } if ($(this).attr('name') == "host"){ var r = /(\.com)$/if (r.test(value) == ){ $(this).); flag = ; ; } }else if ($(this).attr('name') == "ip"var r2 = /^(([0-2]?[0-9][0-9]?)\.){3}([0-2]?[0-9][0-9]?)$/if (r2.test(value) == ; } }if ($(this).attr('name') == "port"var r3 = /^([0-9]{1,5})$/if ((r3.test(value) == false) || (value > 65535)){ $(this).); } }); flag; } Add() { Addd = ; $(".shade,1)">); } </script> </body> </html>
3.点击菜单显示对应的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ height: 38px; background-color: eeeeee; line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{ left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .content{ min-height: 100px; border: 1px solid eeeeee; } </style> </head> <body> <div style="width: 700px;margin:0 auto"> <div class="menu"> <div class="menu-item active" a="1">菜单一</div> <div class="menu-item" a="2">菜单二</div> <div class="menu-item" a="3">菜单三</div> </div> <div class="content"> <div b="1">内容一</div> <div class="hide" b="2">内容二</div> <div class="hide" b="3">内容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(点击menu-item,加上active,同时兄弟标签去掉active $(this).addClass('active').siblings().removeClass('active'); 获取a的属性值2 var target = $(this).attr('a'); $('.content').children('[b="'+target+'"]').removeClass('hide').siblings().addClass('hide' '[b="'+target+'"]' 字符串的拼接,找到content儿子里面属性等于2的,删除掉hide,同时兄弟加上hide }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> . () { $(this).addClass('active').siblings().removeClass('active'eq($(this).index())是获取menu-item的索引 $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide'); }) </script> </body> </html> 索引菜单栏.html
4.编辑功能
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .edit-mode{ background-color: b3b3b3; padding: 8px; text-decoration: none; color:editing{ background-color: f0ad4e; } </style> </head> <body> <div style="padding: 20px"> <input type="button" onclick="CheckAll('#edit_mode','#tb1');" value="全选" /> <input type="button" onclick="CheckReverse('#edit_mode','#tb1');" value="反选" /> <input type="button" onclick="CheckCancel('#edit_mode','#tb1');" value="取消" /> <a id="edit_mode" class="edit-mode" href="javascript:void(0);" onclick="EditMode(this,'#tb1');">进入编辑模式</a> </div> <table border="1"> <thead> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> <th>状态</th> </tr> </thead> <tbody id="tb1"> <tr> <td><input type="checkbox" /></td> <td edit="true">v1</td> <td>v11</td> <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在线</td> </tr> <tr> <td><input type="checkbox" /></td> <td edit="true">v1</td> <td>v11</td> <td edit="true" edit-type="select" sel-val="2" key="STATUS">下线</td> </tr> <tr> <td><input type="checkbox" /></td> <td edit="true">v1</td> <td>v11</td> <td edit="true" edit-type="select" sel-val="1" key="STATUS">在线</td> </tr> </tbody> </table> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> 监听是否已经按下control键 */ window.globalCtrlKeyPress = ; window.onkeydown = (event){ if(event && event.keyCode == 17){ window.globalCtrlKeyPress = ; } }; window.onkeyup = ; } }; 按下Control,联动表格中正在编辑的select */ MultiSelect(ths){ if(window.globalCtrlKeyPress){ var index = $(ths).parent().index(); var value = $(ths).val(); $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").(){ $(this).parent().parent().children().eq(index).children().val(value); }); } } </script> <script type="text/javascript"> $((){ BindSingleCheck('#edit_mode','#tb1'); }); function BindSingleCheck(mode, tb){ $(tb).find(':checkbox').bind('click',1)">(){ var $tr = $(this).parent().parent(); if($(mode).hasClass('editing')){ if($(this).prop('checked')){ RowIntoEdit($tr); }{ RowOutEdit(); } } }); } function CreateSelect(attrs,csses,option_dict,item_key,item_value,1)">current_val){ var sel= document.createElement('select'); $.each(attrs,1)">function(k,1)">v){ $(sel).attr(k,1)">v); }); $.each(csses,1)">v){ $(sel).css(k,1)">each(option_dict,1)">v){ var opt1=document.createElement('option'); var sel_text = v[item_value]; var sel_value = v[item_key]; if(sel_value==current_val){ $(opt1).text(sel_text).attr('value',sel_value).attr('text',sel_text).attr('selected',1)">true).appendTo($(sel)); }{ $(opt1).text(sel_text).attr('value',sel_text).appendTo($(sel)); } }); sel; } STATUS = [ {'id': 1,'value': "在线"},1)"> {'id': 2,'value': "下线"} ]; BUSINESS =} ]; function RowIntoEdit(){ $tr.children().if($(this).attr('edit') == "true"){ if($(this).attr('edit-type') == "select"){ var select_val = $(this).attr('sel-val'); var global_key = $(this).attr('global-key'var selelct_tag = CreateSelect({"onchange": "MultiSelect(this);"},{},window[global_key],'id','value',1)"> select_val); $(this).html(selelct_tag); }{ var orgin_value = $(this).var temp = "<input value='"+ orgin_value+"' />"; $(this).html(temp); } } }); } function RowOutEdit(var new_val = $(this).children(':first').var new_text = $(this).children(':first').find("option[value='"+new_val+"']").text(); $(this).attr('sel-val',1)"> new_val); $(this).text(new_text); }var orgin_value = $(this).children().first().val(); $(this).text(orgin_value); } } }); } function CheckAll(mode,1)"> tb){ )){ $(tb).children().(){ var tr = $(this); var check_box = tr.children().first().find(':checkbox'if(check_box.prop('checked')){ }{ check_box.prop('checked',1)">); RowIntoEdit(tr); } }); }{ $(tb).find(':checkbox').prop('checked',1)">); } } function CheckReverse(mode,1)"> tb){ (){ )){ check_box.prop('checked',1)">); RowOutEdit(tr); }); RowIntoEdit(tr); } }); }{ $(tb).children().); } }); } } function CheckCancel(mode,1)">)){ $(tb).children().); RowOutEdit(tr); }{ } }); }{ $(tb).find(':checkbox').prop('checked',1)">function EditMode(ths,1)">if($(ths).hasClass('editing')){ $(ths).removeClass('editing'); $(tb).children().)){ RowOutEdit(tr); }{ $(ths).addClass('editing')){ RowIntoEdit(tr); }{ } }); } } </script> </body> </html>
5.模态对话框添加删除功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> . fixed; top: 50%; left: 50%; width: 500px; height: 400px; margin-left: -250px; margin-top: -250px; background-color: eeeeee; z-index: 10shadow{ position: fixed; top: 0; left: 0; opacity: 0.6; background-color: black; z-index: 9; } </style> </head> <body> <a onclick="addElement();">添加</a> <table border="1" id="tb"> <tr> <td target="hostname">1.1.1.11</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.12</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.13</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.14</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="del">删除</a> </td> </tr> </table> <div class="modal hide"> <div> <input name="hostname" type="text" /> <input name="port" type="text" /> <input name="ip" type="text" /> </div> <div> <input type="button" value="取消" onclick="cancelModal();" /> <input type="button" value="确定" onclick="confirmModal();" /> </div> </div> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script> <script> $('.del').click( () { $(this).parent().parent().remove(); }); confirmModal() { var tr = document.createElement('tr'var td1 = document.createElement('td'); td1.innerHTML = "11.11.11.11"; var td2 = document.createElement('td'); td2.innerHTML = "8001"; $(tr).append(td1); $(tr).append(td2); $('#tb').append(tr); $(".modal,.shadow").addClass('hide'); $('.modal input[type="text"]').each(function () { // // var temp = "<td>..." // // // // }) } addElement() { $(".modal,.shadow").removeClass('hide'); } cancelModal() { $(".modal,1)">); $('.modal input[type="text"]').val(""); } $('.edit').click((){ $(".modal,1)"> this var tds = $(this).parent().prevAll(); tds. 获取td的target属性值 var n = $(this).attr('target' 获取td中的内容 var a1 = '.modal input[name="'; var a2 = '"]'var temp = a1 + n + a2; $(temp).val(text); }); var port = $(tds[0]).text(); // var host = $(tds[1]).text(); // // $('.modal input[name="hostname"]').val(host); // $('.modal input[name="port"]').val(port); // 循环获取tds中内容 // 获取 <td>内容</td> 获取中间的内容 // 赋值给input标签中的value }); </script> </body> </html>
6.点赞
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ padding: 50px; border: 1px solid dddddd; } .item{ position: relative; width: 30px; } </style> </head> <body> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="item"> <span>赞</span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.item').click( () { addFavor(this); }) addFavor(self) { var fontSize = 15var top = 0var right= 0var opacity = 1; var tag = document.createElement('span'); $(tag).text('+1'); $(tag).css('color','green'); $(tag).css('position','absolute'); $(tag).css('fontSize',fontSize + 'px'); $(tag).css('right',right + 'px'); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity + 'px'); $(self).append(tag); var obj = setInterval( () { fontSize = fontSize + 10; top = top - 10; right = right - 10; opacity = opacity - 0.1; $(tag).css('fontSize',1)">); $(tag).css('right',1)">); $(tag).css('top',1)">); $(tag).css('opacity',1)">opacity); if(opacity < 0 ){ clearInterval(obj); $(tag).remove(); } },40); } </script> </body> </html>
7.随鼠标移动的框
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> <div id="title" style="background-color: black;height: 40px;"></div> <div style="height: 300px;"></div> </div> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> $((){ $('#title').mouseover((){ $(this).css('cursor','move'); }); $("#title").mousedown((e){ console.log($(this).offset()); var _event = e || window.event; var ord_x = _event.clientX; var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; $('#title').on('mousemove',1)">(e){ var _new_event = e || window.event; var new_x = _new_event.clientX; var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x); var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px'); $(this).parent().css('top',y+'px'); }) }); $("#title").mouseup((){ $("#title").off('mousemove'); }); }) </script> </body> </html>
8.表单验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .error{ color: red; } </style> </head> <body> <form id="f1" action="s5.html" method="POST"> <div><input name="n1" tex = "用户名" type="text" /></div> <div><input name="n2" tex = "密码" type="password" /></div> <div><input name="n3" tex = "邮箱" type="text" /></div> <div><input name="n4" tex = "端口" type="text" /></div> <div><input name="n5" tex = "IP" type="text" /></div> <input type="submit" value="提交" /> </form> <script src="jquery-1.12.4.js"></script> <script> 当页面框架加载完毕后,自动执行 // $(function(){ // $.Login('#f1') // }); // $( 当页面所有元素完全加载完毕后,执行 $(':submit').click( () { $('.error').remove(); ; $('#f1').find('input[type="text"],input[type="password"]').var v = $(this).var n = $(this).attr('tex'); if(v.length <= 0){ flag = ); tag.className = "error"; tag.innerHTML = n + "必填"; $(this).after(tag); return false; } }); flag; }); }); </script> </body> </html>
9.轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } ul{ list-style:out{ width: 730px; height: 454px; margin: 50px auto; position: relative; } .out .img li{ position: absolute; left: 0; } .out .num{ position: absolute; left:0; bottom: 20px; text-align: center; font-size: 0; width: 100%btn{ position: absolute; top:50%; margin-top: -30px; width: 30px; height: 60px; background-color: aliceblue; color: black; text-align: center; line-height: 60px; font-size: 40px; display: none; } .out .num li{ width: 20px; height: 20px; background-color: black; color: fff; text-align: 20px; border-radius: 60%; display: inline; font-size: 18px; margin: 0 10px; cursor: pointer; } .out .num li. red; } .out .left{ left: 0right{ right: 0; } .out:hover .btn{ display: block; color: white; font-weight: 900 black; opacity: 0.8; cursor:out img { height: 100%; } </style> </head> <body> <div class="out"> <ul class="img"> <li><a href="#"><img src="images/1.jpg" alt=""></a></li> <li><a href="#"><img src="images/2.jpg" alt=""></a></li> <li><a href="#"><img src="images/3.jpg" alt=""></a></li> <li><a href="#"><img src="images/4.jpg" alt=""></a></li> <li><a href="#"><img src="images/5.jpg" alt=""></a></li> </ul> <ul class="num"> <!--<li class="active">1</li>--> <!--<li>2</li>--> <!--<li>3</li>--> <!--<li>4</li>--> <!--<li>5</li>--> </ul> <div class="left btn"><</div> <div class="right btn">></div> </div> <script src="jquery-1.12.4.js"></script> <script> $(var size=$(".img li").size(); for (var i= 1;i<=size;i++var li="<li>"+i+"</li>"; $(".num").append(li); } $(".num li").eq(0).addClass("active"); $(".num li").mouseover((){ $(this).addClass("active").siblings().removeClass("active"); var index=$(this).index(); i=index; $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000); }); i=0; var t=setInterval(move,1500); move(){ i++if(i==size){ i=0; } $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); } moveL(){ i--if(i==-1){ i=size-1); } $(".out").hover((){ clearInterval(t); },1)">(){ t=setInterval(move,1)">); }); $(".out .right").click((){ move() }); $(".out .left").click((){ moveL() }) }); </script> </body> </html>
10.返回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 23px; background-color: 2F4F4F; color: white; position: fixed; right: 18px; bottom: 18px; } .divT:hover{ cursor:hide { display: none; } </style> </head> <body> <div class="divH"></div> <div class="divT hide" onclick="ReturnTop();"><strong>返回顶部</strong></div> <script src="jquery-1.12.4.js"></script> <script> window.onscroll = var current = $(window).scrollTop(); if (current > 180){ $(".divT").removeClass("hide" { $(".divT").addClass("hide"); } }; ReturnTop() { $(window).scrollTop(0); } </script> </body> </html>
11.左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ height: 600px; width: 30%; background-color: 2F4F4F; left; } .title{ line-height: 50px; color: ddd; } .title:hover{ cursor: pointer; color: lightcyan; font-size: 18px; } .hide{ display: none; } </style> </head> <body> <div class="outer"> <div class="menu"> <div class="item"> <div class="title" onclick="Show(this);">菜单一</div> <div class="con"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="title" onclick="Show(this);">菜单二</div> <div class="con hide"> <div>222</div> <div>222</div> <div>222</div> </div> </div> <div class="title" onclick="Show(this);">菜单三</div> <div class="con hide"> <div>333</div> <div>333</div> <div>333</div> </div> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> Show(self) { $(self).next().removeClass("hide").parent().siblings().children(".con").addClass("hide"); } </script> </body> </html>
12.显示和隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--1 隐藏与显示--> <!--2 淡入淡出--> <!--3 滑动--> <!--4 效果-回调:每一个动画执行完毕之后所能执行的函数方法或者所能做的一件事--> <p>hello</p> <button id="hide">隐藏</button> <button id="show">显示</button> <button id="toggle">隐藏/显示</button> <script src="jquery-1.12.4.js"></script> <script> $(document).ready((){ $("#hide").click((){ $("p").hide(1000); }); $("#show").click((){ $("p").show(1000); }); 用于切换被选元素的 hide() 与 show() 方法。 $("#toggle").click((){ $("p").toggle(2000); }); }); </script> </body> </html>
13.滑动和隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> flipshow,#content,#fliphide,#toggle{ padding: 5px; text-align: center; background-color: blueviolet; border:solid 1px red; } content{ padding: 50px; display: none; } </style> </head> <body> <div id="flipshow">出现</div> <div id="fliphide">隐藏</div> <div id="toggle">toggle</div> <div id="content">helloworld</div> <script src="jquery-1.12.4.js"></script> <script> $(document).ready((){ $("#flipshow").click((){ $("#content").slideDown(1000); }); $("#fliphide").click((){ $("#content").slideUp(1000); }); $("#toggle").click((){ $("#content").slideToggle(1000); }) }); </script> </body> </html>
14.添加与删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="outer"> <div class="section"> <div class="icons" style="display: inline-block"> <a onclick="Add(this);"><button>+</button></a> </div> <div class="inputs" style="display: inline-block"> <input type="checkbox"> <input type="text" value="IP"> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> Add(self) { $(self).parentsUntil("outer").clone().find("a").html("<button>-</button>").attr("onclick","Remove(this);").end().eq(1).appendTo(".outer" Remove(self) { $(self).parentsUntil("outer").eq(1).remove(); } </script> </body> </html>
15.商品放大镜
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width"> <meta http-equiv="X-UA-Compatible" content="IE=8"> <title>购物商城</title> <style> *{ margin: 0; padding: 0; } .outer{ position:relative; width:350px; height:350px; border:1px solid black; } .outer .small-box{ position: relative; z-index: 1; } .outer .small-box .mark{ position: absolute; display: block; width: 350px; height: 350px; background-color: fff; filter: alpha(opacity=0); opacity: 0; z-index: 10float-box{ display: none; width: 175px; height: 175px; position: absolute; background: DAEEFC; filter: alpha(opacity=40); opacity: 0.4; } .outer .big- absolute; top: 0; left: 351px; width: 350px; overflow: hidden; border: 1px solid transparent; z-index: 1box img{ position: absolute; z-index: 5 } </style> </head> <body> <div class="outer"> <div class="small-box"> <div class="mark"></div> <div class="float-box" ></div> <img width="350" height="350" src="fanye.jpg"> </div> <div class="big-box"> <img width="900px" height="900px" src="fanye.jpg" > </div> </div> <script src="jquery-1.12.4.js"></script> <script> $((){ $(".mark").mouseover( () { $(".float-box").css("display","block"); $(".big-box").css("display",1)">); }); $(".mark").mouseout(); }); $(".mark").mousemove( (e) { var _event = e || window.event; 兼容多个浏览器的event参数模式 var float_box_width = $(".float-box")[0].offsetWidth; var float_box_height = $(".float-box")[0].offsetHeight;175,175 var float_box_width_half = float_box_width / 2var float_box_height_half = float_box_height/ 2;87.5,87.5 var small_box_width = $(".outer")[0].var small_box_height = $(".outer")[0].offsetHeight;360,360 var mouse_left = _event.clientX - float_box_width_half; var mouse_top = _event.clientY - float_box_height_half; if (mouse_left < 0) { mouse_left = 0; } if (mouse_left > small_box_width - float_box_width) { mouse_left = small_box_width - float_box_width; } if (mouse_top < 0) { mouse_top = 0if (mouse_top > small_box_height - float_box_height) { mouse_top = small_box_height - float_box_height; } $(".float-box").css("left",mouse_left + "px"); $(".float-box").css("top",mouse_top + "px"); var percentX = ($(".big-box img")[0].offsetWidth - $(".big-box")[0].offsetWidth) / (small_box_width - float_box_width); var percentY = ($(".big-box img")[0].offsetHeight - $(".big-box")[0].offsetHeight) / (small_box_height - float_box_height); console.log($(".big-box img")[0].offsetWidth,$(".big-box")[0].offsetWidth,small_box_width,1)">float_box_width) console.log(percentX,1)">percentY) $(".big-box img").css("left",-percentX * mouse_left + "px"); $(".big-box img").css("top",-percentY * mouse_top + "px") }) }) </script> </body> </html>
16.商品分类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *none; } .header-nav { height: 39px; background: c9033b; header-nav .bg{ background: header-nav .nav-allgoods .menuEvent { display: block; height: 39px; line-height: 39px; text-decoration: none; color: center; font-weight: bold; font-family: 微软雅黑; color: fff; width: 100px; } .header-nav .nav-allgoods .menuEvent .catName { height: 39px; font-size: 15px; } .header-nav .nav-allmenu a { display: inline- 39px; vertical-align: top; padding: 0 15px; text-decoration:fff; left; } .menu a{ color:656565; header-menu .menu-catagory{ position: absolute; background-color: fff; border-left:1px solid fff; height: 316px; width: 230px; z-index: 4; header-menu .menu-catagory .catagory { border-left:4px solid 104px; border-bottom: solid 1px eaeaea; header-menu .menu-catagory .catagory:hover { height: 102px; border-left:4px solid c9033b; border-bottom: solid 1px bcbcbc; border-top: solid 1px bcbcbc; header-menu .menu-content .item{ margin-left:230px; position:absolute; background-color:white; height:314px; width:500px; z-index:4left; border: solid 1px bcbcbc; border-left:0; box-shadow: 1px 1px 5px 999; } </style> </head> <body> <div class="pg-header"> <div class="header-nav"> <div class="container narrow bg"> <div class="nav-allgoods left"> <a id="all_menu_catagory" href="#" class="menuEvent"> <b class="catName">全部商品分类</b>> <span class="arrow" style="display: inline-block;vertical-align: top;"></span> </a> </div> </div> </div> <div class="header-menu"> <div class="container narrow hide"> <div id="nav_all_menu" class="menu-catagory"> <div class="catagory" float-content="one"> <div class="title">家电</div> <div class="body"> <a href="#">空调</a> </div> </div> <div float-content="two"> <div class="title">床上用品</div> <div class="body"> <a href="http://www.baidu.com">床单</a> </div> </div> <div float-content="three"> <div class="title">水果</div> <div class="body"> <a href="#">橘子</a> </div> </div> </div> <div id="nav_all_content" class="menu-content"> <div class="item hide" float-id="one"> <dl> <dt><a href="#" class="red">厨房用品</a></dt> <dd> <span>| <a href="#" target="_blank" title="勺子">勺子</a> </span> </dd> </dl> <class="red">厨房用品</a></dt> <dd> <span>| <a href="#" target="_blank" title="菜刀">菜刀</a> </span> </dd> </class="red">厨房用品</a></dt> <dd> <span>| <a href="#">菜板</a> </span> </dd> </class="red">厨房用品</a></dt> <dd> <span>| <a href="#" target="_blank" title="碗">碗</a> </span> </dd> </dl> </div> <div float-id="two"> <class="red">床上用品</a></dt> <dd> <span>| <a href="#" target="_blank" title="">枕头</a> </span> </dd> </class="red">床上用品</a></dt> <dd> <span>| <a href="#" target="_blank" title="角阀">夏凉被</a> </span> </dd> </class="red">床上用品</a></dt> <dd> <span>| <a href="#" target="_blank" title="角阀">嘿嘿嘿</a> </span> </dd> </dl> </div> <div float-id="three"> <class="red">厨房用品</a></dt> <dd> <span>| <a href="#" target="_blank" title="角阀">微波炉</a> </span> </dd> </class="red">厨房用品</a></dt> <dd> <span>| <a href="http://www.meilele.com/category-jiaofa" target="_blank" title="角阀">金菜刀</a> </span> </dd> </dl> </div> </div> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> () { Change("#all_menu_catagory","#nav_all_menu","#nav_all_content") }); function Change(menuF,menuS,1)">menuT) { $(menuF).bind({ "mouseover": () { $(menuS).parent().removeClass("hide"); },"mouseout": () { $(menuS).parent().addClass("hide"); } }); $(menuS).children(). () { $(menuS).parent().removeClass("hide"$item = $(menuT).find('[float-id="' + $(this).attr("float-content") + '"]'); $item.removeClass("hide").siblings().addClass("hide"); },1)"> () { $(menuS).parent().addClass("hide"); $(menuT).parent().addClass("hide"); } }); $(menuT).children().); $(this).removeClass("hide"); $(this).addClass("hide"); } }) } </script> </body> </html>