jquery中间框链接提示js代码

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

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

以下是 jquery中间框链接提示js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=gb2312' />
    <title>jquery�м��������ʾ</title>
    <link rel='stylesheet' type='text/css' href='css/style.css' />
    <script type='text/javascript' src='js/jquery-1.7.2.min.js'></script>
    <script type='text/javascript' src='js/example.js'></script>
</head>
<body>
    <div id="content">
        <br /><br /><br />
        <!--DEMO start-->

        <div id="page-wrap">

            <div class="widget widget-one rounded">
                <p>
                    Pellentesque habitant morbi tristique senectus et netus et
                    malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
                    vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
                    placerat eleifend leo.
                </p>
            </div>

            <div class="widget widget-two rounded">
                <p>
                    Pellentesque habitant morbi tristique senectus et netus et
                    malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
                    vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
                    placerat eleifend leo.
                </p>
            </div>

            <div class="widget widget-three rounded">
                <p>
                    Pellentesque habitant morbi tristique senectus et netus et
                    malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
                    vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
                    placerat eleifend leo.
                </p>
                <p>
                    Pellentesque habitant morbi tristique senectus et netus et
                    malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
                    vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
                    placerat eleifend leo.
                </p>
                <p>
                    Pellentesque habitant morbi tristique senectus et netus et
                    malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
                    vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
                    placerat eleifend leo.
                </p>
            </div>

            <div class="widget widget-four rounded">
                <p>
                    Pellentesque habitant morbi tristique senectus et netus et
                    malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
                    vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
                    placerat eleifend leo.
                </p>
                <p>
                    Pellentesque habitant morbi tristique senectus et netus et
                    malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
                    vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
                    placerat eleifend leo.
                </p>
            </div>
        </div>
    </div>
</body>
</html>

JS代码(example.js):

var $el,$tempDiv,$tempButton,divHeight = 0;
	$.fn.middleBoxButton = function(text,url){
	return this.hover(function(e){
	$el = $(this).css("border-color","white");
	divHeight = $el.height() + parseInt($el.css("padding-top")) + parseInt($el.css("padding-bottom"));
	$tempDiv = $("<div />",{
	"class":"overlay rounded"}
);
	$tempButton = $("<a />",{
	"href":url,"text":text,"class":"widget-button rounded","css":{
	"top":(divHeight / 2) - 7 + "px"}
}
).appendTo($tempDiv);
	$tempDiv.appendTo($el);
}
,function(e){
	$el = $(this).css("border-color","#999");
	$(".overlay").fadeOut("fast",function(){
	$(this).remove();
}
)}
);
}
$(function(){
	$(".widget-one").middleBoxButton("Read More","#read");
	$(".widget-two").middleBoxButton("Go to the Store","#store");
	$(".widget-three").middleBoxButton("Continue","#more");
	$(".widget-four").middleBoxButton("Behold!","#bazinga");
}
);

CSS代码(style.css):

/* CSS-Tricks Example by Chris Coyier http://css-tricks.com*/
*{margin:0;padding:0;}
body{font:14px Georgia,serif;background:#333;color:#eee;}
#page-wrap{width:800px;margin:20px auto;}
p{margin:0 0 10px 0;}
.rounded{-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;}
.widget{width:300px;padding:20px;border:1px solid #999;margin:0 20px 20px 0;float:left;position:relative;}
.overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:url(../images/black75.png);background:rgba(0,0,0,0.6);text-align:center;}
.widget-button{position:relative;padding:4px 16px;background:black;border:2px solid white;color:white;text-decoration:none;text-transform:uppercase;-moz-box-shadow:0 0 20px white;-webkit-box-shadow:0 0 20px white;box-shadow:0 0 20px white;}
.widget-button:hover{color:#fe4902;}

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