360浏览器不兼容-关于图片滚动在不同浏览器中部兼容的问题

问题描述

关于图片滚动在不同浏览器中部兼容的问题

这是用dw做的框架

实际代码

var nums = [], timer, n = $$("idSlider2").getElementsByTagName("li").length,
st = new SlideTrans("idContainer2", "idSlider2", n, {
onStart: function(){//设置按钮样式
forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; })
}
});
for(var i = 1; i <= n; AddNum(i++)){};
function AddNum(i){
var num = $$("idNum").appendChild(document.createElement("li"));
num.innerHTML = i--;
num.onmouseover = function(){
timer = setTimeout(function(){ num.className = "on"; st.Auto = false; st.Run(i); }, 200);
}
num.onmouseout = function(){ clearTimeout(timer); num.className = ""; st.Auto = true; st.Run(); }
nums[i] = num;
}
st.Run();

$$("idAuto").onclick = function(){
if(st.Auto){
st.Auto = false; st.Stop(); this.value = "自动";
}else{
st.Auto = true; st.Run(); this.value = "停止";
}
}
$$("idNext").onclick = function(){ st.Next(); }
$$("idPre").onclick = function(){ st.Previous(); }
$$("idTween").onchange = function(){
switch (parseInt(this.value)){
case 2 :
st.Tween = Tween.Bounce.easeOut; break;
case 1 :
st.Tween = Tween.Back.easeOut; break;
default :
st.Tween = Tween.Quart.easeOut;
}
}

这是js调用

/*!

var $$ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};

var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}

var CurrentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}

var Bind = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function() {
return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
}
}

var forEach = function(array, callback, thisObject){
if(array.forEach){
array.forEach(callback, thisObject);
}else{
for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); }
}
}

var Tween = {
Quart: {
easeOut: function(t,b,c,d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
},
Back: {
easeOut: function(t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
},
Bounce: {
easeOut: function(t,b,c,d){
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
}
}

//容器对象,滑动对象,切换数量
var SlideTrans = function(container, slider, count, options) {
this._slider = $$(slider);
this._container = $$(container);//容器对象
this._timer = null;//定时器
this._count = Math.abs(count);//切换数量
this._target = 0;//目标值
this._t = this._b = this._c = 0;//tween参数

this.Index = 0;//当前索引

this.SetOptions(options);

this.Auto = !!this.options.Auto;
this.Duration = Math.abs(this.options.Duration);
this.Time = Math.abs(this.options.Time);
this.Pause = Math.abs(this.options.Pause);
this.Tween = this.options.Tween;
this.onStart = this.options.onStart;
this.onFinish = this.options.onFinish;

var bVertical = !!this.options.Vertical;
this._css = bVertical ? "top" : "left";//方向

//样式设置
var p = CurrentStyle(this._container).position;
p == "relative" || p == "absolute" || (this._container.style.position = "relative");
this._container.style.overflow = "hidden";
this._slider.style.position = "absolute";

this.Change = this.options.Change ? this.options.Change :
    this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;

};
SlideTrans.prototype = {
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Vertical: true,//是否垂直方向（方向不能改）
Auto: true,//是否自动
Change: 0,//改变量
Duration: 30,//滑动持续时间
Time: 10,//滑动延时
Pause: 3000,//停顿时间(Auto为true时有效)
onStart: function(){},//开始转换时执行
onFinish: function(){},//完成转换时执行
Tween: Tween.Quart.easeOut//tween算子
};
Extend(this.options, options || {});
},
//开始切换
Run: function(index) {
//修正index
index == undefined && (index = this.Index);
index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
//设置参数
this._target = -Math.abs(this.Change) * (this.Index = index);
this._t = 0;
this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]);
this._c = this._target - this._b;

this.onStart();
this.Move();

},
//移动
Move: function() {
clearTimeout(this._timer);
//未到达目标继续移动否则进行下一次滑动
if (this._c && this._t < this.Duration) {
this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));
this._timer = setTimeout(Bind(this, this.Move), this.Time);
}else{
this.MoveTo(this._target);
this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));
}
},
//移动到
MoveTo: function(i) {
this._slider.style[this._css] = i + "px";
},
//下一个
Next: function() {
this.Run(++this.Index);
},
//上一个
Previous: function() {
this.Run(--this.Index);
},
//停止
Stop: function() {
clearTimeout(this._timer); this.MoveTo(this._target);
}
};
在IE、火狐、谷歌中都能正常运行，但是360浏览器中却不能运行 这是怎么回事。。
求解释，谢谢

相关文章

  • firefox-定位兼容问题，大神求救！
  • 火狐-关于浏览器的兼容问题
  • activexobject不兼容-如何在Javascript中判断客户端是否安装插件或OCX是否注册，并且能兼容不同的浏览器
  • asp.net网站不兼容360浏览器问题，很诡异，求大神帮忙
  • css 兼容-CSS兼容ie8，浏览器模式与文本模式
  • 360浏览器-导航图片与下拉菜单之间有一段空白
  • 图片-web前端浏览器兼容问题
  • js-JavaWeb开发中怎么实现声音的播放效果（按钮的配音），要求能兼容IE、360等浏览器。
  • asp网页显示问题-关于asp网页的显示问题
  • ie 7-关于IE不同版本的兼容问题

【云栖快讯】他，一路保送，但可能不是你想象中的学霸； 他，曾是微软最年轻的技术管理者，挑战带领跨国团队； 他，后来加入阿里，成为阿里西雅图分部的第22名员工； 他，就是阿里通用计算平台负责人关涛！ 通过短视频，为你揭晓他的成长和开发计算平台的经历，以及他对未来的展望！  详情请点击

热门推荐

  • 高性能云服务器2折起
  • 云服务器配置
  • 技术资料
  • 云计算
  • 域名
  • shell
  • node.js
  • 问答
  • java
  • mysql
  • C++
  • python
  • jQuery
  • Android
  • asp
  • PHP技巧
  • jQuery教程
  • JavaScript技巧
  • JS
  • SEO
  • sql server
  • mysql教程
  • 前端
  • 技术文集
  • 技术
  • 主题地图
  • A
  • z
  • 云服务器哪家好
  • API
  • 大数据
  • 云安全
  • 云存储
  • 云计算
  • 获取公众号授权失败
  • 兼容性疑难解答
  • path
  • stm32
  • jsonobject
  • product

前三篇

  • android开发-android的apk部署出错了！！！！！
  • c语言编程-才刚刚学习C语言，遇到一道难题，一直得不出正确答案，希望得到大家指点！
  • android开发-获取 Flickr XML 数据的问题

后三篇

  • 问题 oracle-Oracle 几个问题求解。。。help啦。
  • mybatis-map&amp;lt;String,String&amp;gt;中存有tinyint数据，在map.get的时候报错
  • tomcat启动报错-eclipse 启动 tomcat 异常

(yq.aliyun.com)为您免费提供360浏览器不兼容-关于图片滚动在不同浏览器中部兼容的问题相关信息，包括
360浏览器不兼容
的信息
，所有360浏览器不兼容-关于图片滚动在不同浏览器中部兼容的问题相关内容均不代表的意见！
该页面h5页面的地址是：https://m.aliyun.com/yunqi/wenzhang/show_72054，您可以点击360浏览器不兼容-关于图片滚动在不同浏览器中部兼容的问题-手机站访问。

时间： 2024-10-03 23:50:11

360浏览器不兼容-关于图片滚动在不同浏览器中部兼容的问题的相关文章

控制图片滚动,js代码在chrome里没效果在其他浏览器有效果

问题描述 控制图片滚动,js代码在chrome里没效果在其他浏览器有效果 //客户合作 图片滚动 $('.imgs-scroll').newsScroll({ className: 'imgs-scroll', scrollElements: 'li', scrollDirection: 'left' }); $.fn.extend({ newsScroll: function (opt) { if (!opt) opt = {}; opt = { className: opt.classNam

原生javascript实现图片滚动、延时加载功能

 这篇文章主要介绍了使用原生javascript实现图片滚动.延时加载功能,思路与方法均分享给大家,希望对大家能有所帮助.     实现效果:下拉滚动条时,图片出现在可见区域时,才开始加载 思路: (1)img标签,把真实的图片地址,放在自己设置的属性里面,如 lazy-src (2)获取img离页面的高度(在JQ里是offset().top),原生是: img.getBoundingClientRect().top + document.body.scrollTop||document.doc

JQUERY弹层|图片滚动|插件开发|上传 相关收藏

整理了一下浏览器收藏夹里的东西,发现好多连接都死掉了 JQUERY API : 1.11.2 http://jquery.cuishifeng.cn/ 1.10-1.20 http://www.css88.com/jqapi-1.9/ jQuery图片滚动十佳插件重点介绍 Jquery图片滚动,幻灯片 11个最佳jQuery滚动条插件 弹出层http://aui.github.io/artDialog/ JQuery之ContextMenu(右键菜单) jQuery实现拖动布局并将排序结果保存到

Android仿淘宝商品浏览界面图片滚动效果_Android

用手机淘宝浏览商品详情时,商品图片是放在后面的,在第一个ScrollView滚动到最底下时会有提示,继续拖动才能浏览图片.仿照这个效果写一个出来并不难,只要定义一个Layout管理两个ScrollView就行了,当第一个ScrollView滑到底部时,再次向上滑动进入第二个ScrollView.效果如下: 需要注意的地方是:       1.如果是手动滑到底部需要再次按下才能继续往下滑,自动滚动到底部则不需要       2.在由上一个ScrollView滑动到下一个ScrollView的过程中

jquery图片滚动放大代码分享（2）_jquery

本文实例讲述了jquery图片滚动放大效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现图片滚动放大效果代码,像是一个放大镜,适合用于产品展示,便于用户浏览产品细节,是一款非常实用的特效代码. 运行效果图:                 -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片滚动放大效果代码如下 <head> <meta http-eq

jquery图片滚动放大代码分享（1）_jquery

本文实例讲述了jquery图片滚动放大效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现图片滚动放大效果代码,带有左右箭头,适合用于产品展示,便于用户浏览产品细节,是一款非常实用的特效代码. 运行效果图:        ----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片滚动放大效果代码如下 <head> <meta http-

百度浏览器兼容模式在哪设置 百度浏览器兼容模式设置教程

1.在电脑中打开"百度浏览器"之的我们会看到浏览器的地址栏处一个闪电的图标 如下图所示 2.然后我们点击闪电图标处,你会看到有一个"点击切换到兼容模式",点击一下小闪电. 3.现在我们点击 兼容模式,只要再点击一下,又会切换到极速模式. 友情提示,其实兼容模式小编觉得360浏览器做得更好了,它的可以兼容指定版本的浏览器了.

电脑中怎么将360浏览器中收藏的网页导入到Edge浏览器中

  电脑中怎么将360浏览器中收藏的网页导入到Edge浏览器中          1.打开360浏览器,点击左上角的"收藏"; 2.打开下拉菜单后点击"导入/导出"; 3.在"导出收藏夹"中点击"导出到IE浏览器"; 4.稍等片刻后会提示导出成功,点击确定,这样,360浏览器中收藏的网页就导入到IE浏览器中了; 5.打开Edge浏览器,点击打开右上角的菜单; 6.点击"导入收藏夹"按钮; 7.勾选"

jQuery bxCarousel实现图片滚动切换

 BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有: ◆ 可以指定显示的元素总数 ◆ 可以指定每次滚动的元素个数 ◆ 自动播放模式 ◆ 前一张/后一张按钮控制图片流动 参数含义: display_num:显示元素的数量,几张图片 move:单击左右控制键时,移动的元素个数,此处为移动2张图片 prev_image:上一元素按钮图片 next_image:下一元素按钮图片 margin:图片之间的间隙,一般设为10px auto:自动滚动效果 controls:是