老张博客
2025-12-02 09:03
照片很“日”风,
作者:广树时间:2016-02-12 17:36:33分类:JavaScript
代码下载地址:
http://pan.baidu.com/s/1kUzvAL5
使用方法:
第一步先导入css样式
.right_down_ad_box {
position: fixed;
z-index: 9999;
display:none;
}
.right_down_ad_box .right_down_ad_close {
background-repeat: no-repeat;
height: 20px;
width: 20px;
position: absolute;
top: 10px;
right: 10px;
cursor:pointer;
}
@font-face {font-family: 'iconfont_right_down_ad';
src: url('font/iconfont.eot'); /* IE9*/
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/iconfont.woff') format('woff'), /* chrome、firefox */
url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.right_down_ad_close{
font-family:"iconfont_right_down_ad" !important;
font-size:20px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
※下载的代码中包含了一个css文件夹,这个文件夹所含的css样式表只是用来初始化以下css样式,在使用时不要复制进去。
※下载的代码中包含一个font文件夹,主要是用来设置关闭按钮的颜色。
第二步加入html
<div class="right_down_ad_box"> <div class="right_down_ad_close"></div> <a href="http://www.wikimoe.cn/" target="_blank"><img class="right_down_ad_img" src="images/8.jpg"/></a> </div>
第三步设置js
<script>
$(document).ready(function(){
right_down_window_right = 5 /*设置离浏览器窗口右边有多远*/
right_down_window_bottom = 0 /*设置离浏览器窗口下边有多远*/
right_down_animate = true /*设置是否开启动画效果*/
right_down_img_speed = 1000 /*设置动画速度 1秒=1000*/
right_down_close_color = '#000' /*设置关闭按钮颜色*/
right_down_close_over_color = '#ccc' /*设置关闭按钮经过时的颜色*/
right_down_close_opacity = 0.8 /*设置关闭按钮不透明度*/
$(".right_down_ad_close").css('color',right_down_close_color).css('opacity',right_down_close_opacity);
$('.right_down_ad_close').mouseover(function() {
$(this).css('color',right_down_close_over_color)
});
$('.right_down_ad_close').mouseout(function() {
$(this).css('color',right_down_close_color)
});
$(".right_down_ad_box").show();
if(right_down_animate){
var screenImage = $('.right_down_ad_img')
var theImage = new Image();
theImage.src = screenImage.attr("src");
var imageHeight = theImage.height;
var imageWidth = theImage.width;
$(".right_down_ad_box").css('width',imageWidth + 'px').css('height',imageHeight + 'px').css('right',right_down_window_right + 'px').css('bottom',0 - imageHeight + 'px').animate({bottom:right_down_window_bottom + 'px'},right_down_img_speed);
$('.right_down_ad_close').click(function() {
$(".right_down_ad_box").animate({bottom:0 - imageHeight + 'px'},right_down_img_speed);
$(".right_down_ad_box").hide(1)
});
}
else{
var screenImage = $('.right_down_ad_img')
var theImage = new Image();
theImage.src = screenImage.attr("src");
var imageHeight = theImage.height;
var imageWidth = theImage.width;
$(".right_down_ad_box").css('width',imageWidth + 'px').css('height',imageHeight + 'px').css('right',right_down_window_right + 'px').css('bottom',right_down_window_bottom + 'px');
$('.right_down_ad_close').click(function() {
$(".right_down_ad_box").hide()
});
}
});
</script>
具体效果可以 点击查看例子
※本代码为原创代码,如需转载请注明出处:www.wikimoe.com。











