下载文档原格式
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⿏标滑过显⽰提⽰框实例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，即⿏标经过和⿏标离开。
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菜单导航特效代码，分享给⼤家供⼤家参考。
具体如下：运⾏效果截图如下：具体代码如下<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程序设计有所帮助。
本特效效果模仿百度图片效果。
效果图如下：打开页面效果鼠标放上去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焦点图特效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鼠标划过自动显示提示文字的方法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编辑工作表，本节知识点有，修改单元格中的数据，移动和复制单元格，选择性粘贴单元格，粘贴选项按钮，恢复和撤销。
江西省南昌市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题，是一个积分题，尽管简单，但全国卷已经不考查了。
四、本考试卷考点分析表（考点/知识点，难易程度、分值、解题方式、易错点、是否区分度题）。
