您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > jQuery > jQuery特效 > jQuery弹出提示特效 > 正文

jquery中间框链接提示特效

2014-04-09 11:04:02 作者:天外飞仙 人气:1260 Views

jquery中间框链接提示特效
jquery中间框链接提示特效
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");});

下载地址
预览地址

链接:http://www.jqueryba.com/3527.html(转载时请注明本文出处及文章链接)

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!