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

多功能响应式兼容IE8图片轮播

2016-09-27 10:02:56 前段时间在写一个官网,官网中很多地方都用到了图片轮播,但是需求中要求网站适配到IE8同时具有自适应特点,适配各种尺寸浏览器和移动端浏览器。...于是我尝试了在网上查找相关代码,但遗憾是很多插件要么兼容IE8,但是不支持响应式,要么支持响应式不支持IE8,万恶IE8很是让人头疼。于是,自己就写了一个响应式轮播插件,并兼容IE8浏览器。...,包括在外层一个div,内部每一个slideItem为一个轮播层,下面来个a标签代表是左右箭头。...我在这个插件中总共写了4个功能,分别是: 1.普通不带圆点带左右箭头图片轮播 2.带底部圆点和左右箭头图片轮播 3.带底部圆点和左右箭头,同时轮播下方文字跟随轮播 4.点击排列在页面的图片,弹出层出现轮播...具体效果可以点击下方演示按钮查看,并且可以点击下载按钮下载源码。 更新 新增移动端可以通过滑动切换轮播效果 修复网络慢时图片显示bug 注:如果下方链接失效,请点击此处下载,密码为:ysaj

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

    JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)

    、编辑; 最近发现这个功能很多是基于flash实现,很多JavaScript实现代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼容。...代码实现主要利用到jquery插件imgAreaSelect,FileReader对象(chrome和ff获取本地图片数据接口),IE滤镜效果。...关键词:imgAreaSelect FileReaderdocument.selection.createRange() IE滤镜效果 一、实现上传前预览 1.1、页面显示 代码1-1显示是html...img之后 1.3、实现在线预览功能 function previewImage(file) { var porImg = $('#biuuu'),//首先获取大图片jquery对象 viewImg =...$('#view');//小图片jquery对象 //判断该浏览器是否为w3c标准,既非IE浏览器 if (file["files"] && file["files"][0]) { //使用JavaScript

    1.8K60

    ie9兼容视图设置_ie9兼容性视图设置找不到

    大家好,又见面了,我是你们朋友全栈君。 ie9 比 ie8 又向 W3C 标准靠近了一步,可能会导致原有的网页显示变乱;如果出现这种情况,选择 ie9兼容性视图,网页显示就会正常。...ie9 分别有,为当前网页设置兼容性和为所有网站设置兼容性视图两种,下面分别说明: 一、为当前网页设置兼容性视图 1、快捷步骤: 按 alt 键——工具——兼容性视图(V);或者 按 alt 键——工具...——按 F12——浏览器模式(B):IE9——Internet Explorer 9 兼容性视图(C)。...,其它与1)同,如图2所示: 图2 提示: 如果想一直显示“菜单栏”,则只需在 ie9 顶部右键,选择“菜单栏”即可,如图3所示: 图3 二、为所有网站设置兼容性视图 按 alt 键——工具——兼容性视图设置...如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    2.5K30

    IE7、IE8 增加圆角支持 jQuery 插件:jQuery Corner

    在过去时候,做一个圆角效果往往需要将圆角图片切出,然后通过背景等实现效果。...但是在国内早期 IE 浏览器仍然盛行时期,为了考虑到大多数用户,我们不得不通过一些插件之类来实现圆角,jQuery Corner 就是这样一个插件,使用这个插件配置一下圆角半径等参数,即可生成圆角同时兼容各种早期...IE 浏览器。...另外我们还可以看一下 jQuery Corner 插件演示 ,它不仅仅支持生成各种圆角,同时还可以生成一些其他奇怪“角”,虽然不是很实用,但万一有时候就用上了呢 如果你项目中,需要圆角,同时还需要兼容早期...IE 浏览器,不妨来试用一下吧,下载:jQuery Corner。

    72310

    IE10兼容性处理

    IE10不支持箭头函数,写js时候慎用。 IE10下对js语法要求严格,正常参数后如果没有多余代码,写个,会报错,如果加了删掉就OK,Chrome下不会产生影响。 zoom属性能不用,尽量别用。...我在Chrome使用zoom进行大小调整,放到IE10运行,整个页面都错位了,找半天才想起来之前给一个容器设置了zoom: 1.1;,真是让人头大。...IE10下img标签自带白边,在默认样式里面设置border: none;即可。 img { border: none; } IE10能兼容大部分html5新标签,唯独不能兼容 main。...box-shadow 阴影属性其实IE10是支持,但是需要注意语法问题,在普通浏览器color可以用rgba,#等写法,但是在IE10下,只能通过#000000写法,#和六位颜色标记,不可以简写,否则不生效...IE10不兼容es6新语法。

    91610

    解决老版本IE兼容rgba问题

    我们一般写一个半透明 div ,只需要给这个 div 设置如下属性即可: background: rgba(255,255,255,0.5); 但是如果遇上 IE8 就有点蛋疼了。...因为 IE8 不支持 rgba( ) 。  rgba 含义,r 代表 red ,g 代表 green ,b 代表 blue ,红绿蓝是三原色。所有颜色都可以由这三种颜色拼合而成。a 代表透明度。...比如 rgba(255,255,255,0.5) 就是透明度为 0.5 白色。 如果做到兼容 IE8 ,要用到 IE filter 。...第一部是 # 号后面的 7F  , 是 rgba 透明度 0.5 IE filter 值。 从0.1到0.9每个数字对应一个 IE filter 值。...这个是六进制颜色值,要跟 rgb 中取值相同。比如 rgb(255,255,255) 对应 #FFFFFF ;都是白色。 现在 半透明 div 就可以兼容IE8了。

    1.7K00

    IE11CSS兼容性问题

    最近测试给了我一大堆BUG,一瞅发现全是IE11。吐槽一下这个浏览器真的比较特立独行。很多默认样式跟别的浏览器不同,而且最明显一点应该是padding左右内边距往往比别的浏览器大了一倍。...于是在网上搜了一下有没有专门针对IE11CSShack,就是只对IE11生效CSS样式,一查还真有。...样式要写在最后面防止被覆盖,当浏览器为IE11时,@media中样式会被执行一遍。   ...还有一个就是IE11针对h5表单验证部分,验证失败后input标签会出现一个红色框,比较丑。...这个时候你只要针对专门input标签,增加一个input{outline:none};就可以将红色边框去掉了。   今天大拿直接一行代码把我之前IE11兼容性问题全解决了。不服不行。

    2.1K40

    解决IE图片缓存问题

    遇到一件很奇怪事情:假设有两张图片1.jpg、3.jpg,他们同时放在一个目录下(创建时间一样),后来发现这两张图片名称命名反了,也就是1.jpg实际应该命名为3.jpg,而3.jpg则应为1.jpg...,便到相应目录中修改两张图片名称。...在flash中加载这两张图片,在IE中查看,怎么样去刷新都还是以前图片(反掉了),我尝试清空缓存,关闭所有进程,重启电脑,第二天来看还是不行,这就让我很郁闷了,一度以为是我电脑问题,后来仔细想了一下...我试过把请求URL,粘贴到IE浏览器地址栏,然后刷新,结果一样,http请求返回都是304(我浏览器设置是每次请求最新文件),使用chrome去请求URL,强制刷新图片显示是正确。...对于在公网如果有这样需求,文件命名反掉了,建议最好使用新名称或是在请求后面加特定参数(让它返回200状态)

    1.5K30

    解决cssie浏览器各种兼容问题

    在进行网站开发过程中,IE是另很多程序员头疼一个浏览器,他版本兼容性很难调整,尤其是IE6,IE7,IE8,IE9,IE10这几个版本区别有很大。现在百度与谷歌都有了一行解决这种兼容代码了。...– IE5 mode –> 5.如果一个特定版本IE支持所要求兼容性模式多于一种,如: 当然如果服务器是自己的话,可以在服务器上定义一个自订标头来为它们网站预设一个特定文件兼容性模式。...另外还有一起其他解决方案,例如google ie7 – js中是一个JavaScript库(解决IE与W3C标准冲突JS库),使微软Internet Explorer行为像一个Web标准兼容浏览器...它修复了许多HTML和CSS问题,并使得透明PNG在IE5、IE6下正确显示。 使IE5,IE6兼容IE7模式(推荐) <!

    2K20

    前端高效开发必备 js 库梳理

    前端由于入行门槛低, 更新换代很快, 每年都会有大量新框架和库出现, 也有大量库被淘汰(比如 JQuery, 但是学习它设计思想很有必要)....库 JQuery 封装了各种dom/事件操作, 设计思想值得研究借鉴 zepto jquery轻量级版本, 适合移动端操作 fastclick 一个简单易用库,它消除了移动端浏览器上物理点击和触发一个... HTTP 库,可用在 Node.js 和浏览器上发起 HTTP 请求,支持所有现代浏览器,甚至包括 IE8+ Superagent 基于Ajax优化, 可以与 Node.js HTTP 客户端搭配使用...一个可轻易创建全屏滚动网站js滚动动画库, 兼容性无可替代 iscroll 移动端使用一款轻量级滚动插件 鼠标/键盘相关 KeyboardJS 一个在浏览器中使用库(与node.js兼容).它使开发人员可以轻松设置键绑定和使用组合键来设置复杂绑定...一个将多张图片合并成一张图js插件 cropperjs 一款强大图片裁切库, 支持灵活图片裁切方式 Grade 一个基于图像中前2种主要颜色生成互补渐变背景库 以上这些js库不必每一样都去了解和深究

    1.8K10

    前端高效开发必备 js 库梳理

    前端由于入行门槛低, 更新换代很快, 每年都会有大量新框架和库出现, 也有大量库被淘汰(比如 JQuery, 但是学习它设计思想很有必要)....库 JQuery 封装了各种dom/事件操作, 设计思想值得研究借鉴 zepto jquery轻量级版本, 适合移动端操作 fastclick 一个简单易用库,它消除了移动端浏览器上物理点击和触发一个... HTTP 库,可用在 Node.js 和浏览器上发起 HTTP 请求,支持所有现代浏览器,甚至包括 IE8+ Superagent 基于Ajax优化, 可以与 Node.js HTTP 客户端搭配使用...一个可轻易创建全屏滚动网站js滚动动画库, 兼容性无可替代 iscroll 移动端使用一款轻量级滚动插件 鼠标/键盘相关 KeyboardJS 一个在浏览器中使用库(与node.js兼容).它使开发人员可以轻松设置键绑定和使用组合键来设置复杂绑定...一个将多张图片合并成一张图js插件 cropperjs 一款强大图片裁切库, 支持灵活图片裁切方式 Grade 一个基于图像中前2种主要颜色生成互补渐变背景库 以上这些js库不必每一样都去了解和深究

    2.1K30
    领券