js 宽窄屏切换效果代码优化

2024-04-01 01:19:25

源代码：

优化前：

优化后代码：

<script type="text/javascript">

var oCr = document.getElementById("contentRight");

var oWide = document.getElementById("wide");

var oNarrow = document.getElementById("narrow");

var timer1;

var timer2;

var p = oCr.offsetWidth;

function closeCR() {

if (p > 0) {

p -= 5;

oCr.style.width = p + "px"

} else {

clearInterval(timer1);

}

}

function openCR() {

if (p > 195) {

clearInterval(timer2);

} else {

p += 5;

oCr.style.width = p + "px"

}

}

oWide.onclick = function () {

if (p > 0) {

clearInterval(timer2);

}

timer1 = setInterval("closeCR()", 10);

oNarrow.style.display = "block";

}

oNarrow.onclick = function () {

clearInterval(timer1);

timer2 = setInterval("openCR()", 10);

oNarrow.style.display = "none";

}

</script>

<script type="text/javascript">

//宽窄屏切换

var oCr = document.getElementById("contentRight");

var oWide = document.getElementById("wide");

var oNarrow = document.getElementById("narrow");

var timer1;

var p = oCr.offsetWidth, viewWidth = p;

function changeCR( ratio) {

p = p + ratio*4;

oCr.style.width = p + "px";

if(p > viewWidth || p<0) {

clearInterval(timer1);

}

}

oWide.onclick = function () {

timer1 = setInterval("changeCR(-1)", 10);

oNarrow.style.display = "block";

};

oNarrow.onclick = function () {

timer1 = setInterval("changeCR(1)", 10);

oNarrow.style.display = "none";

}

</script>

1.可使用坐标系分析判断条件的节点以及判断的值域。当无法确定判断的值域时，检查判断是否必要

2.不直接使用 offsetWidth 作为判断的条件。元素的 offsetWidth 值是动态计算的，使用该值时尽量先使用变量存储，避免再次计算。

offsetWidth 在页面加载时会引发两次回流(firefox下测试)。

转载于:https://www.cnblogs.com/plumeofstar/p/5226298.html

js 宽窄屏切换效果代码优化相关推荐

dplayer js控制自动全屏_vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】...
最近公司的产品上线,一些高级功能在基础版本中不对用户开发,通过视频的形式展示. 产品开发用的是 vue, 经同事介绍使用了vue-video-player视频播放插件,通过 demo案例很快实现了视频 ...
Vue.js实现tab切换效果
tab切换第一步先要把HTML写好,这个第一步很关键,主要分为两块结构 <div id="app"><ul class="tab-tilte" ...
html图片渐隐渐显,js实现图片切换效果渐隐渐显
图片渐隐渐显的切换效果 window.onload = function() { var testDiv = document.getElementById('test'); testDiv.styl ...
[JS]图片自动切换效果（学习笔记）
上次在下载的网页中看到 javascript实现图片自动切换效果: <style text="text/css"> /*图片滚动栏*/ .container, .con ...
前端js控制点击切换效果且刷新浏览器不会重置
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.布局的部分代码和样式二.使用js来控制点击时颜色变化,点击哪一个图标,哪一个图标就应该变橙色且带有下边框 1.分 ...
js html页面切换效果,jQuery实现切换页面过渡动画效果
这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效 ...
html5+实现图片自动切换,js图片自动切换效果处理代码
var curIndex=0; //时间间隔单位毫秒 var timeInterval=1000; var arr=new Array(); arr[0]="1.jpg"; ar ...
css多媒体竖屏,CSS3 手机横竖屏切换效果模拟动画
CSS 语言: CSSSCSS 确定 body { background-color: #51203a; } ul, li { margin: 0; padding: 0; list-style: n ...
实现JS标签切换效果【CSS图片切换】
运行代码尝试,我把整篇的CSS文件内容都弄上来了,难得去找具体内容了,反正能得到效果就可以了. 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

最新文章

热门文章