当前位置：文档之家 › 苏宁易购-JQuery鼠标滑动到图片上图片文字显示

苏宁易购-JQuery鼠标滑动到图片上图片文字显示

  • 格式：docx
  • 大小：222.35 KB
  • 文档页数：8

下载文档原格式

  / 8

合集下载

javascript实现鼠标移到Image上方时显示文字效果的方法

javascript实现鼠标移到Image上方时显示文字效果的方法

javascript实现⿏标移到Image上⽅时显⽰⽂字效果的⽅法本⽂实例讲述了javascript实现⿏标移到Image上⽅时显⽰⽂字效果的⽅法。

分享给⼤家供⼤家参考。

具体如下：先看⼀下运⾏效果截图：具体代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery⿏标移到Image上⽅时显⽰⽂字效果</title><style>.bot .sendList {margin-right:6px}.explore {width:936px;margin:20px auto 0;overflow:hidden;position:relative;font-size:0px;}.explore li {width:160px;height:150px;overflow:hidden;display:inline-block;position:relative;}.explore li {*display:inline;}.explore li .wqPic {width:160px;height:150px;overflow:hidden;}.explore .wqLink {display:block;width:160px;height:150px;color:#FFF;text-align:center;font-family:"微软雅⿊"}.explore .wqItem .wqName {position:absolute;bottom:0;left:0;width:130px;height:40px;line-height:40px;font-size:16px;overflow:hidden;padding:0 10px;}.explore .wqItem .bg {background:#333;opacity:0.8;filter:alpha(opacity = 80);position:absolute;bottom:0;left:0;width:150px;height:40px;}.explore .wqLink:hover {cursor:pointer;text-decoration:none;}.explore .wqLink:hover .wqItem .bg {height:150px;}.explore .wqLink:hover .wqItem .wqName, .explore .detail {visibility:hidden;}.explore .wqLink:hover .detail {visibility:visible;}.explore .detail {background:#000;position:absolute;top:128px;left:0;width:160px;line-height:22px;height:22px;font-size:12px;filter:alpha(opacity = 65);}.explore .detail .wqName {font-size:16px;padding:0 10px;line-height:22px;}.explore .detail .info {margin-top:10px;}</style></head><body><div id="topWrap"><div class="wqSquare"><div class="explore"><ul><li> <a onmousedown="MI.Bos('wQBtnBigImgQun')" href="#" class="wqLink"><div class="wqItem"> <img src="///file_images/article/201508/201587150400220.jpg" class="wqPic" /> </div> <div class="detail"><div class="wqName">天天好⼼情</div></div></a> </li><li> <a onmousedown="MI.Bos('wQBtnBigImgQun')" href="#" class="wqLink"><div class="wqItem"> <img src="///file_images/article/201508/201587150400220.jpg" class="wqPic" /> </div> <div class="detail"><div class="wqName">天天好⼼情</div></div></a> </li></ul></div></div></div></body></html>希望本⽂所述对⼤家的javascript程序设计有所帮助。

鼠标移到图片上变大显示而不是放大镜效果

鼠标移到图片上变大显示而不是放大镜效果

⿏标移到图⽚上变⼤显⽰⽽不是放⼤镜效果ToopTip.js:复制代码代码如下:function getViewportHeight() {if (window.innerHeight!=window.undefined) return window.innerHeight;if (patMode=='CSS1Compat') return document.documentElement.clientHeight;if (document.body) return document.body.clientHeight;return window.undefined;}function getViewportWidth() {if (window.innerWidth!=window.undefined) return window.innerWidth;if (patMode=='CSS1Compat') return document.documentElement.clientWidth;if (document.body) return document.body.clientWidth;return window.undefined;}/*** Gets the real scroll top*/function getScrollTop() {if (self.pageYOffset) // all except Explorer{return self.pageYOffset;}else if (document.documentElement && document.documentElement.scrollTop)// Explorer 6 Strict{return document.documentElement.scrollTop;}else if (document.body) // all other Explorers{return document.body.scrollTop;}}function getScrollLeft() {if (self.pageXOffset) // all except Explorer{return self.pageXOffset;}else if (document.documentElement && document.documentElement.scrollLeft)// Explorer 6 Strict{return document.documentElement.scrollLeft;}else if (document.body) // all other Explorers{return document.body.scrollLeft;}}/*[html]渐变的弹出图⽚使⽤⽅法：将ToolTip.js包含在⽹页body的结束标签后调⽤⽅法：[code]<a href="pages.jpg" target='_blank' onMouseOver="toolTip('<imgsrc=http://zhouzh:90/templet/T_yestem_channel/pages_small.jpg>')" onMouseOut="toolTip()"><img src='pages_small.jpg' border=0 width=30 height=20 align="absmiddle" title="点击看⼤图"></a>必须CSS样式复制代码代码如下:.trans_msg{filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);}*///--初始化变量--var rT=true;//允许图像过渡var bT=true;//允许图像淡⼊淡出var tw=150;//提⽰框宽度var endaction=false;//结束动画var ns4 = yers;var ns6 = document.getElementById && !document.all;var ie4 = document.all;offsetX = 10;offsetY = 20;var toolTipSTYLE="";function initToolTips(){tempDiv = document.createElement("div");tempDiv.id = "toolTipLayer";tempDiv.style.position = "absolute";tempDiv.style.display = "none";document.body.appendChild(tempDiv);if(ns4||ns6||ie4){if(ns4) toolTipSTYLE = document.toolTipLayer;else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;if(ns4) document.captureEvents(Event.MOUSEMOVE);else{toolTipSTYLE.visibility = "visible";toolTipSTYLE.display = "none";}document.onmousemove = moveToMouseLoc;}}function toolTip(msg, fg, bg){try {if(toolTip.arguments.length < 1) // hide{if(ns4){toolTipSTYLE.visibility = "hidden";}else{//--图象过渡，淡出处理--if (!endaction) {toolTipSTYLE.display = "none";}if (rT) document.all("msg1").filters[1].Apply();if (bT) document.all("msg1").filters[2].Apply();document.all("msg1").filters[0].opacity=0;if (rT) document.all("msg1").filters[1].Play();if (bT) document.all("msg1").filters[2].Play();if (rT){if (document.all("msg1").filters[1].status==1 || document.all("msg1").filters[1].status==0){toolTipSTYLE.display = "none";}}if (bT){if (document.all("msg1").filters[2].status==1 || document.all("msg1").filters[2].status==0){toolTipSTYLE.display = "none";}}if (!rT && !bT) toolTipSTYLE.display = "none";//----------------------}}else // show{if(!fg) fg = "#777777";if(!bg) bg = "#eeeeee";var content ='<table id="msg1" name="msg1" border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '" class="trans_msg"><td>' + '<table border="1" cellspacing="2" cellpadding="3" bgcolor="' + bg +'"><td><font face="Arial" color="' + fg +'" size="-2">' + msg +'</font></td></table></td></table>';if(ns4){toolTipSTYLE.document.write(content);toolTipSTYLE.document.close();toolTipSTYLE.visibility = "visible";}if(ns6){document.getElementById("toolTipLayer").innerHTML = content;toolTipSTYLE.display='block'}if(ie4){document.all("toolTipLayer").innerHTML=content;toolTipSTYLE.display='block'//--图象过渡，淡⼊处理--var cssopaction=document.all("msg1").filters[0].opacitydocument.all("msg1").filters[0].opacity=0;if (rT) document.all("msg1").filters[1].Apply();if (bT) document.all("msg1").filters[2].Apply();document.all("msg1").filters[0].opacity=cssopaction;if (rT) document.all("msg1").filters[1].Play();if (bT) document.all("msg1").filters[2].Play();//----------------------}}} catch(e) {}}function moveToMouseLoc(e){var scrollTop = getScrollTop();var scrollLeft = getScrollLeft();if(ns4||ns6){x = e.pageX + scrollLeft;y = e.pageY - scrollTop;}else{x = event.clientX + scrollLeft;y = event.clientY;}if (x-scrollLeft > getViewportWidth() / 2) {x = x - document.getElementById("toolTipLayer").offsetWidth - 2 * offsetX;}if ((y+document.getElementById("toolTipLayer").offsetHeight+offsetY)>getViewportHeight()) {y = getViewportHeight()-document.getElementById("toolTipLayer").offsetHeight-offsetY;}toolTipSTYLE.left = (x + offsetX)+'px';toolTipSTYLE.top = (y + offsetY + scrollTop)+'px';return true;}initToolTips();主页⾯:引⼊index.css复制代码代码如下:<link href="css/index.css" rel="stylesheet" type="text/css" /><body style="text-align:center"><div class="latestWeb"><ul><li class=""><div style="width:128px; height:126px"><a href="/" target="_blank"><imgsrc='images/2009511956153474660_small.jpg' onMouseOver="toolTip('<img src=images/2009511956153474660.jpg>')" onMouseOut="toolTip()"></a></div></li><li class=""><div style="width:128px; height:126px"><a href="/" target="_blank"><imgsrc='images/2009551813457815940_small.jpg' onMouseOver="toolTip('<img src=images/2009551813457815940.jpg>')" onMouseOut="toolTip()"></a></div></li></ul></div>引⼊ToopTip.js复制代码代码如下:<script language="javascript" src="js/ToolTip.js"></script></body></html>index.css:复制代码代码如下:/*⾸页*/html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/body{ font:12px/22px "宋体"; word-break:break-all; text-align:left; background:#C0C0C0; color:#4E4E4E;}ul,li{ list-style:none;}a{ color:#333; text-decoration:none;}a:hover{ color:#ff722d; text-decoration:none;}img{ border:0;}a img,a:hover img{ border:0;}.latestWeb{ width:980px; margin:10px auto 0;}.latestWeb ul{ overflow:hidden; _height:1%;}.latestWeb li{ float:left; border:1px solid #EBEAEA; width:150px; padding:10px; margin:14px 14px 0 0; }.trans_msg{ filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);} div.bodycontent{font-family:Arial, Helvetica, sans-serif;padding:0 10px 10px 13px;color:#555;line-height:22px;text-align:justify;text-justify:inter-ideograph;}div.bodycontent ul{margin-left:0px}。

jquery实现鼠标滑过显示提示框的方法

jquery实现鼠标滑过显示提示框的方法

jquery实现⿏标滑过显⽰提⽰框的⽅法本⽂实例讲述了jquery实现⿏标滑过显⽰提⽰框的⽅法。

分享给⼤家供⼤家参考。

具体如下：⼀、jquery⿏标滑过显⽰提⽰框实例1、效果图2、实现代码 ( 需要⾃⾏添加 jquery.js、按钮图⽚、提⽰框图⽚ )HTML 代码复制代码代码如下:<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Animated Menu Hover 1</title><script type="text/javascript" src="jquery。

js"></script><script type="text/javascript">$(document).ready(function(){$(".menu li").hover(function() {$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");}, function() {$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");});});</script><style type="text/css">body {margin: 10px auto;width: 570px;font: 75%/120% Arial, Helvetica, sans-serif;}.menu {margin: 100px 0 0;padding: 0;list-style: none;}.menu li {padding: 0;margin: 0 2px;float: left;position: relative;text-align: center;}.menu a {padding: 14px 10px;display: block;color: #000000;width: 144px;text-decoration: none;font-weight: bold;background: url('背景图⽚1') no-repeat center center;}.menu li em {background: url('背景图⽚2') no-repeat;width: 180px;height: 45px;position: absolute;top: -85px;left: -15px;text-align: center;padding: 20px 12px 10px;font-style: normal;z-index: 2;display: none;}</style></head><body><ul class="menu"><li><a href="https://">Web Designer Wall</a><em>A wall of design ideas, web trends, and tutorials</em></li><li><a href="https://">Best Web Gallery</a><em>Featuring the best CSS and Flash web sites</em></li><li><a href="https://">N.Design Studio</a><em>Blog and design portfolio of WDW designer, Nick La</em></li></ul></body></html>⼆、jquery⿏标滑过显⽰提⽰框实例⼆⿏标划过⽤户名时，在⿏标右下⾓显⽰div展⽰⽤户资料这个效果1、效果图2、实现⽅式⽆⾮就三⼤块，⼀个是div的定位，这个是该效果的主要难点；⼆个是通过ajax异步加载数据；第三个就是要⽤到两个js属性onmouseover和onmouseout，即⿏标经过和⿏标离开。

鼠标滑过小图显示大图预览效果(html代码,css样式,javascript)

鼠标滑过小图显示大图预览效果(html代码,css样式,javascript)
必须CSS样式
.trans_msg
{
filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);
}
*/
//--初始化变量--
var rT=true;//允许图像过渡
<div class="latestWeb">
<ul>
<li class="">
<div style="width:90px;height:65px;"><a href=""><img src="/js_img/8-24/images/01.jpg" width=130px height=65px onMouseOver="toolTip('<img src=/js_img/8-24/images/01.jpg>')" onMouseOut="toolTip()"></a></div>
{
return document.documentElement.scrollLeft;
}
else if (document.body) // all other Explorers
{
return document.body.scrollLeft;
}
}
/*
渐变的弹出图片
使用方法：
将js包含在网页body的结束标签后
<!--把下面代码加到<head>与</head>之间-->

jquery实现鼠标移入移出切换图片

jquery实现鼠标移入移出切换图片

jquery实现⿏标移⼊移出切换图⽚
在jquery中，可以使⽤mouseover和mouseout事件来实现⿏标移⼊移出图⽚时，改变图⽚的地址，从⽽实现图⽚的切换。

下⾯举例讲解jquery实现⿏标移⼊移出切换图⽚。

1.新建⼀个html⽂件，命名为test.html，⽤于讲解jquery实现⿏标移⼊移出切换图⽚。

2.在test.html⽂件内，使⽤img标签创建⼀张图⽚，⽤于测试。

3.在test.html⽂件内，设置img标签的id为myimg，⽤于下⾯获得img对象。

4.在js标签中，使⽤ready()⽅法在页⾯加载完成时，执⾏function⽅法，在function⽅法内，通过id获得img对象，使⽤on()⽅法给图⽚绑定事件。

5.在on()⽅法内，使⽤mouseover事件实现在⿏标移⼊图⽚时，通过attr()⽅法改变图⽚的路径；使⽤mouseout事件实现在⿏标移出图⽚时，通过attr()⽅法再次改变图⽚的路径，从⽽实现图⽚的切换。

查看效果：
总结
1.使⽤img标签创建⼀张图⽚，⽤于测试。

2.在js中，使⽤on()⽅法给图⽚绑定事件，在on()⽅法内，使⽤mouseover事件实现在⿏标移⼊图⽚时，通过attr()⽅法改变图⽚的路径；使⽤mouseout事件实现在⿏标移出图⽚时，通过attr()⽅法再次改变图⽚的路径，从⽽实现图⽚的切换。

jquery实现背景跟随鼠标滑动导航

jquery实现背景跟随鼠标滑动导航

jquery实现背景跟随⿏标滑动导航本⽂实例讲述了⽀持背景图⽚上下滑动的竖向jQuery菜单导航特效代码，分享给⼤家供⼤家参考。

具体如下：运⾏效果截图如下：具体代码如下<html xmlns="/1999/xhtml"><head><meta charset="gb2312"><title>左边跟随⿏标滑动导航</title><meta name="keywords" content="滑动导航" /><meta name="description" content="左边跟随⿏标滑动导航" /><style>/*---------重置---------*/html {font-size: 100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;*overflow:auto;_overflow-x:hidden;}body {margin:0;}p, ul, ol, form, dl, h1, h2, h3, h4, h5, h6 {margin-top:0;margin-bottom:0;}dl, dd {margin-left:0;}ul, ol {padding-left:0;*margin-left:0;list-style-type: none;}ul li {*zoom:1;*vertical-align:bottom;}em, var, cite, i {font-style:normal;}small {font-size:inherit;}s, a {text-decoration:none;}:focus {outline:none;}blockquote, q {quotes:none;margin:0;}table {border-collapse:collapse;border-spacing:0;empty-cells:show;/*table-layout:fixed;*/}img, iframe {border:none;}img {vertical-align: top;-ms-interpolation-mode: bicubic;/*ie7防⽌图⽚缩⼩失真的*/ }/*---------竖向菜单（⾮必需）---------*/.bl-vernav li {border-bottom:1px solid #ddd;margin-bottom:-1px;padding-top:1px;}.bl-vernav a {display:block;height:20px;line-height:20px;padding:10px 16px;}.bl-vernav a:hover {background:#F8F8F8;text-decoration:none;}/*.bl-vernav .cur a{ background:#428BCA; color:#fff;}*/.bl-vernav-ord {border:1px solid #ddd;}.vernav-level li li {border-left:none;border-right:none;}.vernav-level li li a {padding-left:40px;}.vernav-level .cur .one {background:#F8F8F8;}.vernav-level li .cur a {background:#F8F8F8;}/*diy*/.bl-vernav-wrap {position:relative;}.bl-vernav-wrap .sideLine {position:absolute;left:-6px;top:0;z-index:1;line-height:0;font-size:0;border-left:#FF5F3E solid 7px;background-color:#F8F8F8;}.bl-vernav {position:relative;z-index:2;}.bl-vernav a:hover {background-color:transparent;}.demobox {width:460px;font-size:14px;color:#333;font-family:'Hiragino Sans GB', 'Microsoft Yahei', "WenQuanYi Micro Hei", SimSun, Tahoma, Arial, Helvetica, STHeiti;}a {color:#333;text-decoration:none;}</style></head><body style="padding:50px;"><div class="demobox"><h1 class="h3">左边条纹跟随⿏标滑动导航</h1><br/><div class="bl-vernav-wrap"><div class="sideLine"></div><ul class="bl-vernav vernav-level"><li><a href="#" class="one">导航菜单</a></li><li class="cur"> <a href="#" class="one">神探夏洛克</a><ul><li><a href="#">海贼王</a></li><li><a href="#">海贼王</a></li><li><a href="#">海贼王</a></li></ul></li><li><a href="#" class="one">神探夏洛克</a></li><li><a href="#" class="one">神探夏洛克</a></li><li><a href="#" class="one">神探夏洛克</a></li></ul></div></div><script src="/jquery/2.1.4/jquery.min.js"></script><script>$(function(){var verNav = $(".bl-vernav"), //第⼀层ul.line = verNav.siblings(".sideLine"), //左边条纹线verNavFirst = verNav.children("li:first"), //第⼀层ul中第⼀个licurY = verNav.children("li.cur").position().top;line.height(verNavFirst.outerHeight()-1).width(verNavFirst.outerWidth());//设置辅助线初始化⾼度和宽度，也可以直接⽤css设置好，这⾥就不⽤js计算了 verNav.find("li").mouseenter(function(){var thisY = $(this).position().top;line.stop(true,true).animate({top:thisY},200);return false}).end().mouseleave(function(){line.stop(true,true).animate({top:curY},300)}).trigger("mouseleave");});</script></body></html>希望本⽂所述对⼤家学习jquery程序设计有所帮助。

自-jQuery实现鼠标滑过放大图片

自-jQuery实现鼠标滑过放大图片

本特效效果模仿百度图片效果。

效果图如下：打开页面效果鼠标放上去0.15秒，放大的层从小到大展开鼠标移开后，弹出层消失。

页面代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><HTML xmlns=""><HEAD><META content="text/html; charset=utf-8" http-equiv="Content-Type"><TITLE>demo</TITLE><SCRIPT language="JavaScript" type="text/javascript" src="demo_"></SCRIPT><STYLE>html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,a,font,img,strong,dl,dt,dd,ol,ul,li,fieldset,form,label ,legend{margin:0;padding:0;}a{ color:#fff; text-decoration:none;}a img{ border:none;}li{ list-style-type:none;}body{ background:#000; color:#fff; font-size:12px; font:Arial,Verdana,"宋体"}.wrapper{ overflow:hidden; width:1130px; margin:0 auto;}.header{ overflow:hidden; padding:20px 0 50px;}.main{ width:1000px; margin:0 auto 30px; overflow:hidden;}#detial{ overflow:hidden; width:750px; padding-top:20px;}.shopPic{ overflow:hidden; width:720px; float:right;}.shopPic a{ float:left; display:inline-block;}.detialItem{ overflow:hidden; margin-bottom:5px; width:720px;}.itemTop{ overflow:hidden; line-height:40px; border-bottom:1px solid #fff; margin-bottom:20px;}.itemTop h2{ float:left; margin-left:10px;}.more{ float:right; background:#fff; color:#333; display:block; height:20px; line-height:20px; width:50px; text-align:center; margin-top:12px; margin-right:10px; font-family:'微软雅黑';}.more:hover{ text-decoration:underline;}.itemIfor{ float:left; width:150px; float:left; margin-left:23px;}.picTitle{ font-size:14px; font-weight:bold; color:#A0BC1D; line-height:30px; padding:0 5px;} .itemIfor p{ padding:0 5px; line-height:20px;}.popup{width:300px; height:380px; background-color:#fff; border:solid 1px #ccc;}#tempdiv{ overflow:hidden; display:none;position:absolute;}</STYLE><META name="GENERATOR" content="MSHTML 9.00.8112.16441"></HEAD><BODY><div class="wrapper"><div class="main"><div id="detial"><div class="detialItem"><div class="itemTop"><h2>列表1</h2><a href="#" class="more">More..</a></div><div class="itemIfor"><a href="#"><img src="demo_" width="150" height="150" /></a><a href="#" class="picTitle">商品名称</a><p>￥111.00</p></div><div class="itemIfor"><a href="#"><img src="demo_" width="150" height="150" /></a><a href="#" class="picTitle">商品名称</a><p>￥222.00</p></div><div class="itemIfor"><a href="#"><img src="demo_" width="150" height="150" /></a><a href="#" class="picTitle">商品名称</a><p>￥333.00</p></div><div class="itemIfor"><a href="#"><img src="demo_" width="150" height="150" /></a><a href="#" class="picTitle">商品名称</a><p>￥123.00</p></div></div><div class="detialItem"><div class="itemTop"><h2>列表2</h2><a href="#" class="more">More..</a></div><div class="itemIfor"><a href="#"><img src="demo_" width="150" height="150" /></a><a href="#" class="picTitle">商品名称</a><p>￥123.00</p></div><div class="itemIfor"><a href="#"><img src="demo_" width="150" height="150" /></a><a href="#" class="picTitle">商品名称</a><p>￥123.00</p></div><div class="itemIfor"><a href="#"><img src="demo_" width="150" height="150" /></a><a href="#" class="picTitle">商品名称</a><p>￥123.00</p></div><div class="itemIfor"><a href="#"><img src="demo_" width="150" height="150" /></a><a href="#" class="picTitle">商品名称</a><p>￥123.00</p></div></div></div></div></div><!--这个是弹出放大图片的模板--><div style="display:none" id="template"><a href="Thref"><img src="Timg" width="150" height="150"/></a><a href="Thref" class="picTitle">TprdName</a><p style="color:#000">Tprice</p></div><SCRIPT>var popupdiv={init:function(){//初始化$this = this;//保存本对象$("#detial .itemIfor").each(function(i){var children = $(this).children();var itemobj = new Object();itemobj.href = $(children[0]).attr("href");//获取链接itemobj.productName = $(children[1]).text();//获取产品名称itemobj.price = $(children[2]).text();//获取价格$(children[0]).find("img").mouseenter(function(){//给所有图片添加鼠标进入事件var template = $("#template").html();//获取模板//替换模板内容template = $this.setValue(template,/Thref/g,itemobj.href);template = $this.setValue(template,/TprdName/g,itemobj.productName);template = $this.setValue(template,/Tprice/g,itemobj.price);template = $this.setValue(template,/Timg/g,$(this).attr("src"));var htmlobj = new Object();htmlobj.html = template;htmlobj.offset = $(this).position();//获取图片精确位置htmlobj.width = $(this).outerWidth();//获取图片宽度htmlobj.height = $(this).outerHeight();//获取图片高度$this.createPopup(htmlobj);//创建div}).mouseleave(function(){clearTimeout($this.poptimmer);});//鼠标移除图片时清除定时器，以避免鼠标移出了图片还弹出效果图});},setValue:function(template,reg,value){return template.replace(reg,value);},createPopup:function(opts){var div = "<div id='tempdiv'><div class='popup'>"+opts.html+"</div><div>";if($("#tempdiv").html()!=null)$("#tempdiv").remove();$("body").append(div);//设置定时器this.poptimmer = setTimeout(function(){$("#tempdiv").css({width:opts.width+"px",height:opts.height+"px",left:opts.offset.left+"px",t op:opts.offset.top+"px"}).show();var children = $("#tempdiv").children();//计算放大图的实际大小var innerWidth = $(children[0]).outerWidth();var innerHeight = $(children[0]).outerHeight();//计算放大图的左顶点位置var diff = innerWidth - opts.width;var newTop = opts.offset.top - diff/2;var newLeft = opts.offset.left - diff/2;$("#tempdiv").animate({width:innerWidth+"px",height:innerHeight+"px",left:newLeft+"px",top:newTop+"px"},{duration:150,step:function(){//执行动画的时候每一步都改变图片大小$(this).find("img").attr({width:$(this).outerWidth(),height:$(this).outerWidth()});}});//animate end},500);//setTimeout end$("#tempdiv").mouseleave(function(){$(this).stop().html("").remove();});},poptimmer:null//定时器}popupdiv.init();</SCRIPT></BODY></HTML>图片和jquery插件请放在demo_file 文件夹中：。

鼠标滑过列表文字显示图片及详细信息

鼠标滑过列表文字显示图片及详细信息

1.xhtml12345678910111213141516171819202122232425262728293031<div id="ranklist"><ul class="topcn"><li><span>1</span><p style="display:none;"><code>2007-2-10</code><a href="#">鼠标滑过列表文字显</a></p> <div style="display:block;"><a href="#"><img src="images/imgs.jpg" title="图片"/></a><a href="#">鼠标滑过列表文字显示图片及详细信息信息信息</a><em>日增：666</em></div></li><li><span>2</span><p><code>2007-2-10</code><a href="#">鼠标滑过列表文字显</a></p><div><a href="#"><img src="images/imgs.jpg" title="图片"/></a><a href="#">鼠标滑过列表文字显示图片及详细信息信息信息</a><em>日增：666</em></div></li><li><span>3</span><p><code>2007-2-10</code><a href="#">鼠标滑过列表文字显</a></p><div><a href="#"><img src="images/imgs.jpg" title="图片"/></a><a href="#">鼠标滑过列表文字显示图片及详细信息信息信息</a><em>日增：666</em></div></li></ul></div>2.cssul,p{ margin:0; padding:0;}.topcn{width:300px;line-height:27px;font-size:12px;}.topcn a{font-size:12px;}.topcn li{border-bottom:#000 1px dotted;display:inline-block;clear:both;}.topcn span{float:left;width:17px;height:15px;line-height:15px;text-align:center;font-size:9px;font-family: Verdana, Geneva, sans-serif;margin:5px 5px 0 0;background-color:#99C;}.topcn p,.topcn div {float:left;width:278px;}.topcn p code {float:right;color:#9f9fa1;}.topcn img {width:67px;height:50px;border:#000 1px solid;float:left;margin:3px 10px 0 0;display:inline; background-color: #CCF;}.topcn em {display:block;color:#919b9d;}.topcn div{line-height:19px; padding-bottom:5px; display:none;}3.jsfunction ranklist(id,ele,elename,elechild,start_ele,cur_ele){var obj_id=document.getElementById(id);var obj_ele=$tag(obj_id,ele);for(i=0;i<obj_ele.length;i++){if(obj_ele[i].className.indexOf(elename) == -1) continue;var objlist=$tag(obj_ele[i],elechild);for(j=0;j<objlist.length;j++){objlist[j].onmouseover=function(){var paris=this.parentNode;var list=$tag(paris,elechild);for(x=0;x<list.length;x++){var thisdiv=$tag(list[x],cur_ele)[0];var thisp=$tag(list[x],start_ele)[0];thisdiv.style.display="none";thisp.style.display="block";}var start=$tag(this,start_ele)[0];start.style.display='none';var cur=$tag(this,cur_ele)[0];cur.style.display='block';}}}}function $tag(id,tag){return id.getElementsByTagName(tag);}setTimeout("ranklist('ranklist','ul','topcn','li','p','div')",0);/*参数解释：ranklist:为了缩小函数在文档中搜寻对象的范围，给其设置了一个id参数；ul：在搜寻范围内遍历ul元素列表；这是ele参数，为了排除与效果无关的ul元素；给其添加了类topcn，这是elename 参数；在指定的ul中遍历li列表元素；鼠标经过li元素会有相应的事件产生；p:为文字列表行；div：是显示的详细信息区域；*/效果展示1 图片鼠标滑过列表文字显示图片及详细信息信息信息日增：6662 2007-2-10鼠标滑过列表文字显3 2007-2-10鼠标滑过列表文字显1 图片鼠标滑过列表文字显示图片及详细信息信息信息日增：6662 2007-2-10鼠标滑过列表文字显3 2007-2-10鼠标滑过列表文字显。

js实现点击左右滚动jquery焦点图特效

js实现点击左右滚动jquery焦点图特效

js实现点击左右滚动jquery焦点图特效QQ商城点击左右滚动jquery焦点图特效是不是很炫酷呢?你知道是怎么实现的吗?不知道的话跟着店铺一起来学习实现QQ商城点击左右滚动jquery焦点图特效。

实现QQ商城点击左右滚动jquery焦点图特效的代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">body {font-size:12px; color:#222; font-family:Verdana,Arial,Helvetica,sans-serif; background:#f0f0f0;} ul,li {list-style:none; margin:0px; padding:0px;}img {border:0;}/* 仿QQ商城点击左右滚动jquery焦点图特效插件 */.focus {width:800px; height:280px; overflow:hidden; position:relative;}.focus ul {height:380px; position:absolute;}.focus ul li {float:left; width:800px; height:280px; overflow:hidden; position:relative; background:#000;} .focus ul li div {position:absolute; overflow:hidden;}.focus .btnBg {position:absolute; width:800px; height:20px; left:0; bottom:0; background:#000; display:none;}.focus .btn {position:absolute; width:780px; height:23px; padding:0px 10px 0px 10px; right:0; bottom:6px; text-align:right;} .focus .btn span {display:inline-block; _display:inline; _zoom:1;width:25px; height:24px; line-height:24px; text-align:center; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;} .focus .btn span.on {background:#fff;}.focus .preNext {width:45px; height:100px; position:absolute; top:90px; background:url(img/sprite.png) no-repeat 0 0; cursor:pointer;}.focus .pre {left:0;}.focus .next {right:0; background-position:right top;}</style><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/sl.js"></script><script type="text/javascript">$(document).ready(function(){$.focus("#focus001");$.focus("#focus002");});</script></head><body><h1></h1><div class="focus" id="focus001"><ul><li><a href="/" target="_blank"><img src="img/03.jpg" alt="jquery特效" /></a></li><li><a href="/" target="_blank"><img src="img/02.jpg"/></a></li> <li><a href="/" target="_blank"><img src="img/03.jpg" alt="仿QQ商城点击左右滚动jquery焦点图特效" /></a></li></ul></div><p>修改的几个地方：1、隐藏了半透明背景条，2、把那个小常条滑块读出了1234这些数字。

word鼠标划过自动显示提示文字的方法

word鼠标划过自动显示提示文字的方法

∙word鼠标划过自动显示提示文字的方法excel表格的基本操作：平时提交给领导的讲话稿和总结文档中，经常需要给一些关键地方添加提示文字，但又不能让提示影响到原文的视图和打印效果。

因此想让提示文字只在鼠标靠近时自动显示，当鼠标移开时就得自动消失。

请问在Word中是否有办法可实现类似的效果呢? 在Word2010中有两种方法可以达到你要求的鼠标指向自动显示和隐藏的效果：使用超链接和尾注，他们各有优劣，董师傅先来教你使用这两种方法。

1.超链接选中要添加提示的文字，切换到“插入”选项卡，单击“超链接”，在“插入超链∙怎样打印word中宽图片excel表格的基本操作：在通常的办公应用中，我们的纸张类型都是纵向排列的。

但有时文档中插入的图表的宽度会大于纸宽。

这时大家往往会把图表单独拷贝到一个新文档中，然后将纸张方向设为横向。

这样往往会影响页码的排列，而且操作也比较麻烦。

合理利用Word的分节符这个问题即可轻松解决。

首先将光标定位在要插入图标的上方，然后打开“插入”菜单，选择“分隔符”命令，在打开的窗口中把“分节符类型”设为“下一页”。

用同样的方法，在插入图片的后面再插入一个“下一页”分节符。

∙PDFMaker文件遗失怎么解决excel表格的基本操作：相信大家在安装完Office2007和Adobe Acrobat Professional 8.0后，制作pdf文件时出现过“PDFMaker文件遗失”，最初发现是文件格式问题，Acrobat Professional 8.0只支持docx(微软新的文档格式)，然而doc却不支持，现在Adobe出了Adobe Acrobat Professional 8.0的升级包8.1，已经很好解决了这个问题，大家可以去试试!^_^ 升级包下载地址 /adobe/acrobat/win/8.x/8.1/misc/AcrobatUpd810_cck_incr.msp 直接打开Adobe Acrobat 7.0 Professional创建DO∙第三讲编辑工作表excel表格的基本操作：第三讲Excel2003编辑工作表，本节知识点有，修改单元格中的数据，移动和复制单元格，选择性粘贴单元格，粘贴选项按钮，恢复和撤销。

Jquery图片滚动与幻灯片的实例代码

Jquery图片滚动与幻灯片的实例代码

Jquery图⽚滚动与幻灯⽚的实例代码1、复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title></title><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript">$(document).ready(function () {Xhun(".a"); //----------------------只需要修改 ”.a" (就是最⼤的div的class值这⾥就⾏---------------------});function Xhun(_box) {var box_frame = _box + " div ul";var box_div = _box + " div";$(_box).find("ul").wrap("<div></div>"); //添加⼀个div，来控制偏移量$(box_div).append($(box_frame).clone()); //克隆⼀个ul并添加到div中，为了实现⽆缝循环$(box_div).append($(box_frame).clone()); //克隆⼀个ul并添加到div中，为了实现⽆缝循环var li_size = $(_box).find("li").size(); //获取li的个数var li_width = $(box_frame).children("li").width(); //获取li的宽度var box_div_width = $(box_div).width(li_size * li_width * 5); //设置div的宽度$(box_frame).css("float", "left");var dd = setInterval(gd, 30);function gd() {var position = $(_box).scrollLeft(); //scrollLeft()是获取对象的⽔平偏移量$(_box).scrollLeft(position + 1);if (position >= $(box_frame).width()) { $(_box).scrollLeft(0); } //判断位移是否⼤于ul的总长度}$(_box).mouseleave(function () {dd = setInterval(gd, 30);}).mouseenter(function () {clearInterval(dd);});}</script><style type="text/css">* { margin: 0; padding: 0; }ul { list-style: none; }li { float: left; margin-left: 10px; width: 100px; }img { width: 100px; height: 100px; }.a { width: 400px; margin: 0 auto; overflow: hidden; height: 100px; }</style></head><body><div class="a"><ul><li><a href="#"><img src="Wife1.jpg" alt="img" title="img" /></a></li><li><a href="#"><img src="Wife2.jpg" alt="img" title="img" /></a></li></ul></div></body></html>2、复制代码代码如下:<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>幻灯⽚切换</title><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript">$(document).ready(function () {slide(".frame"); //----------------------只需要修改 ”.frame" (就是最⼤的div的class值这⾥就⾏---------------------});function slide(cls) {$(cls).find("ul").wrap("<div></div>");$(cls+" div").attr("class","iframe");var li = $(cls).find("li").size();//统计多少张图⽚var li_width = $(cls).find("li").width(); //获取li的宽度$(cls + " div").children("ul").width(li_width * li);//设置宽度，使图⽚排成⼀排var s = "<ul class='button'>";//⽣成li的按钮for (var i = 0; i < li; i++) {s += "<li>" + (i + 1) + "</li>";}s += "</ul>";$(s).appendTo($(cls));//⽣成按钮结束,并添加到最⼤div⾥⾯var _i = 0;//当前的编号$(cls).find(".button li").each(function (i) {//⽣成按钮点击事件$(this).click(function () {_i = i;$(this).attr("class", "on").siblings().removeAttr("class");//设置class，没必要再多加⼀个off$(cls + " div").animate({ scrollLeft: i * li_width }, "slow");//图⽚移动});}).eq(0).click();function tt() {//定时器函数_i++;_i = _i % li;$(cls).find(".button li").eq(_i).click();//⾃动点击切换图⽚}var t = setInterval(tt, 3000);//定时器$(cls).hover(function () {clearInterval(t);//⿏标经过清除定时器，离开时⼜触发}, function () {t = setInterval(tt, 3000);})}</script><style type="text/css">* { margin: 0; padding: 0; }li, ul { list-style: none; margin: 0; padding: 0; }.frame { width: 280px; height: 280px; position: relative; margin: 0 auto; } /*这⾥需要修改最⼤div的宽度和⾼度*/.iframe { overflow: hidden; width: 280px; height: 280px; } /*这⾥需要修改该div的宽度和⾼度*/.iframe ul li { float: left; width: 280px; } /*这⾥需要修改li的宽度*/.button { position: absolute; bottom: 15px; right: 15px; z-index: 300; }.button li { float: left; cursor: pointer; width: 17px; height: 17px; line-height: 17px; text-align: center; margin-right: 5px;border-radius: 7px; color: #fff; background: #000; }.button .on { color: #000; background: #fff; }</style></head><body><!-- 这⾥要按照这样的格式来写 --><div class="frame"><ul><li><a href="#"><img src="Wife1.jpg" width="280" height="280" alt="img" /></a></li> <li><a href="#"><img src="Wife2.jpg" width="280" height="280" alt="img" /></a></li> <li><a href="#"><img src="Wife3.jpg" width="280" height="280" alt="img" /></a></li> <li><a href="#"><img src="Wife4.jpg" width="280" height="280" alt="img" /></a></li> <li><a href="#"><img src="Wife5.jpg" width="280" height="280" alt="img" /></a></li> </ul></div></body></html>。

ecshop鼠标滑过小图切换大图功能

ecshop鼠标滑过小图切换大图功能

ecshop实现鼠标滑过小图切换大图功能关于如何使ecshop网店里商品图片在能多现实的前提下又不影响客户查看呢？这就需要鼠标经过图片就能切换为大图的功能，具体如何操作呢？鼠标滑过小图显示大图的代码如下：先打开goods.dwt添加代码:<script type="text/javascript">function change_img(img_src){document.getElementsByName("goods_img")[0].src=img_src;}</script>在<head></head>之间。

然后找到代码：<img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" > 在"{$goods.goods_name|escape:html}"代码的后面加上：name="goods_img" width="250" height="250"/>最后打开goods_gallery.lbi找到代码：<!-- {foreach from=$pictures item=picture}--><li><a href="gallery.php?id={$id}&img={$picture.img_id}" target="_blank"><img src="{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}"alt="{$goods.goods_name}" class="B_blue" /></a></li><!--{/foreach}-->在class="B_blue"后面加上：onmouseOver="change_img(this.src)" />。

jQuery实现的鼠标滑过切换图片代码实例

jQuery实现的鼠标滑过切换图片代码实例

jQuery实现的⿏标滑过切换图⽚代码实例
jQuery实现的⿏标滑过切换图⽚代码实例:
有时候⽹页需要这样的简单效果，那就是当⿏标滑过默认图⽚的时候，能够实现图⽚的切换，可能在实际应⽤中，往往没有这么简单，不过⼤家可以⾃⾏扩展⼀下，下⾯简单介绍⼀下次效果。

html静态代码如下:
<body>
<img src="images/mayi.jpg"/>
</body>
jquery切换代码:
$(document).ready(function(){
var newImage=new Image();
var oldImage=$('img').attr('src');
newImage.src='images/new.jpg';
$('img').hover(function(){
$('img').attr('src',newImage.src);
},
function(){
$('img').attr('src',oldImage);
})
})
以上代码是实现切换的核⼼，原理很简单，就是为图⽚的注册hover事件处理函数，当⿏标悬浮的时候，修改图⽚的src属性值即可。

jQuery实现的Tab滑动选项卡及图片切换（多种效果）小结

jQuery实现的Tab滑动选项卡及图片切换（多种效果）小结

jQuery实现的Tab滑动选项卡及图⽚切换（多种效果）⼩结本⽂实例讲述了jQuery实现的Tab滑动选项卡及图⽚切换效果。

分享给⼤家供⼤家参考。

具体如下：这⾥汇总了⼏个Tab，滑动门，选项卡，图⽚切换，在⼀个⽹页中实现了超多的常⽤效果，⼤家喜欢的滑动门，焦点图切换，标签选项卡以及⽂字轮番等都集中在了⼀起，⽆聊的功劳，忙的时候还顾不上写，另外还加⼊了圆⾓，都是参考以前学习的知识写的。

期间使⽤了jquery-1.6.2.min.js框架库。

运⾏效果截图如下：在线演⽰地址如下：具体代码如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Tab</title><style>html body {margin:0px; padding:0px;}.t_body{border:1px solid #ddd; padding:10px; width:250px; margin:50px;float:left;}.aa {background-color:#eee; width:25px; cursor:pointer; float:left; margin-left:10px; text-align:center;}.bb {background-color:#eae; width:250px; height:250px; display:none; font-size:50px;}.cc {background-color:#eee; width:100%; height:20px; display:none;}.on {background-color:#c21; width:30px; border-bottom:0px; border-top:0px;}.yuan1 span {display: block;overflow: hidden;height: 1px; border-color:#77a;}.yuan2 span {display: block;overflow: hidden;height: 1px; border-color:#77a;}.span1 {margin:0px 3px; background-color:#77a;}.span2 {margin:0px 1px; border-left:2px solid; border-right:2px solid;}.span3 {margin:0px 1px; border-left:1px solid; border-right:1px solid;}.d_body {margin:50px;width:400px; height:400px; font-size:12px;float:left;}.d_top {height:40px; border-left:1px solid #77a; border-right:1px solid #77a;}.d_t {float:left; margin-top:7px; margin-left:10px; border:1px solid #77a; width:100px; height:31px; line-height:31px; background-color:#eee;}.d_t a {color:#555; text-decoration:none;}.d_t a:hover {color:#933; text-decoration:underline; font-weight:bold; }.d_main {border:1px solid #77a; border-top:0px; height:300px;}.ln {position:relative; border-bottom:1px solid #77a; top:40px; z-index:-1;}.bbb {background-color:#fff; height:100%; display:none; margin:10px;}.on1 {border-bottom:1px solid #fff; background-color:#fff;}.fl {float:left;}.clr {clear:both;}.of {overflow:hidden;}.textcenter{text-align:center;vertical-align:middle;}</style><script src="jquery-1.6.2.min.js"></script><script>$(document).ready(function() {/*o1: 标签元素o2: 内容元素c : 标签元素显⽰⽤样式e : 触发事件如 click mouseover*/function tab1(o1,o2,c,e){o1.each(function(i){$(this).bind(e,function(){o2.hide().eq(i).show();o1.removeClass(c);$(this).addClass(c);})if ($(this).hasClass(c)) {$(this).addClass(c);o2.hide().eq(i).show();}})}/*o1: 标签元素o2: 内容元素c : 标签元素显⽰⽤样式t1: 标签切换时间t2: 内容渐进时间a : 内容渐进起始半透明度 0.1~1b : 内容渐进结束半透明度 0.1~1*/function tab2(o1,o2,c,t1,t2,a,b){var count=o1.size()-1;var now;var TimeInterval;o1.each(function(i){$(this).mouseover(function(){o2.hide().eq(i).show();o1.removeClass(c);$(this).addClass(c);window.clearInterval(TimeInterval);}).mouseout(function(){now = i+1;TimeInterval = window.setInterval(changeimage,t1); });//初始化显⽰if ($(this).hasClass(c)) {$(this).addClass(c);o2.hide().eq(i).show();now = i+1;}})TimeInterval = window.setInterval(changeimage,t1); function changeimage(){if(now>count)now=0;o2.hide().eq(now).stop().fadeTo(0,a).fadeTo(t2,b);o1.removeClass(c).eq(now).addClass(c);now++;}}/*o1: 标签元素o2: 内容元素o3: 内容元素c : 标签元素显⽰⽤样式e : 触发事件如 click mouseover*/function tab3(o1,o2,o3,c,e){o1.each(function(i){$(this).bind(e,function(){o2.hide().eq(i).show();o3.hide().eq(i).show();o1.removeClass(c);$(this).addClass(c);})if ($(this).hasClass(c)) {$(this).addClass(c);o2.hide().eq(i).show();o3.hide().eq(i).show();}})}/*o1: 标签元素o2: 内容元素o3: 内容元素c : 标签元素显⽰⽤样式t1: 标签切换时间t2: 内容渐进时间a : 内容渐进起始半透明度 0.1~1b : 内容渐进结束半透明度 0.1~1*/function tab4(o1,o2,o3,c,t1,t2,a,b){var count=o1.size()-1;var now;var TimeInterval;o1.each(function(i){$(this).mouseover(function(){o2.hide().eq(i).show();o3.hide().eq(i).show();o1.removeClass(c);$(this).addClass(c);window.clearInterval(TimeInterval);}).mouseout(function(){now = i+1;TimeInterval = window.setInterval(changeimage,t1);});//初始化显⽰if ($(this).hasClass(c)) {$(this).addClass(c);o2.hide().eq(i).show();o3.hide().eq(i).show();now = i+1;}})TimeInterval = window.setInterval(changeimage,t1);function changeimage(){if(now>count)now=0;o3.hide().eq(now).show();o2.hide().eq(now).stop().fadeTo(0,a).fadeTo(t2,b);o1.removeClass(c).eq(now).addClass(c);now++;}}//调⽤函数tab1($(".yuan1 .d_t"),$(".yuan1 .bbb"),"on1","mouseover");tab1($(".yuan2 .d_t"),$(".yuan2 .bbb"),"on1","click");tab1($(".d0 .aa"),$(".d0 .bb"),"on","click");tab1($(".d1 .aa"),$(".d1 .bb"),"on","mouseover");tab2($(".d2 .aa"),$(".d2 .bb"),"on",1500,800,0.1,1);tab3($(".d3 .aa"),$(".d3 .bb"),$(".d3 .cc"),"on","mouseover");tab4($(".d4 .aa"),$(".d4 .bb"),$(".d4 .cc"),"on",1500,800,0.1,1);tab4($(".d5 .aa"),$(".d5 .bb"),$(".d5 .cc"),"on",1500,0,1,1);});</script></head><body><div class="d_body yuan1"><div>⿏标悬浮切换</div><br><span class="span1"></span><span class="span2"></span><span class="span3"></span> <div class="d_top"><div class="ln"></div><div class="d_t textcenter on1"><a href="javascript:">第⼀个标签</a></div><div class="d_t textcenter"><a href="javascript:">第⼆个标签</a></div><div class="d_t textcenter"><a href="javascript:">第三个标签</a></div></div><div class="d_main clr of"><div class="bbb"><font color="blue">第⼀个内容</font></div><div class="bbb"><font color="red">第⼆个内容</font></div><div class="bbb"><font color="black">第三个内容</font></div></div><div class="clr of"></div></div><div class="d_body yuan2"><div>点击切换</div><br><span class="span1"></span><span class="span2"></span><span class="span3"></span> <div class="d_top"><div class="ln"></div><div class="d_t textcenter on1"><a href="javascript:">第⼀个标签</a></div><div class="d_t textcenter"><a href="javascript:">第⼆个标签</a></div><div class="d_t textcenter"><a href="javascript:">第三个标签</a></div></div><div class="d_main clr of"><div class="bb"><font color="blue">第⼀个内容</font></div><div class="bb"><font color="red">第⼆个内容</font></div> <div class="bb"><font color="black">第三个内容</font></div> </div><div class="clr of"></div></div><div class="t_body d0"><div class="aa">a</div><div class="aa">b</div><div class="aa on">c</div><div class="aa">d</div><div class="aa">e</div><br><div class="bb">1</div><div class="bb">2</div><div class="bb">点击切换</div><div class="bb">4</div><div class="bb">5</div><div style="clear:both;"></div></div><div class="t_body d1"><div class="aa">a</div><div class="aa">b</div><div class="aa on">c</div><div class="aa">d</div><div class="aa">e</div><br><div class="bb">1</div><div class="bb">2</div><div class="bb">3</div><div class="bb">4</div><div class="bb">5</div><div style="clear:both;"></div></div><div class="t_body d2"><div class="aa">a</div><div class="aa">b</div><div class="aa on">c</div><div class="aa">d</div><div class="aa">e</div><br><div class="bb">1</div><div class="bb">2</div><div class="bb">3</div><div class="bb">4</div><div class="bb">5</div><div style="clear:both;"></div></div><div class="t_body d3"><div class="aa">a</div><div class="aa">b</div><div class="aa on">c</div><div class="aa">d</div><div class="aa">e</div><br><div class="bb">1</div><div class="bb">2</div><div class="bb">悬浮切换</div><div class="bb">4</div><div class="bb">5</div><div class="cc">111111</div><div class="cc">222222</div><div class="cc">333333</div><div class="cc">444444</div><div class="cc">555555</div><div style="clear:both;"></div></div><div class="t_body d4"><div class="aa">a</div><div class="aa">b</div><div class="aa on">c</div><div class="aa">d</div><div class="aa">e</div><br><div class="bb">1</div><div class="bb">2</div><div class="bb">3</div><div class="bb">4</div><div class="bb">5</div><div class="cc">111111</div><div class="cc">222222</div><div class="cc">333333</div><div class="cc">444444</div><div class="cc">555555</div><div style="clear:both;"></div></div><div class="t_body d5"><div class="aa">a</div><div class="aa">b</div><div class="aa on">c</div><div class="aa">d</div><div class="aa">e</div><br><div class="bb">1</div><div class="bb">2</div><div class="bb">3</div><div class="bb">4</div><div class="bb">5</div><div class="cc">111111</div><div class="cc">222222</div><div class="cc">333333</div><div class="cc">444444</div><div class="cc">555555</div><div style="clear:both;"></div></div></body></html>希望本⽂所述对⼤家的jQuery程序设计有所帮助。

jquery实现鼠标滑过显示二级下拉菜单效果

jquery实现鼠标滑过显示二级下拉菜单效果

jquery实现⿏标滑过显⽰⼆级下拉菜单效果本⽂实例讲述了jquery实现⿏标滑过显⽰⼆级下拉菜单效果。

分享给⼤家供⼤家参考。

具体如下：这是⼀款jquery实现的下拉菜单，当⿏标移在主菜单上的时候，向下滑出⼆级⼦菜单，采⽤UL LI结构，便于修改完善，我觉得是很实⽤的菜单，希望⼤家平时能⽤得上。

运⾏效果截图如下：在线演⽰地址如下：具体代码如下：<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery下拉菜单</title><script type="text/javascript" src="jquery-1.6.2.min.js"></script><style>* { margin: 0; padding: 0; }body {font-family: Arial, Tahoma, sans-serif; font-size: 11px; color: #232323; }.wrap { width: 800px; margin: 0 auto; }#nav { margin: 0; padding: 0; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; border-bottom: 1px solid #d5dce8; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-botto #nav li { float: left; display: block; background: none; position: relative; z-index: 999; margin: 0 1px; }#nav li a { display: block; padding: 0; font-weight: 700; line-height: 50px; text-decoration: none; color: #818ba3; zoom: 1; border-left: 1px solid transparent; border-right: 1px solid transparent; padding: 0px 12px; }#nav li a:hover, #nav li a.hov { background-color: #fff; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; color: #576482; }#nav ul { position: absolute; left: 1px; display: none; margin: 0; padding: 0; list-style: none; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2); -o-box-shadow: 0 1px 3px rgba(0,0,0,0.2); box-shadow: 0 1px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 3px rgba(0,0,0 #nav ul li { width: 180px; float: left; border-top: 1px solid #fff; text-align: left; }#nav ul li:hover { border-left: 0px solid transparent; border-right: 0px solid transparent; }#nav ul a { display: block; height: 20px; line-height: 20px; padding: 8px 5px; color: #666; border-bottom: 1px solid transparent; text-transform: uppercase; color: #797979; font-weight: normal; }#nav ul a:hover { text-decoration: none; border-right-color: transparent; border-left-color: transparent; background: transparent; color: #4e4e4e; }* html #nav ul { margin: 0 0 0 -2px; }.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }.clearfix { display: inline-block; }html[xmlns] .clearfix { display: block; }* html .clearfix { height: 1%; }</style></head><body><div class="wrap"><ul id="nav"><li><a href="#">⽹站主页</a></li><li><a href="#">关于我</a><ul><li><a href="#">Company</a></li><li><a href="#">Authors</a></li><li><a href="#">Advertising</a></li></ul></li><li><a href="#">RSS订阅</a><ul><li><a href="#">PSD</a></li><li><a href="#">Patterns</a></li><li><a href="#">Icons</a></li></ul></li><li><a href="#">精美博⽂</a><ul><li><a href="#">HTML5</a></li><li><a href="#">CSS3</a></li><li><a href="#">jQuery</a></li><li><a href="#">MySQL</a></li></ul></li><li><a href="#">Web⼯具</a><ul><li><a href="#">Performance</a></li><li><a href="#">CMS Plugins</a></li><li><a href="#">Cheat Sheets</a></li></ul></li><li><a href="#">Originals</a><ul><li><a href="#">Website Design</a></li><li><a href="#">Mobile</a></li></ul></li></ul></div><script type="text/javascript">$(document).ready(function() {$('#nav li').hover(function() {$('ul', this).slideDown(200);$(this).children('a:first').addClass("hov");}, function() {$('ul', this).slideUp(100);$(this).children('a:first').removeClass("hov");});});</script></body></html>希望本⽂所述对⼤家的jquery程序设计有所帮助。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

江西省南昌市2015-2016学年度第一学期期末试卷（江西师大附中使用）高三理科数学分析一、整体解读试卷紧扣教材和考试说明，从考生熟悉的基础知识入手，多角度、多层次地考查了学生的数学理性思维能力及对数学本质的理解能力，立足基础，先易后难，难易适中，强调应用，不偏不怪，达到了“考基础、考能力、考素质”的目标。

试卷所涉及的知识内容都在考试大纲的范围内，几乎覆盖了高中所学知识的全部重要内容，体现了“重点知识重点考查”的原则。

1．回归教材，注重基础试卷遵循了考查基础知识为主体的原则，尤其是考试说明中的大部分知识点均有涉及，其中应用题与抗战胜利70周年为背景，把爱国主义教育渗透到试题当中，使学生感受到了数学的育才价值，所有这些题目的设计都回归教材和中学教学实际，操作性强。

2．适当设置题目难度与区分度选择题第12题和填空题第16题以及解答题的第21题，都是综合性问题，难度较大，学生不仅要有较强的分析问题和解决问题的能力，以及扎实深厚的数学基本功，而且还要掌握必须的数学思想与方法，否则在有限的时间内，很难完成。

3．布局合理，考查全面，着重数学方法和数学思想的考察在选择题，填空题，解答题和三选一问题中，试卷均对高中数学中的重点内容进行了反复考查。

包括函数，三角函数，数列、立体几何、概率统计、解析几何、导数等几大版块问题。

这些问题都是以知识为载体，立意于能力，让数学思想方法和数学思维方式贯穿于整个试题的解答过程之中。

二、亮点试题分析1．【试卷原题】11.已知,,A B C 是单位圆上互不相同的三点，且满足AB AC →→=，则AB AC →→⋅的最小值为（ ）A ．14-B ．12-C ．34-D ．1-【考查方向】本题主要考查了平面向量的线性运算及向量的数量积等知识，是向量与三角的典型综合题。

解法较多，属于较难题，得分率较低。

【易错点】1．不能正确用OA ，OB ，OC 表示其它向量。

2．找不出OB 与OA 的夹角和OB 与OC 的夹角的倍数关系。

【解题思路】1．把向量用OA ，OB ，OC 表示出来。

2．把求最值问题转化为三角函数的最值求解。

【解析】设单位圆的圆心为O ，由AB AC →→=得，22()()OB OA OC OA -=-，因为1OA OB OC ===，所以有，OB OA OC OA ⋅=⋅则()()AB AC OB OA OC OA ⋅=-⋅-2OB OC OB OA OA OC OA =⋅-⋅-⋅+ 21OB OC OB OA =⋅-⋅+设OB 与OA 的夹角为α，则OB 与OC 的夹角为2α所以，cos 22cos 1AB AC αα⋅=-+2112(cos )22α=--即，AB AC ⋅的最小值为12-，故选B 。

【举一反三】【相似较难试题】【2015高考天津，理14】在等腰梯形ABCD 中,已知//,2,1,60AB DC AB BC ABC ==∠= ,动点E 和F 分别在线段BC 和DC 上,且,1,,9BE BC DF DC λλ==则AE AF ⋅的最小值为 .【试题分析】本题主要考查向量的几何运算、向量的数量积与基本不等式.运用向量的几何运算求,AE AF ，体现了数形结合的基本思想，再运用向量数量积的定义计算AE AF ⋅，体现了数学定义的运用，再利用基本不等式求最小值，体现了数学知识的综合应用能力.是思维能力与计算能力的综合体现. 【答案】2918【解析】因为1,9DF DC λ=12DC AB =，119199918CF DF DC DC DC DC AB λλλλλ--=-=-==， AE AB BE AB BC λ=+=+，19191818AF AB BC CF AB BC AB AB BC λλλλ-+=++=++=+，()221919191181818AE AF AB BC AB BC AB BC AB BCλλλλλλλλλ+++⎛⎫⎛⎫⋅=+⋅+=+++⋅⋅ ⎪ ⎪⎝⎭⎝⎭19199421cos1201818λλλλ++=⨯++⨯⨯⨯︒2117172992181818λλ=++≥+= 当且仅当2192λλ=即23λ=时AE AF ⋅的最小值为2918. 2．【试卷原题】20. （本小题满分12分）已知抛物线C 的焦点()1,0F ，其准线与x 轴的交点为K ，过点K 的直线l 与C 交于,A B 两点，点A 关于x 轴的对称点为D ． （Ⅰ）证明：点F 在直线BD 上； （Ⅱ）设89FA FB →→⋅=，求BDK ∆内切圆M 的方程. 【考查方向】本题主要考查抛物线的标准方程和性质，直线与抛物线的位置关系，圆的标准方程，韦达定理，点到直线距离公式等知识，考查了解析几何设而不求和化归与转化的数学思想方法，是直线与圆锥曲线的综合问题，属于较难题。

【易错点】1．设直线l 的方程为(1)y m x =+，致使解法不严密。

2．不能正确运用韦达定理，设而不求，使得运算繁琐，最后得不到正确答案。

【解题思路】1．设出点的坐标，列出方程。

2．利用韦达定理，设而不求，简化运算过程。

3．根据圆的性质，巧用点到直线的距离公式求解。

【解析】（Ⅰ）由题可知()1,0K -，抛物线的方程为24y x =则可设直线l 的方程为1x my =-，()()()112211,,,,,A x y B x y D x y -，故214x my y x =-⎧⎨=⎩整理得2440y my -+=，故121244y y m y y +=⎧⎨=⎩则直线BD 的方程为()212221y y y y x x x x +-=--即2222144y y y x y y ⎛⎫-=- ⎪-⎝⎭令0y =，得1214y yx ==，所以()1,0F 在直线BD 上.（Ⅱ）由（Ⅰ）可知121244y y m y y +=⎧⎨=⎩，所以()()212121142x x my my m +=-+-=-，()()1211111x x my my =--= 又()111,FA x y →=-，()221,FB x y →=-故()()()21212121211584FA FB x x y y x x x x m →→⋅=--+=-++=-，则28484,93m m -=∴=±，故直线l 的方程为3430x y ++=或3430x y -+=213y y -===±，故直线BD 的方程330x -=或330x -=，又KF 为BKD ∠的平分线，故可设圆心()(),011M t t -<<，(),0M t 到直线l 及BD 的距离分别为3131,54t t +--------------10分 由313154t t +-=得19t =或9t =（舍去）.故圆M 的半径为31253t r +== 所以圆M 的方程为221499x y ⎛⎫-+= ⎪⎝⎭【举一反三】【相似较难试题】【2014高考全国，22】 已知抛物线C ：y 2＝2px(p>0)的焦点为F ，直线y ＝4与y 轴的交点为P ，与C 的交点为Q ，且|QF|＝54|PQ|.（1）求C 的方程；（2）过F 的直线l 与C 相交于A ，B 两点，若AB 的垂直平分线l′与C 相交于M ，N 两点，且A ，M ，B ，N 四点在同一圆上，求l 的方程．【试题分析】本题主要考查求抛物线的标准方程,直线和圆锥曲线的位置关系的应用,韦达定理,弦长公式的应用,解法及所涉及的知识和上题基本相同. 【答案】（1）y 2＝4x. （2）x －y －1＝0或x ＋y －1＝0. 【解析】（1）设Q(x 0，4)，代入y 2＝2px ，得x 0＝8p，所以|PQ|＝8p ，|QF|＝p 2＋x 0＝p 2＋8p.由题设得p 2＋8p ＝54×8p ，解得p ＝－2(舍去)或p ＝2，所以C 的方程为y 2＝4x.（2）依题意知l 与坐标轴不垂直，故可设l 的方程为x ＝my ＋1(m≠0)． 代入y 2＝4x ，得y 2－4my －4＝0. 设A(x 1，y 1)，B(x 2，y 2)， 则y 1＋y 2＝4m ，y 1y 2＝－4.故线段的AB 的中点为D(2m 2＋1，2m)， |AB|＝m 2＋1|y 1－y 2|＝4(m 2＋1)．又直线l ′的斜率为－m ，所以l ′的方程为x ＝－1m y ＋2m 2＋3.将上式代入y 2＝4x ，并整理得y 2＋4m y －4(2m 2＋3)＝0.设M(x 3，y 3)，N(x 4，y 4)，则y 3＋y 4＝－4m，y 3y 4＝－4(2m 2＋3)．故线段MN 的中点为E ⎝ ⎛⎭⎪⎫2m2＋2m 2＋3，－2m ，|MN|＝1＋1m 2|y 3－y 4|＝4（m 2＋1）2m 2＋1m 2.由于线段MN 垂直平分线段AB ，故A ，M ，B ，N 四点在同一圆上等价于|AE|＝|BE|＝12|MN|，从而14|AB|2＋|DE|2＝14|MN|2，即 4(m 2＋1)2＋⎝ ⎛⎭⎪⎫2m ＋2m 2＋⎝ ⎛⎭⎪⎫2m 2＋22＝4（m 2＋1）2（2m 2＋1）m 4，化简得m 2－1＝0，解得m ＝1或m ＝－1， 故所求直线l 的方程为x －y －1＝0或x ＋y －1＝0.三、考卷比较本试卷新课标全国卷Ⅰ相比较，基本相似，具体表现在以下方面： 1. 对学生的考查要求上完全一致。

即在考查基础知识的同时，注重考查能力的原则，确立以能力立意命题的指导思想，将知识、能力和素质融为一体，全面检测考生的数学素养，既考查了考生对中学数学的基础知识、基本技能的掌握程度，又考查了对数学思想方法和数学本质的理解水平，符合考试大纲所提倡的“高考应有较高的信度、效度、必要的区分度和适当的难度”的原则． 2. 试题结构形式大体相同，即选择题12个，每题5分，填空题4 个，每题5分，解答题8个（必做题5个），其中第22，23，24题是三选一题。

题型分值完全一样。

选择题、填空题考查了复数、三角函数、简易逻辑、概率、解析几何、向量、框图、二项式定理、线性规划等知识点，大部分属于常规题型，是学生在平时训练中常见的类型．解答题中仍涵盖了数列，三角函数，立体何，解析几何，导数等重点内容。

3. 在考查范围上略有不同，如本试卷第3题，是一个积分题，尽管简单，但全国卷已经不考查了。

四、本考试卷考点分析表（考点/知识点，难易程度、分值、解题方式、易错点、是否区分度题）。