广树
2024-10-10 19:57
@铭心:谢谢大佬夸奖,大佬的博客也很可爱。
关于友链,抱歉,希望能仔细阅读一下友链要求。
作者:广树时间:2016-02-12 17:36:33分类:JavaScript/jQuery/Vue
代码下载地址:
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。