> 纯CSS打造的鼠标悬停会显示边框和描述的图片相册特效
纯CSS打造的鼠标悬停会显示边框和描述的图片相册特效
纯CSS打造的图片特效，在鼠标悬停时会显示边框和描述的效果，适合用在一些图集功能上面。
不支持IE6，请在其它更高级版本的浏览器下观看效果。
这款jQuery特效很有意思，在一张拼图上，当鼠标悬停在图片上会以渐变方式自动切换另一张图片，可以循环完所有图片，再重新开始，而鼠标点击...
基于CSS的一个简单图片特效代码，能在鼠标滑过图片时显示预设的详细图片信息，在一些需要减少版面占用的设计中很有用。
熟悉CSS的人都知道这是采用滤镜做出来的，但让人吃惊的是它是划过的图片变亮而其它变暗。这让我有点思考不出，按我的想法，应该是一开始是...
基于jquery的一款鼠标响应事件特效，支持鼠标划过周边元素变暗或加亮的效果，类似淘宝天猫首页的商品专题展示的效果，功能颇为强大，不但支...
基于jquery库的一款JS图片翻转特效代码，支持鼠标经过翻转显示第二张图片，并高亮当前图片边框，很适合做品牌推荐，代码也简单易用。
基于jquery的一款简单的鼠标悬停特效，当鼠标移动到图片上，会翻转显示图片详情，很适合做企业产品案例介绍，推荐试用！
很漂亮的一款flash+xml产品图片展示特效代码，支持多张图片轮换显示，在鼠标划过图片时会自动变暗，不规则的多格图片展示设计很有个性，推...
基于jquery的一款图片感应鼠标hover状态提示效果特效，支持鼠标滑过，显示图片文字提示效果，类似于QQ空间装扮的预览效果。
基于jquery的一款图片显示特效代码，支持鼠标悬停图片自动变暗的视觉效果，让当前图片区别于其他图片，很适合在一些多图展示的场合使用。
分享一款常用jquery图片特效代码，当鼠标移动图片上方自动显示标题，支持标题添加超链接，效果比较简单实用，适合用在一些图片展示上，可以...
基于jQuery的一款图片放大特效，当鼠标悬停在图像时，会自动放大图像显示，兼容IE6/7/8/9及主流浏览器，推荐下载试用！
基于jQuery的一款图片特效，透明图层自动跟随鼠标移动的特效，效果很漂亮，推荐下载!
基于jQuery库的一款图片特效代码，在鼠标滑动图片时自动放大当前图片，兼容IE9+、FireFox、Chrome、Safari、Opera等浏览器。
CSS3的众多强大功能让网页效果更加多姿多彩，今天介绍的这款具有独特创意的CSS鼠标悬停效果，利用CSS3的旋转、动画等特性创建出10种不同效...
TinySlideshow JS图片幻灯相册代码，有箭头翻页，缩略图展示、标题和简要说明，功能较齐全，很适合做图片相册展示。
TripTracker JS幻灯相册代码是一款以幻灯方式显示图片的JS插件，具有自动播放，手动播放等多种操作方式，图片能根据屏幕大小自动缩放到适合尺寸。
jQuery Cycle Plugin拥有多种过渡效果，既有常用的淡入淡出，又有缩放切换等十几种过渡效果，做为图片相册十分适合。
很强悍的一款动态图片展示墙JavaScript特效，图片一张张覆盖在粗糙的背景图片下，鼠标移近时自动打开图片显示，效果很特别。
图片放大展示DHTML特效，兼容Firefox和IE，鼠标移到缩略图时自动放大图片，效果动感平滑。
超酷的3D图片展示相册特效代码，图片能跟随鼠标移动，呈现出立体纵深的展示特效，点击图片后自动放大图片。
jQuery幻灯
jQuery相册
jQuery幻灯
jQuery幻灯
jQuery幻灯在外贸网站建设中，搜索是每个网站必备的一个功能，尤其是英语购物网站更是如此，因为购物网站的信息量比较大，而大多数的搜索都要求客户能一眼找到，这就导致一个搜索就需要占据一个较大的位置，有时候客户需要在抢眼的位置显示其他更重要的信息，那么搜索又不能没有，这时通过jquery实现的响应式搜索就能完美解决这个问题，占据较小的位置，客户需要时就显示出来，客户不需要时隐藏，下面我们来看看实现方法：
首先我们需要引用jquery.js,这个可以直接在网上下载，不多说；
&div id=”masthead_search”&
&form id=”header-search-form” method=”get” name=”search” action=”/s/”&
&input id=”keywords” name=”search” value=”Enter a product or brand” autocomplete=”off” size=+ type=”text”&
&input value=”Search” id=”search_submit_button” type=”submit”&
此外还需要引用search.js,代码比较多,其中的一部分代码：
var $j=jQif(jQuery.browser.msie&&parseInt(jQuery.browser.version)==6)
{alert(‘Sorry, your browser (Internet Explorer 6) is not supported. Please upgrade to a modern browser like Google Chrome or Firefox.’);}
if(jQuery.browser.msie&&typeof console!=’function’)
{var console={};console.log=function(logmsg){};}
function isMobile()
{var ua=navigator.userAgent.toLowerCase();var isAndroid=ua.indexOf(“android”)&-1;var isiOS=(ua.indexOf(“iphone”)||ua.indexOf(“ipad”)||ua.indexOf(“ipod”))&-1;return(isAndroid||isiOS);}
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))&cfg.sensitivity){$(ob).unbind(“mousemove”,track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev])}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev])};var handleHover=function(e){var ev=jQuery.extend({},e);var ob=if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t)}if(e.type==”mouseenter”){pX=ev.pageX;pY=ev.pageY;$(ob).bind(“mousemove”,track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}}else{$(ob).unbind(“mousemove”,track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob)},cfg.timeout)}}};return this.bind(‘mouseenter’,handleHover).bind(‘mouseleave’,handleHover)}})(jQuery);
搜索框和搜索按钮代码，这里的名称可以修改，不过要保证和后来JS里面的名称一致就行，当然按钮和搜索框样式可根据自己的实现需要进行调整。
默认效果：
鼠标经过按钮时的效果：
鼠标点击搜索框以后：
鼠标离开搜索框以后，搜索框会自动收缩
总体来说这个效果还是很实用的，如果你有更好的方法欢迎留言交流！
阅读&&(12,607 views)&&
建站价格和案例
为什么选我们
为什么选我们
Categories:技术交流QQ群：
jquery特效
javascript特效
html5_css3特效
>推荐一款漂亮的jQuery消息提示框插件Tipso鼠标悬停鼠标划过弹出消息提示效果
推荐一款漂亮的jQuery消息提示框插件Tipso鼠标悬停鼠标划过弹出消息提示效果
日运行环境：IE6 IE7 IE8及以上 Firefox
推荐一款漂亮的jQuery消息提示框插件Tipso鼠标悬停鼠标划过弹出消息提示效果，jquery提示框插件,jquery Tipso插件,鼠标划过显示提示信息,鼠标悬停弹出提示信息框
上一篇：下一篇：
热门网页特效
友情链接：
版权声明:本站资源均来自互联网，如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
公众号: zhaotexiao君，已阅读到文档的结尾了呢~~
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
鼠标悬浮文本框信息显示解决办法
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口