jQuery鼠标移到图片悬浮提示特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标移到图片悬浮提示特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html><!--[if IE 7]>
<html class="ie ie7" lang="en-US">

<![endif]--><!--[if IE 8]>
<html class="ie ie8" lang="en-US">

<![endif]--><!--[if !(IE 7) | !(IE 8)  ]>
<!-->
<html lang="en-US">

<!--<![endif]-->

<head>
<link rel="stylesheet" type="text/css" href="css/default.include.b2676e.css" media="all" />
<script type="text/javascript" src="js/default.include.c78d4e.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width" />
<title>jQuery鼠标移到图片悬浮提示</title>
<link rel="stylesheet" id="spi-render-css-css" href="css/render.css?ver=3.5.2" type="text/css" media="all" />
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #1e73be; }
</style>
</head>

<body class="page page-id-975 page-child parent-pageid-93 page-template page-template-page-templatesdemo-sit-php custom-background custom-font-enabled single-author full-width">

<div id="page" class="hfeed site">
	<div id="main" class="wrapper">
		<div id="primary" class="site-content">
			<div id="content" role="main">

            <article id="post-975" class="post-975 page type-page status-publish hentry">
                    <header class="entry-header">
                        <h1 class="entry-title">jQuery鼠标移到图片悬浮提示</h1>
                    </header>
				<div class="entry-content">
					Here you can test the Smart Image Tooltip for jQuery &amp; CSS.<br />
					<br />
				</div>
				<ul class="mrs-tabs-list">
					<li class="mrs-current-tab">
					<a id="force-click" href="#mrs-demos">Demos</a></li>
				</ul>
				<div class="mrs-tabs-content">
					<div id="mrs-demos" class="mrs-srm-demo mrs-tab mrs-current-content">
						<div class="srm-helper-demoarea" style="text-align: center;">
							<div id="sit-simple-demo">
								<h4>Thumbnails with Simple Template, Image width 
								set to 480px</h4>
								<a class="sit-preview" href="images/cat.jpg">
								<img alt="" src="images/cat-thumb.jpg" data-preview-url="images/cat-medium.jpg" /></a>
								<a class="sit-preview" href="images/bumbleebee.jpg">
								<img alt="" src="images/bumbleebee-thumb.jpg" data-preview-url="images/bumbleebee-medium.jpg" /></a>
								<a class="sit-preview" href="images/corals.jpg">
								<img alt="" src="images/corals-thumb.jpg" data-preview-url="images/corals-medium.jpg" /></a>
								<a class="sit-preview" href="images/flower.jpg">
								<img alt="" src="images/flower-thumb.jpg" data-preview-url="images/flower-medium.jpg" /></a>
								<a class="sit-preview" href="images/kittens.jpg">
								<img alt="" src="images/kittens-thumb.jpg" data-preview-url="images/kittens-medium.jpg" /></a>
							</div>
						</div>
					</div>
				</div>
				<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#sit-simple-demo .sit-preview").smartImageTooltip({previewTemplate: "simple", imageWidth: "480px"});
        jQuery("#sit-caption-demo .sit-preview").smartImageTooltip({previewTemplate: "caption", scaleDesktop: 70, scaleMobile: 55});
        jQuery("#sit-envato-demo .sit-preview").smartImageTooltip({previewTemplate: "envato", imageWidth: "500px"});
        jQuery("#sit-envato-link-demo .sit-preview").smartImageTooltip({previewTemplate: "envato"});
        jQuery("#sit-nolink-demo img.sit-thumb").smartImageTooltip({previewTemplate: "caption", imageWidth: "480px"});
    });
</script>
				</article>
        	</div>
		</div>
	</div>
	<!-- #main .wrapper --></div>
<script type="text/javascript">
jQuery(document).ready(function() {        jQuery(".adminbar-quick-backup-run a").click(function(e) {
            e.preventDefault();
            var code = jQuery(this).attr("href").substr(11);
            jQuery.ajax({
                type: 'post', success: function(json) { alert(json.message); },
                dataType: 'json', data: { runquick: {id: 1, type: code, control: 0} },
                url: gdpt_ajax_url + '?action=presstools_backup_quick&_ajax_nonce=376ffa5105'
            });
        });
    });</script>
<script type="text/javascript" src="js/async-share.js?ver=3.5.2"></script>
<script type="text/javascript" src="js/default.include-footer.304291.js"></script>
</body>
</html>

JS代码(async-share.js):

 /* ============================================================ * async-share.js v1.01 * @author:Rachel Baker * * Credits:* Inspired by Stoyan Stefanov and Aaron Peters * ============================================================ * Copyright 2012 Rachel Baker * * This program is free software:you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation,either version 3 of the License,or * (at your option) any later version. * * This program is distributed in the hope that it will be useful,* but WITHOUT ANY WARRANTY;
	without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not,see <http://www.gnu.org/licenses/>. * ============================================================ */
jQuery(document).ready(function(d,s,id){
	// fb + common var js,fjs = d.getElementsByTagName(s)[0];
	// facebook if (d.getElementById(id)){
	return;
}
if (jQuery('li.fb-share').length){
	js = d.createElement(s);
	js.id = id;
	js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
	fjs.parentNode.insertBefore(js,fjs);
}
// tweet if (jQuery('li.twitter-share').length){
	js = d.createElement(s);
	js.src = '//platform.twitter.com/widgets.js';
	fjs.parentNode.insertBefore(js,fjs);
}
// +1 if (jQuery('li.gplus-share').length){
	js = d.createElement(s);
	js.src = 'https://apis.google.com/js/plusone.js';
	fjs.parentNode.insertBefore(js,fjs);
}
// linkedin if (jQuery('li.linkedin-share').length){
	js = d.createElement(s);
	js.src = '//platform.linkedin.com/in.js';
	fjs.parentNode.insertBefore(js,fjs);
}
// hackernews if (jQuery('li.hn-share').length){
	js = d.createElement(s);
	js.src = '//hnbutton.appspot.com/static/hn.js';
	fjs.parentNode.insertBefore(js,fjs);
}
}
(document,'script'));

CSS代码(render.css):

.stw-widget ul.stw-header{margin:0 !important;}
.stw-widget li.stw-tab{padding:0 !important;}
/* Style:Simple */
.stw-style-simple .stw-header{margin:0;padding:0;}
.stw-style-simple .stw-tab{margin:0 4px 0 0;display:inline-block;zoom:1;*display:inline;background:#eee;border:1px solid #666;}
.stw-style-simple.stw-location-top .stw-tab{border-bottom:none;border-radius:4px 4px 0 0;}
.stw-style-simple.stw-location-bottom .stw-tab{border-top:none;border-radius:0 0 4px 4px;}
.stw-style-simple .stw-tab a.stw-title{color:#666;font-size:14px;line-height:2em;display:block;padding:0 8px;outline:none;text-decoration:none;}
.stw-style-simple .stw-tab a.stw-title:hover{text-decoration:underline;}
.stw-style-simple .stw-tab:last-child{margin-right:0;}
.stw-style-simple .stw-tab.stw-tab-active{border:1px solid #666;background:#ffffff;position:relative;}
.stw-style-simple.stw-location-top .stw-tab.stw-tab-active{border-bottom:none;top:1px;padding-top:6px;}
.stw-style-simple.stw-location-bottom .stw-tab.stw-tab-active{border-top:none;bottom:1px;padding-bottom:6px;}
.stw-style-simple .stw-tab.stw-tab-active a{color:#666;font-weight:bold;}
.stw-style-simple .stw-container{background:#fff;border:1px solid #666;padding:10px;border-radius:0 4px 4px 4px;}
.stw-style-simple.stw-location-bottom .stw-container{border-radius:4px 4px 4px 0;}
/* Style:Elegant */
.stw-style-elegant .stw-header{margin:0;padding:0;}
.stw-style-elegant.stw-location-top .stw-header{border-bottom:1px solid #666;margin-bottom:5px;}
.stw-style-elegant.stw-location-bottom .stw-header{border-top:1px solid #666;margin-top:5px;}
.stw-style-elegant .stw-tab{margin:0;display:inline-block;zoom:1;*display:inline;}
.stw-style-elegant .stw-tab a.stw-title{color:#666;line-height:2em;font-size:14px;display:block;padding:0 8px;outline:none;text-decoration:none;}
.stw-style-elegant .stw-tab a.stw-title:hover{text-decoration:underline;}
.stw-style-elegant.stw-location-top .stw-tab.stw-tab-active{border-bottom:4px solid #666;}
.stw-style-elegant.stw-location-bottom .stw-tab.stw-tab-active{border-top:4px solid #666;}
.stw-style-elegant .stw-tab.stw-tab-active a.stw-title{color:#666;font-weight:bold;}
/* Style:Elegant Box */
.stw-style-elegant-box{border:1px solid #666;padding:10px;background:#ffffff;}
.stw-style-elegant-box .stw-header{margin:0;padding:0;}
.stw-style-elegant-box.stw-location-top .stw-header{border-bottom:1px solid #666;margin-bottom:5px;}
.stw-style-elegant-box.stw-location-bottom .stw-header{border-top:1px solid #666;margin-top:5px;}
.stw-style-elegant-box .stw-tab{margin:0;display:inline-block;zoom:1;*display:inline;}
.stw-style-elegant-box .stw-tab a.stw-title{color:#666;line-height:2em;font-size:14px;display:block;padding:0 8px;outline:none;text-decoration:none;}
.stw-style-elegant-box .stw-tab a.stw-title:hover{text-decoration:underline;}
.stw-style-elegant-box .stw-tab.stw-tab-active{position:relative;}
.stw-style-elegant-box.stw-location-top .stw-tab.stw-tab-active{border-bottom:4px solid #666;}
.stw-style-elegant-box.stw-location-bottom .stw-tab.stw-tab-active{border-top:4px solid #666;}
.stw-style-elegant-box .stw-tab.stw-tab-active a.stw-title{color:#666;font-weight:bold;}
.stw-style-elegant-box .stw-container{background:#fff;border:dashed #666 1px;padding:10px;}
.stw-style-elegant-box.stw-location-top .stw-container{margin-top:10px;}
.stw-style-elegant-box.stw-location-bottom .stw-container{margin-bottom:10px;}
/* Style:Classic */
.stw-style-classic .stw-header{margin:0;padding:0;background-color:#666;border:1px solid #666;border-bottom:none;border-top:none;}
.stw-style-classic.stw-location-top .stw-header{border-radius:4px 4px 0 0;}
.stw-style-classic.stw-location-bottom .stw-header{border-radius:0 0 4px 4px;}
.stw-style-classic .stw-tab{margin:0;display:inline-block;zoom:1;*display:inline;}
.stw-style-classic .stw-tab a.stw-title{color:#fff;font-size:14px;line-height:2.3em;display:block;padding:0 8px;outline:none;text-decoration:none;}
.stw-style-classic .stw-tab a.stw-title:hover{text-decoration:underline;}
.stw-style-classic .stw-tab:last-child{margin-right:0;}
.stw-style-classic .stw-tab.stw-tab-active{background:#fff;position:relative;}
.stw-style-classic .stw-tab.stw-tab-active a.stw-title{color:#666;font-weight:bold;}
.stw-style-classic.stw-location-top .stw-tab:first-child{border-radius:2px 0 0 0;}
.stw-style-classic.stw-location-bottom .stw-tab:first-child{border-radius:0 0 0 2px;}
.stw-style-classic.stw-location-top .stw-tab.stw-tab-active{top:1px;}
.stw-style-classic.stw-location-bottom .stw-tab.stw-tab-active{bottom:1px;}
.stw-style-classic .stw-container{background:#fff;border:1px solid #666;padding:10px;border-radius:0 0 4px 4px;}
.stw-style-classic.stw-location-bottom .stw-container{border-radius:4px 4px 0 0;}
/* Style:Buttons */
.stw-style-buttons .stw-header{border-radius:4px;margin:0;padding:4px;background-color:#666;}
.stw-style-buttons.stw-location-top .stw-header{margin-bottom:4px !important;}
.stw-style-buttons.stw-location-bottom .stw-header{margin-top:4px !important;}
.stw-style-buttons .stw-tab{margin:0 4px 0 0;display:inline-block;zoom:1;*display:inline;border-radius:4px;}
.stw-style-buttons .stw-tab a.stw-title{color:#fff;font-size:14px;line-height:2em;display:block;padding:0 8px;outline:none;text-decoration:none;}
.stw-style-buttons .stw-tab a.stw-title:hover{text-decoration:underline;}
.stw-style-buttons .stw-tab:last-child{margin-right:0;}
.stw-style-buttons .stw-tab.stw-tab-active{background-color:#fff;position:relative;font-weight:bold;}
.stw-style-buttons .stw-tab.stw-tab-active a.stw-title{color:#666;}
.stw-style-buttons .stw-container{background:#fff;border:1px solid #666;padding:10px;border-radius:4px;}

附件:下载该文件资源,减少时间成本(增值服务)