广树
2024-10-10 19:57
@铭心:谢谢大佬夸奖,大佬的博客也很可爱。
关于友链,抱歉,希望能仔细阅读一下友链要求。
作者:广树时间:2016-02-12 17:01:04分类:JavaScript/jQuery/Vue
代码下载地址:
http://pan.baidu.com/s/1mhjK5i4
使用方法:
第一步先导入css样式
.double_ad_right_box,.double_ad_left_box { position: fixed; display:none; z-index:99999; } .double_ad_close { background-repeat: no-repeat; height: 14px; width: 14px; position: absolute; top: 10px; right: 10px; cursor: pointer; } @font-face {font-family: 'iconfont_double_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- */ } .double_ad_close{ font-family:"iconfont_double_ad" !important; font-size:16px;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="double_ad_left_box"> <div class="double_ad_close"></div> <a href="https://www.wikimoe.com/" target="_blank"><img src="images/7.jpg" width="210" height="300" border="0" /> </a> </div> <div class="double_ad_right_box"> <div class="double_ad_close"></div> <a href="https://www.wikimoe.com/" target="_blank"><img src="images/8.jpg" width="210" height="300" border="0" /> </a> </div>
第三步设置js
<script> $(document).ready(function(){ double_ad_left_right = 100 /*设置距离浏览器窗口左右边框的距离*/ double_ad_top = 100 /*设置距离浏览器窗口上边框的距离*/ double_ad_animate = 1000 /*设置关闭动画的时间长度*/ double_ad_close_color = '#333' /*设置关闭按钮颜色*/ double_ad_close_over_color = '#fff' /*设置关闭按钮经过时的颜色*/ double_ad_close_opacity = 0.8 /*设置关闭按钮不透明度*/ $(".double_ad_left_box").css('left',double_ad_left_right).css('top',double_ad_top + 'px'); $(".double_ad_right_box").css('right',double_ad_left_right).css('top',double_ad_top + 'px'); $(".double_ad_close").css('color',double_ad_close_color).css('opacity',double_ad_close_opacity); $(".double_ad_right_box,.double_ad_left_box").show(); $('.double_ad_close').mouseover(function() { $(this).css('color',double_ad_close_over_color) }); $('.double_ad_close').mouseout(function() { $(this).css('color',double_ad_close_color) }); $('.double_ad_close').click(function() { $(this).parent().hide(double_ad_animate) }); }); </script>具体效果可以 点击查看例子
※本代码为原创代码,如需转载请注明出处:www.wikimoe.com。