自定义滚动条插件 – jscoll
滚动条样式至今没有一个统一的标准,各家浏览器有各家的做法,IE高版本索性放弃了给用户自定义滚动条的机会
如果非要做,最好的解决办法莫过于用JS模拟一个滚动条出来,而且兼容性还好.
滚动条样式至今没有一个统一的标准,各家浏览器有各家的做法,IE高版本索性放弃了给用户自定义滚动条的机会
如果非要做,最好的解决办法莫过于用JS模拟一个滚动条出来,而且兼容性还好.
刚码完,各种BUG,仅供研究
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <style> #lightbox{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999!important; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; background: rgba(35,35,35,.7); *background:rgb(35,35,35); *filter: alpha(opacity=95); } /*ie6 fix*/ * html { background:url(*) fixed; } * html body { margin:0; height:100%; } * html #lightbox { position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); } #lightbox p{ background: url("img/loader.gif") no-repeat center center; height: 100%; width: 100%; line-height: 1px; text-align: center; display: inline-block; } #lightbox img{ display: inline-block; max-width: 100%; margin: 0; margin-top: 3%; padding: 0; width: auto; height: auto; vertical-align: middle; border: 15px solid #fff; } </style> <script> (function($) { $.fn.lightBox = function() { $(this).bind("click",function () { var url = $(this).attr("href"); if ($("#lightbox").length == 0) { $("body").append('<div id="lightbox"><p><img src="'+url+'" /></p></div>'); $("#lightbox").click(function (event) { $(this).fadeOut().remove(); event.stopPropagation(); }) } return false; }); }; })(jQuery); $(document).ready(function() { $('a[href$="jpg"],a[href$="png"],a[href$="gif"]').lightBox(); }); </script> |
首先声明这个类不是朽木原创的,没找到出处,今天用到了 顺手码了一段CSS样式.
使用方法很简单只需要指定总页数就可以了.
$pager = new page($total); echo $pager->pageShow(); |
//总条数 $total = $db->getVar("SELECT count(*) FROM `{$table}`"); //初始化分页类 $pager = new page($total); $sql = "SELECT * FROM `{$table}` ORDER BY `id` DESC LIMIT ".$pager->__get('limit'); $list = $db->getData($sql); //分页HTML $pagehtml = $pager->pageShow(); |
<?php echo strip_tags(wp_nav_menu( array( 'theme_location' => 'secondary' , 'container' => false, 'items_wrap' =>'%3$s', 'echo' => false)), '<a>' ); ?> |
在BlueHost面板点击PHP Config
切换到PHP 5.4 (Single php.ini),点击Save保存,这时候FTP连接到BlueHost,在/public_html
目录下会出现一个php.ini
文件,邮件把所有权限的勾全部取消掉,下载这个文件,首先找到如下对应的参数修改一下
无意中看到的Google Developers的CSS,头部的reset写的很好,做前端的朋友值得借鉴.
折腾没有尽头,晒晒成果
Chrome里默认情况下,在页面中拖动链接或者文本鼠标会是个禁止点击的样式,并且会丢失mouseup
事件,所以我们不得不使用HTML5的拖放事件 – drag and drop.
然后在拖动开始事件dragstart
中记录鼠标位置,放置事件drop
中判断鼠标是往哪个方向移动过了,下面这段代码可以识别出左上,左下,右上,右下. 还可以在这个基础上判断一下鼠标移动距离来添加更多的动作.