在给一个客户做站时 (测试站) 要用到聚焦广告，网上简单搜了一下 Flash 版的都不太满意那些样式，后来萌发自己用 JQuery 写一个的想法，于是就做了，实现起来并不难，这里不得不赞叹一下 JQuery 的强大。
HTML 部分
<div id=”doFocus”>
<img src=”ad/01.jpg” />
<img src=”ad/02.jpg” />
<div id=”focusNav”></div>
</div>
CSS 部分
#doFocus{ position:relative; width:694px; height:172px; border:2px #FFF solid; overflow:hidden;}
#doFocus img{ position:absolute; width:694px; height:172px; top:0px; left:0px;}
#focusNav{ position:absolute; top:142px; right:10px; z-index:2; opacity:0.8; filter:Alpha(Opacity=80);}
#focusNav a{ display:block; float:right; width:20px; height:20px; margin-left:10px; line-height:20px; text-align:center; background:#333; color:#FFF; font-weight:bold;}
#focusNav .thisclass,#focusNav a:hover{ background:#fff; color:#333;}
阅读全文…
使用方法很简单，将下面的 JS 脚本与 JQuery 一同载入，在需要做 Tip 效果的链接上添加一个 tips 属性，属性值就是 Tip 框里要显示的内容。
比如：<a href=”javascript:void(0)” tips=”这个是提示内容！” />测试提示</a>
想要美化 Tip 框的话完全可以在 tips 属性里加入用来修饰的 html 标签，然后在 CSS 文件里针对 #tip 以及其子元素定义 CSS 就可以了。
比如：<a href=”javascript:void(0)” tips=”<h3>提示标题</h3><div class=’content’>这个是提示内容！</div>” />测试提示</a>
<script type=”text/javascript”>
$().ready(function(){
$(‘body’).append(‘<div id=”tip”></div>’);
$(‘#tip’).css({display:’none’,left:’0′,top:’0′,position:’absolute’});
$(‘a[tips]’).hover(
function(e){
var mouse = $.mousePos(e);
if(mouse.x > $(‘body’).width() – $(‘#tip’).width()){
$(‘#tip’).css(‘left’, $(‘body’).width() + $(document).scrollLeft() – $(‘#tip’).width() – 10 + ‘px’);
}else{
$(‘#tip’).css(‘left’, mouse.x + 10 + ‘px’);
}
$(‘#tip’).css(‘top’, mouse.y + 10 + ‘px’);
$(‘#tip’).html($(this).attr(‘tips’));
$(‘#tip’).show();
},
function(){
$(‘#tip’).hide();
}
);
});
$.extend({
mousePos:function(e){
var x,y;
var e = e||window.event;
return{
x:e.clientX + $(‘body’).scrollLeft() + $(document).scrollLeft(),
y:e.clientY + $(‘body’).scrollTop() + $(document).scrollTop()
};
}
});
</script>
在做一个刷淘宝信用的网站时，需要一个跑马灯的广告效果。网上找的那种用 table 的不太好用，便自己动手写一个。因为程序是用 PHPCMS，其自带了 JQuery，自然也用 JQuery 来实现了。暂时写了个简单的，以后有时间再完善吧。
html 部分：
<div id=”marqee”>
<div id=”leftButton”></div>
<div id=”marqeeArea”>
<ul>
<li><img src=”1.gif” /></li>
<li><img src=”2.gif” /></li>
<li><img src=”3.gif” /></li>
</ul>
</div>
<div id=”rightButton”></div>
</div>
CSS 部分：
#marqee{ width:960px; height:61px;}
#marqee #leftButton{ width:24px; height:61px; float:left; cursor:pointer;}
#marqee #rightButton{ width:24px; height:61px; float:left; cursor:pointer;}
#marqee #marqeeArea{ position:relative; width:912px; height:61px; overflow:hidden; float:left;}
#marqee #marqeeArea ul{ position:relative; display:block; height:61px; overflow:hidden; list-style:none;}
#marqee #marqeeArea ul li{ width:121px; height:61px; float:left; text-align:center;}
阅读全文…
img {
vertical-align: middle;
max-width:100px; /* FF IE7 */
max-height:80px; /* FF IE7 */
width:expression(this.width > 100 && this.width > this.height ? 100 : true);
height:expression(this.height > 80 && this.height > this.width ? 80 : true);
overflow:hidden;
}
这个样式就是将超过 100×80 的图片按比例自动缩小，支持 IE6,IE7,IE8,FF。里面的 vertical-align: middle; 是垂直居中，不过这个仅当图片在 table 里才有效。