首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

仿异次元百度分享工具条张戈修改版

增加这个跟随横条的初衷,其实是最近启用百度两侧漂浮广告后,发现博客左侧的分享条以及右侧的卷动按钮在 1280*800 分辨率下,会被广告遮盖,有点不爽。于是就想起了以前看到过的这个玩意儿。...当我回访重量网络博客时,发现他的工具条有个很棒的功能,那就是字体大小及侧边栏控制,可使用大字体,并开启宽浏览!感觉很棒! 于是,就给他留言,想他给下源码。...二、原版出处: C++爱好者(第①版)、WP 大学(第②版) 三、修改内容: ①、加入文章字体大小控制按钮; ②、加入文章宽/窄浏览控制按钮及颤抖特效; ③、加入工具条界面一起拉伸/压缩效果; ④、..."> /***关闭/显示侧边栏***/ jQuery(document).ready(function($){ $('#stb_btn_kuan').click(function(){

1.3K80
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端成神之路-定位

    定位 将盒子定在某一个位置 自由的漂浮在其他盒子的上面 —— CSS 离不开定位,特别是后面的 js 特效。 2....结论:要实现以上效果,标准流或浮动都无法快速实现 pink老师一句话说出定位: 将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面 所以,我们脑海应该有三种布局机制的上下顺序...4.2 仿新浪头部和广告 ?...新浪案例分析 顶部图片固定在浏览器可视窗口顶部,不会窗口一起滚动; 左右两侧的广告图片固定在浏览器可视窗口的左右两侧,不会窗口一起滚动; 注意:底部的内容图片初始显示在顶部图片的下方,如何解决?...浮动 可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列 3). 定位 定位最大的特点是有层叠的概念,就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。

    1.9K20

    经验分享:多复杂动画CSS技巧三则

    注:示例代码的私有前缀均省略,大家自行脑补 技巧一、使用animation-play-state控制每动画播放 1....一般做法是,当对应一内容进入的时候,使用JS给容器添加类名active: container.classList.add("active"); 如果你做的动画逼格较高,希望每次浏览这一内容的时候,动画都走一遍...*/ 其中float .5s 1s infinite这里的1s就是无限漂浮动画执行延迟的时间,于是,两个动画完美配合,感觉就像是一个动画。...但是: ① 提取公用动画 这类多动画是有N多元素同时执行不同的动画。比方说,火箭是淡出,然后上下漂浮;火箭的火焰是淡出,然后大小变化;黑洞是淡出,然后左右波。你如何实现?...结果,发现自己留了一个坑,拿第2举例,桌面版,长这样,右侧动画内容并不是完全居中的: ?

    1.3K20

    经验分享:多复杂动画CSS技巧三则 - 腾讯ISUX

    注:示例代码的私有前缀均省略,大家自行脑补 技巧一、使用animation-play-state控制每动画播放 1.类名active与动画触发 首先,使用active触发每一的动画,几乎已经约定俗成...一般做法是,当对应一内容进入的时候,使用JS给容器添加类名active: container.classList.add("active"); 如果你做的动画逼格较高,希望每次浏览这一内容的时候,动画都走一遍...element">小火箭 .element { animation: fadeIn 1s, float .5s 1s infinite; } /* 我淡出, 需要1秒;我1秒后开始无限漂浮...*/ 其中float .5s 1s infinite这里的1s就是无限漂浮动画执行延迟的时间,于是,两个动画完美配合,感觉就像是一个动画。...但是: ① 提取公用动画 这类多动画是有N多元素同时执行不同的动画。比方说,火箭是淡出,然后上下漂浮;火箭的火焰是淡出,然后大小变化;黑洞是淡出,然后左右波。你如何实现?

    1.6K20

    大数据时代移动营销的十大趋势

    打开百度地图,或是使用“附近”、“搜索”功能,会看到一个漂浮在地图上的甜筒标识。...九、多整合成移动营销必然趋势 华通明略(MillwardBrown)发布的最新报告显示,中国消费者使用智能手机、平板电脑等多媒体的频率要高于世界上任何其他地区。多整合将成为移动营销的主导方向。...这里的多整合包含两层含义:一是多整合的大数据分析。...用户可以同时使用手机、iPad、电脑、电视屏、户外等终端,数字广告平台需要知道用户在多上浏览的信息和行为模式,从而通过跨来修正和完善对消费者的认知,让移动广告投放更精准更有效。...事实上,百度、阿里巴巴和腾讯等互联网巨头已经开始在做跨的数据分析。二是多的整合营销。即将智能手机与PC电脑、电视、户外广告等进行较好的关联和互动,实现线上线下的整合推广。

    1.6K30

    【干货】大数据时代移动营销的十大趋势

    打开百度地图,或是使用“附近”、“搜索”功能,会看到一个漂浮在地图上的甜筒标识。...9 多整合成移动营销必然趋势 华通明略(Millward Brown)发布的最新报告显示,中国消费者使用智能手机、平板电脑等多媒体的频率要高于世界上任何其他地区。多整合将成为移动营销的主导方向。...这里的多整合包含两层含义:一是多整合的大数据分析。...用户可以同时使用手机、iPad、电脑、电视屏、户外等终端,数字广告平台需要知道用户在多上浏览的信息和行为模式,从而通过跨来修正和完善对消费者的认知,让移动广告投放更精准更有效。...事实上,百度、阿里巴巴和腾讯等互联网巨头已经开始在做跨的数据分析。二是多的整合营销。即将智能手机与PC电脑、电视、户外广告等进行较好的关联和互动,实现线上线下的整合推广。

    1.7K60

    AI一分钟 | 特斯拉官方回应致死事故:鉴定报告尚不完整

    ,可抓拍人与宠物之间的互动 阿里云在MWC2018展会上发布8款云计算AI产品,包括图像搜索、智能客服云小蜜、大数据PaaS产品Dataphin等 国际空间站的宇航员今年将迎来一位新乘客:一个能说话的漂浮机器人...机器人Cimon今年将宇航员登上国际空间站 据英国《每日邮报》2月26日报道,国际空间站的宇航员今年将迎来一位新乘客:一个能说话的漂浮机器人。...他是一个带着笑脸的球形机器人,重5公斤,拥有人工智能大脑和8英寸大的显示。通过螺旋桨驱动的推进器,他能够在失重环境中移动,他懂得欣赏音乐,还掌握了1000多个句子。...此外,他还能够在国际空间站周围漂浮飞行,提供技术帮助、警示系统故障和危险,并为宇航员提供一系列娱乐。(via:环球网科技) 7.

    66770

    第135天:移动端开发经验总结

    触摸事件的响应顺序 1、ontouchstart 2、ontouchmove 3、ontouchend 4、onclick  300ms延时 2、Event originalEvent (原生事件) 是jquery...四、常见的移动端问题 1、什么是Retina 显示,带来了什么问题   retina:一种具备超高像素密度的液晶,同样大小的屏幕上显示的像素点由1个变为多个,如在同样带下的屏幕上,苹果设备的retina...显示中,像素点1个变为4个   在高清显示中的位图被放大,图片会变得模糊,因此移动端的视觉稿通常会设计为传统PC的2倍。   ...其它元素的取值为原来的1/2,例如视觉稿40px的字体,使用样式的写法为20px  .css{font-size:20px} 2、 百度禁止转码   通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告...几乎一样,会jquery基本会zepto; 搭配 backbone underscore http://daneden.github.io/animate.css/ 动画css

    1.6K30

    浅析利用AI智能识别与视频监控技术打造智慧水产养殖监管系统

    借助TSINGSEE青犀视频AI算法平台以及安防监控系统EasyCVR平台,养殖户可以通过视频监控对水产养殖环境进行全天候、实时监管,通过数字大对各养殖区域环境进行实时远程监控,对异常情况(如人员闯入...、水质变色、水面漂浮物等)进行抓拍预警,并通知提醒养殖户及时现场确认,保障养殖现场安全生产。...5)水面异常漂浮物AI智能算法平台支持识别水域表面存在的异常漂浮物,包括水面垃圾、塑料、水葫芦、水藻、凌汛等。...6)远程监控通过视频监控综合管理平台EasyCVR平台设立统一监控管理站,对分布在不同区域的多个设备和信息进行全数字化集中监控管理,满足现代化水产养殖统一监管的需要。

    42920

    推荐收藏|10个炫酷的数据可视化作品含源码

    1.北斗车联网大数据平台 基于jquery,bootstrap,echarts编写,代码整洁清晰。 2.车联网数据平台概览 基于jquery,echarts编写。...3.大统计数据 基于jquery,echarts编写,样式有点问题,但是代码结构比较清晰。 4.大数据统计展示大 基于jquery,bootstrap,echarts编写,代码整洁清晰。...7.物流大数据服务平台 基于jquery,bootstrap,echarts编写,代码清晰。 8.智慧旅游综合服务平台 基于jquery,echarts编写,多个页面。...9.智慧社区内网比对平台 基于jquery,layer、echarts编写。 10.智慧物流服务中心 基于jquery,layer、echarts编写。...数据可视化源码已上传到网盘,关注【青年码农】,后台回复【大源码】,提供网盘下载。 青年码农-获取更多.jpg

    2.6K2416

    Native地图与Web融合技术的应用与实践

    原因是我们打车地图使用的是Web版的地图(通过腾讯地图JavaScript API),业内同类产品使用的是Native版的地图SDK,Native地图相比Web地图具有天然的性能优势,所以美团打车地图从首地图加载到后续的地图操作体验都有一定差距...但从打车业务角度来看,因为打车业务有很多功能入口需要漂浮在地图之上,如起终点卡片、用户中心入口等,这种漂浮功能在技术上并不容易实现,而且还要保证用户触摸动作在漂浮元素与地图上发生时,分别派发给各自的事件系统...广告入口:右上角图标,点击后跳转到H5运营页面。 ? 上文第一类,H5页面与Native地图分别位于两个独立页面中,只能满足部分地图场景的需求,无法布局为上图H5与地图同框显示的效果。...左上角、右上角的更多菜单,广告入口位置需要新增2个WebView组件才能实现覆盖在地图之上,WebView组件再加载对应H5页面实现上述布局,整个步骤比较繁琐。...首地图数据指标也有显著提升,如下表所示: ? 目前线上运行稳定,上线2月期间,Crash数量为个位数,Crash率远低于0.1‰。

    1.4K10

    静水流深 | QQ闪设定

    在这些元素之中,闪是直接关系到品牌形象的最为重要的元素之一,因为它决定了应用服务的第一印象。本文将介绍为跟上快速变化的设计趋势,最近被重新设计的QQ闪的设计故事。...然而3D图形最近已成为一种非常突出的趋势并且被广泛应用于诸如品牌设计和广告设计等多种媒介中,视觉上对许多人来讲也有吸引力和新鲜感。...第三轮设计 QQ里的无限宇宙 最后一轮,我们用一些含有各种纹理的彩色几何图形漂浮在QQ形的窗口上,象征QQ平台将各种服务汇聚在一起,创造新世界的服务意义。...这个方向被选为新的QQ闪设计,并在最终完善后应用。...Wallpaper 壁纸 ◀向左滑动查看更多图片 后台回复【闪】可获取全套壁纸 QQ的闪设计会继续保持更新,努力展现QQ的多样性与成长性,让用户感受QQ品牌的生机与活力。

    97120

    智慧灯杆——智慧生活触手可及

    作为新一代城市基础设施的智慧灯杆,也是构建智慧社区的重要载体,由杆体与照明、LED显示、监控摄像头、报警器、应急广播、网络、5G基站等设施组成,实现社区的各种智能化场景。...1530849251568063158.jpg 社区灯杆智能照明场景变化调节灯光,节约公共照明成本,同时美化环境。智慧化一杆多用,还呈现在以下几个方面。...从便民方面,基座上的LED显示当前区域的天气、空气质量、环境质量等情况实时监测;灯杆搭建5G微基站,WiFi覆盖社区,提高社区的网络服务,让社区服务更贴心。...从社区商业方面,通过灯杆智能屏幕发布物业通知、社区文化宣传、公益广告、商业信息、活动优惠等内容,让社区生活更多样。

    76711

    由浅入深 定制Bootstrap开发自己网站的六种方法

    对于Bootstrap这个CSS框架,很多程序员持鄙视的态度,就如鄙视jQuery一般。...先说给组件做减法定制,就是给Common CSS、Components、JavaScript components以及jQuery plugins做减法,页面下方的变量一律保持默认。...删减CSS组件配套的JS组件、删减jQuery组件:官方推荐的是用Grunt来合并所有JS组件,当然前提是你需要学习掌握Grunt。如果你并不想学习Grunt,那么利用官网定制页面来定制也是可以的。...我们自己写模板可以从制作首页开始,首页从制作顶部导航开始,做出一个让人无法看出这是用Bootstrap制作的导航,接下来可以是制作BANNER模块,以及BANNER下方的导航模块,然后是正文第一、第二...接着是nav元素,然后是#wrap元素,然后是footer元素,最后是#fixed元素(用于漂浮、弹出层等),不再细说。

    1.6K20

    Unity基础教程-物体运动(九)——游泳(Moving through and Floating in Water)

    如果在下一次Update之前出现了多个物理步长,攀爬运动在游泳时仍然有可能保持活跃,但这也没关系,因为这是在过渡到游泳时发生的,所以准确的时间并不重要。...我们还将阻力应用于角速度,以使对象在漂浮时不会保持旋转。 ? ? (漂浮物) 浮动对象现在可以在浮动时以任意旋转结束。通常,物体会以最轻的一面朝上的方式漂浮。...(轻微的浮力偏移) 4.3 和漂浮物交互 当在有漂浮物的水中游泳时,轨道摄像机会来回晃动,因为它试图停留在物体的前面。...请注意,偏移量对象缩放。同样,增加对象的质量使其更稳定。 ? ?...对于拥有多个浮力点的大型物体来说,这是一个潜在的问题,因为有些物体可能会浮在水面上,而另一部分仍在水下。结果就是最高点最终会悬浮起来。你可以通过将一个大而轻的物体部分推出水面来看到现象。 ?

    1.8K20

    android 学生模式,(续上篇)多亲AI助手——学生模式体验小记

    然而实验失败,多亲AI助手并不能有线投。 hdmi识别为耳机,显示器无信号 希望厂家加上这个小功能,作为小电视的播放器还是很不错的。 二、学生模式是个啥?...但是没有1尼特夜间护眼模式,也没有屎黄护眼模式,略遗憾。 六、通话录音功能 答:有的。通话时开启既可。 七、锁密码 答:支持pin和图案解锁。 希望能加入双击亮功能。...九、小爱唤醒 答:有防误触设定,需先亮(锁界面既可),长按AI键唤醒小爱。 十、如何关闭和卸载系统app 答:可以进入设置-应用进行。 最后、有没有AD轰炸 答:非常欣慰,系统毫无广告。...这年头,居然没有广告! 希望厂家保持,正式版系统也不植入广告。...【完】PS:其实第一篇体验,还有视频测评,优酷源二压太厉害了,没有贴上,之后放在了B站,骗了一个月的大会员(投稿既可有)。

    1.2K10

    06-移动端开发教程-fullpage框架

    CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。...我们经常见到一些全屏的特绚丽页面,手指或者鼠标滑动一下就是一整切换,而且还有各种效果。比如:全屏滑动案例 下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。...多个回调函数。 支持手机,平板触摸事件。 支持css3动画。 支持窗口缩放。 窗口缩放时自动调整。 可设置滚动宽度,背景颜色,滚动速度,循环选项,回调,文本对齐方式等。...2. fullpage.js的使用 2.1 兼容性 fullpage.js是jQuery的插件,需要依赖jQuery,要求jQuery最低的版本是1.6+。浏览器能兼容到ie8+及其他现代浏览器。...如果一开始全设置好了那么只有第一有动画效果,不是我们想要的结果。 配合fullpage的onLeave事件,可以实现在上一离开的时候,给下一添加动画样式类,并把上一的动画样式类去掉。

    5.1K90

    06-移动端开发教程-fullpage框架

    CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。...我们经常见到一些全屏的特绚丽页面,手指或者鼠标滑动一下就是一整切换,而且还有各种效果。比如:全屏滑动案例 下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。...多个回调函数。 支持手机,平板触摸事件。 支持css3动画。 支持窗口缩放。 窗口缩放时自动调整。 可设置滚动宽度,背景颜色,滚动速度,循环选项,回调,文本对齐方式等。...2. fullpage.js的使用 2.1 兼容性 fullpage.js是jQuery的插件,需要依赖jQuery,要求jQuery最低的版本是1.6+。浏览器能兼容到ie8+及其他现代浏览器。...如果一开始全设置好了那么只有第一有动画效果,不是我们想要的结果。 配合fullpage的onLeave事件,可以实现在上一离开的时候,给下一添加动画样式类,并把上一的动画样式类去掉。

    5.1K50
    领券