问说网手机版
躺着 站着 跪着轻松访问
问说网 / 蜀ICP备号
感谢您对问说网的支持，提出您在使用过程中遇到的问题或宝贵建议，您的反馈对我们产品的完善有很大帮助。
您的反馈我们已收到！
感谢您提供的宝贵意见，我们会在1-2个工作日，通过您留下的联系方式将处理结果反馈给您！网友手写原生JS实现非常漂亮的手风琴图片轮播特效
文章来源：网络 作者:JS代码网 时间: 访问: 下载次数：
网友手写原生JS实现非常漂亮的手风琴图片轮播特效，效果非常不错，柔滑流畅，可以自定义速度、透明度，值得去学习下。
分享给朋友：
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）> JS模板，让你的店铺装修更加美观！
JS模板，让你的店铺装修更加美观！
浏览: 2,993 views
JS是一种脚本语言，可以使网页富有动态效果，大大的提高了交互体验。很多淘宝装修模板都运用了JS技术，才使得模板更加美观。下面小编为大家讲解下，为什么JS可以使店铺更加富有动感？
一、JS可以实现的效果
1、各式各样的轮播广告，有的轮播广告还加上各类过场效果，也都是通过js实现。
2、切换栏目，多个分类折叠在一个栏目里，通过鼠标移动到分类上切换栏目。
3、旋转木马，多个宝贝并列排放，由于个数较多，单屏显示不完整，就通过向上和向下按钮翻页。
二、什么是js特效模板？
近期，js特效模板通过历时多月的测试，已经正式上线。js特效模板，顾名思义，就是应用了js新技术的模板。但是，大家也会有疑问：在推出js特效模板之前，模板不是也有很多动画效果吗？哪些效果也是通过js技术实现吗？这是一个非常好的问题，答案是yes。既然以前的模板中也有使用了js技术，那现在又推出js特效模板，这不是多此一举吗？究竟是怎么一回事？下面听小编细说：
以前的模板中所使用的js技术是官方开发好的，设计师可以直接调用这些效果，无需自行开发。这些现成的js仅局限在视觉体验方面，没有发挥js的互动体验和实用功能。这次官方推出js特效模板，就是将js开发权限开放给设计师，让设计师自由发挥，充分展现js的魅力。因此，可以这么理解：js模板拥有普通模板的所有功能，但又多出了很多自行开发的js特效，使得页面的交互体验达到前所未有的高度。
举个例子吧。拿轮播广告来说，以前的轮播万变不离其宗，变不出什么花样。但是js特效模板中，设计师自己开发的js轮播就牛逼了，各种各样的都有，只有想不到，没有做不到。下面是装修市场第一个上架的js特效模板中的轮播效果截图：
三、JS在模板中有哪些应用？
js的最主要作用就是让页面灵动起来，打破死气沉沉的局面，极大改善了网页的交互体验。这里解释一下“交互”这个词，小编所理解的交互就是指人机互动，通过操作鼠标，页面会有“反应”，可以通过js技术使这种反应变得美妙或者有趣，js在模板中的应用，小编概括为三个方面：
1、视觉体验：通过js可以制作很多动画效果。例如图片轮播、跑马灯等。
广告文字在轮播的时候会有节奏的滑动，生动活泼。
宝贝会向左滚动，鼠标悬停时停止滚动，鼠标滑离时继续滚动。
2、互动体验：通过js可以为鼠标行为增加效果，增强人机互动。
当鼠标经过宝贝图片时，宝贝信息以动画的形式滑出来，给人比较细腻、新鲜的感觉。
导航栏在鼠标悬停时会以动画形式滑动，增加对话感。
3、实用功能：同工js可以实现很多实用的功能。例如放大镜。
在商城中常见的放大镜功能，借助js技术就可以搬到模板，并应用在首页中。
js对于很多卖家来说，可能闻所未闻，见所未见。但是，她的加入，会给模板增添很多梦幻色彩。小编在此只是抛砖引玉，更多精彩的js效果需要大家多去试用，体验已经发布的js特效模板。
还没有和本文相关的文章
才能评论！
电子邮箱：
小提示: 您的密码会通过填写的"电子邮箱"发送给您.如何让 JS 写得更漂亮　　网上有不少关于JS编写优化建议，这里我根据自己的经验提出一些比较有用的意见。
　　01按强类型风格写代码
　　JS是弱类型的，但是写代码的时候不能太随意，写得太随意也体现了编码风格不好。下面分点说明：
　　（1）定义变量的时候要指明类型，告诉JS解释器这个变量是什么数据类型的，而不要让解释器去猜，例如不好的写法：
　　var num, str,
　　声明了三个变量，但其实没什么用，因为解释器不知道它们是什么类型的，好的写法应该是这样的：
　　var num = 0, str = '', obj =
　　定义变量的时候就给他一个默认值，这样不仅方便了解释器，也方便了阅读代码的人，他会在心里有数——知道这些变量可能会当作什么用。
　　（2）不要随意地改变变量的类型，例如下面代码：
　　var num = 5;num = &-&+
　　第1行它是一个整型，第2行它变成了一个字符串。因为JS最终都会被解释成汇编的语言，汇编语言变量的类型肯定是要确定的，你把一个整型的改成了字符串，那解释器就得做一些额外的处理。并且这种编码风格是不提倡的，有一个变量第1行是一个整型，第10行变成了一个字符串，第20行又变成了一个object，这样就让阅读代码的人比较困惑，上面明明是一个整数，怎么突然又变成一个字符串了。好的写法应该是再定义一个字符串的变量：
　　var num = 5;var sign = &-&+
　　（3）函数的返回类型应该是要确定的，例如下面不确定的写法：
　　function getPrice(count){ if(count & 0) return&&; elsereturncount * 100;}
　　getPrice这个函数有可能返回一个整数，也有可能返回一个空的字符串。这样写也不太好，虽然它是符合JS语法的，但这种编码风格是不好的。使用你这个函数的人会有点无所适从，不敢直接进行加减乘除，因为如果返回字符串进行运算的话值就是NaN了。函数的返回类型应该是要确定的，如下面是返回整型：
　　function getPrice(count){ if(count & 0) return-1; elsereturncount * 100;}
　　然后告诉使用者，如果返回-1就表示不合法。如果类型确定，解释器也不用去做一些额外的工作，可以加快运行速度。
　　02减少作用域查找
　　（1）不要让代码暴露在全局作用域下
　　例如以下运行在全局作用域的代码：
　　&& var map = document.querySelector(&#my-map&); map.style.height = &600px&;&/&
　　有时候你需要在页面直接写一个，要注意在一个标签里面，代码的上下文都是全局作用域的，由于全局作用域比较复杂，查找比较慢。例如上面的map变量，第二行在使用的时候，需要在全局作用域查找一下这个变量，假设map是在一个循环里面使用，那可能就会有效率问题了。所以应该要把它搞成一个局部的作用域：
　　&&!function(){ var map = document.querySelector(&#my-map&); map.style.height = &600px&;}()&/&
　　上面用了一个function制造一个局部作用域，也可以用ES6的块级作用域。由于map这个变量直接在当前的局部作用域命中了，所以就不用再往上一级的作用域（这里是全局作用域）查找了，而局部作用域的查找是很快的。同时直接在全局作用域定义变量，会污染window对象。
　　（2）不要滥用闭包
　　闭包的作用在于可以让子级作用域使用它父级作用域的变量，同时这些变量在不同的闭包是不可见的。这样就导致了在查找某个变量的时候，如果当前作用域找不到，就得往它的父级作用域查找，一级一级地往上直到找到了，或者到了全局作用域还没找到。因此如果闭包嵌套得越深，那么变量查找的时间就越长。如下：
　　function getResult(count){ count++; function process(){ var factor = 2; returncount * factor - 5; } returnprocess();}
　　上面的代码定义了一个process函数，在这个函数里面count变量的查找时间要高于局部的factor变量。其实这里不太适合用闭包，可以直接把count传给process：
　　function getResult(count){ count++; function process(count){ var factor = 2; returncount * factor - 5; } returnprocess(count);}
　　这样count的查找时间就和factor一样，都是在当前作用域直接命中。这个就启示我们如果某个全局变量需要频繁地被使用的时候，可以用一个局部变量缓存一下，如下：
　　var url = &&;if(window.location.protocal === &https:&){ url = &wss://&+ window.location.pathname + window.location.}
　　频繁地使用了window.location对象，所以可以先把它缓存一下：
　　var url = &&;var location = window.if(location.protocal === &https:&){ url = &wss://&+ location.pathname + location.}
　　搞成了一个局变变量，这样查找就会明显快于全局的查找，代码也可以写少一点。
　　03避免==的使用
　　这里你可能会有疑问了，有些人喜欢用==，有些人喜欢用===，大家的风格不一样，你为什么要强制别人用===呢？习惯用==的人，不能仅仅是因为==比===少敲了一次键盘。为什么不提倡用==呢？
　　（1）如果你确定了变量的类型，那么就没必要使用==了，如下：
　　if(typeof num != &undefined&){} var num = parseInt(value);if(num == 10){}
　　上面的两个例子都是确定类型的，一个是字符串，一个是整数。就没必要使用==了，直接用===就可以了。
　　（2）如果类型不确定，那么应该手动做一下类型转换，而不是让别人或者以后的你去猜这里面有类型转换，如下：
　　var totalPage = &5&;if(parseInt(totalPage) === 1){}
　　（3）使用==在JSLint检查的时候是不通过的：
　　if(a == b){}
　　如下JSLint的输出：
　　Expected ‘===’ and instead saw ‘==’.
　　if(a == b){
　　（4）并且使用==可能会出现一些奇怪的现象，这些奇怪的现象可能会给代码埋入隐患：
　　null == undefined //true''== '0'//false0== ''//true0== '0'//true' trn '== 0//truenew String(&abc&) == &abc&//truenew Boolean(true) == true //truetrue == 1//true
　　上面的比较在用===的时候都是false，这样才是比较合理的。例如第一点null居然会等于undefined，就特别地奇怪，因为null和undefined是两个毫无关系的值，null应该是作为初始化空值使用，而undefined是用于检验某个变量是否未定义。
　　这和第1点介绍强类型的思想是相通的。
　　04合并表达式
　　如果用1句代码就可以实现5句代码的功能，那往往1句代码的执行效率会比较高，并且可读性可能会更好
　　（1）用三目运算符取代简单的if-else
　　如上面的getPrice函数：
　　function getPrice(count){ if(count & 0) return-1; elsereturncount * 100;}
　　可以改成：
　　function getPrice(count){ return count & 0 ? return -1 : count * 100;}
　　这个比写一个if-else看起来清爽多了。当然，如果你写了if-else，压缩工具也会帮你把它改三目运算符的形式：
　　function getPrice(e){return 0&e?-1:100*e}
　　（2）连等
　　连等是利用赋值运算表达式会返回所赋的值，并且执行顺序是从右到左的，如下：
　　overtime = favhouse = listingDetail = {...}
　　有时候你会看到有人这样写：
　　var age = 0;if((age = +form.age.value) &= 18){ console.log(&你是成年人&);} else{ consoe.log(&小朋友，你还有&+ (18- age) + &就成年了&);}
　　也是利用了赋值表达式会返回一个值，在if里面赋值的同时用它的返回值做判断，然后else里面就已经有值了。上面的+号把字符串转成了整数。
　　（3）自增
　　利用自增也可以简化代码。如下，每发出一条消息，localMsgId就自增1：
　　chatService.sendMessage(localMsgId++, msgContent);
　　05减少魔数
　　例如，在某个文件的第800行，冒出来了一句：
　　dialogHandler.showQuestionNaire（&seller&, &sell&, 5, true);
　　就会让人很困惑了，上面的四个常量分别代表什么呢，如果我不去查一个那个函数的变量说明就不能够很快地意会到这些常量分别有什么用。这些意义不明的常量就叫“魔数”。
　　所以最好还是给这些常量取一个名字，特别是在一些比较关键的地方。例如上面的代码可改成：
　　var naireType = &seller&, dialogType = &sell&, questionsCount = 5, reloadWindow =naireHandler.showNaire(naireType, dialogType, questionsCount, reloadWindow);
　　这样意义就很明显了。
　　06使用ES6简化代码
　　ES6已经发展很多年了，兼容性也已经很好了。恰当地使用，可以让代码更加地简洁优雅。
　　（1）使用箭头函数取代小函数
　　有很多使用小函数的场景，如果写个function，代码起码得写3行，但是用箭头函数一行就搞定了，例如实现数组从大到小排序：
　　var nums = [4, 8, 1, 9, 0];nums.sort(function(a, b){ returnb -});//输出[9, 8, 4, 1, 0]
　　如果用箭头函数，排序只要一行就搞定了：
　　var nums = [4, 8, 1, 9, 0];nums.sort(a, b =& b - a);
　　代码看起来简洁多了，还有setTimeout里面经常会遇到只要执行一行代码就好了，写个function总感觉有点麻烦，用字符串的方式又不太好，所以这种情况用箭头函数也很方便：
　　setTimeout(() =& console.log(&hi&), 3000)
　　箭头函数在C++/Java等其它语言里面叫做Lambda表达式，Ruby比较早就有这种语法形式了，后来C++/Java也实现了这种语法。
　　当然箭头函数或者Lambda表达式不仅适用于这种一行的，多行代码也可以，不过在一行的时候它的优点才比较明显。
　　（2）使用ES6的class
　　虽然ES6的class和使用function的prototype本质上是一样的，都是用的原型。但是用class可以减少代码量，同时让代码看起来更加地高大上，使用function要写这么多：
　　function Person(name, age){ this.name = this.age =}Person.prototype.addAge = function(){ this.age++;};Person.prototype.setName = function(name){ this.name =};
　　使用class代码看加地简洁易懂：
　　class Person{ constructor(name, age){ this.name = this.age = } addAge(){ this.age++; } setName(name){ this.name = }}
　　并且class还可以很方便地实现继承、静态的成员函数，就不需要自己再去通过一些技巧去实现了。
　　（3）字符串拼接
　　以前要用+号拼接：
　　var tpl = '&div&'+ ' &span&1&/span&'+ '&/div&';
　　现在只要用两个反引号“`”就可以了：
　　var tpl = ` &div& &span&1&/span& &/div&`;
　　另外反引号还支持占位替换，原本你需要：
　　var page = 5, type = encodeURIComponet(&#js&);var url = &/list?page=&+ page + &&type=&+
　　现在只需要：
　　var url = `/list?page=${page}&type=${type}`;
　　就不用使用+号把字符串拆散了。
　　（4）块级作用域变量
　　块级作用域变量也是ES6的一个特色，下面的代码是一个任务队列的模型抽象：
　　var tasks = [];for(var i = 0; i & 4; i++){ tasks.push(function(){ console.log(&i is &+ i); });}for(var j = 0; j & tasks. j++){ tasks[j]();}
　　但是上面代码的执行输出是4，4，4，4，并且不是想要输出：0，1，2，3，所以每个task就不能取到它的index了，这是因为闭包都是用的同一个i变量，i已经变成4了，所以执行闭包的时候就都是4了。那怎么办呢？可以这样解决：
　　var tasks = [];for(var i = 0; i & 4; i++){ !function(k){ tasks.push(function(){ console.log(&i is &+ k); }); }(i);}for(var j = 0; j & tasks. j++){ tasks[j]();}
　　把i赋值给了k，由于k它是一个function的一个参数，每次执行函数的时候，肯定会实例化新的k，所以每次的k都是不同的变量，这样就输出就正常了。
　　但是代码看起来有点别扭，如果用ES6，只要把var改成let就可以了：
　　var tasks = [];for(let i = 0; i &= 4; i++){ tasks.push(function(){ console.log(&i is &+ i); });}for(var j = 0; j & tasks. j++){ tasks[j]();}
　　只改动了3个字符就达到了目的。因为for循环里面有个大括号，大括号就是一个独立的作用域，let定义的变量在独立的作用域里面它的值也是独立的。当然即使没写大括号for循环执行也是独立的。
　　除了以上几点，ES6还有其它一些比较好用的功能，如Object的assign，Promise等，也是可以帮助写出简洁高效的代码。
　　以上列了我自己在实际写代码过程中遇到的一些问题和一些个人认为比较重要的方面，其它的还有变量命名、缩进、注释等，这里就不提及了。写代码的风格也体现了编程的素养，有些人的代码看起来非常地干净利落，而有些人的代码看起来让人比较痛苦。这种编程素质的提升需要有意识地去做一些改进，有些人虽然代码写得很烂，但是他自己并不觉得有什么问题。这就需要多去学下别人的代码，甚至学一下其它语言的书写，两者一比较就能发现差异，或者看下这方面的书，像什么代码大全之类的。
　　原文：//effective-js-optimize/
　　精选文章
↓↓↓声明：本文由入驻搜狐公众平台的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。阅读()一个漂亮的弹出对话框的JS
蛮漂亮的已个JS弹出对话框，之前从网上找来的，再修改过，加上一个参数，可以添加标题。代码也蛮简单的。
功能：弹出对话框，点击标题可关闭对话框。
JavaScript代码
&script type="text/javascript"
language="javascript"&
function sAlert(strTitle,strContent){
&var msgw,msgh,
&msgw=400;//提示窗口的宽度
&msgh=100;//提示窗口的高度
&titleheight=25 //提示窗口标题高度
&bordercolor="#336699";//提示窗口的边框颜色
&titlecolor="#99CCFF";//提示窗口的标题颜色
&var sWidth,sH
&sWidth=document.body.offsetW
&sHeight=screen.
&var bgObj=document_createElement_x_x("div");
&bgObj.setAttribute('id','bgDiv');
&bgObj.style.position="absolute";
&bgObj.style.top="0";
&bgObj.style.background="#777";
&bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
&bgObj.style.opacity="0.6";
&bgObj.style.left="0";
&bgObj.style.width=sWidth + "px";
&bgObj.style.height=sHeight + "px";
&bgObj.style.zIndex = "10000";
&document.body.a(bgObj);
&var msgObj=document_createElement_x_x("div")
&msgObj.setAttribute("id","msgDiv");
&msgObj.setAttribute("align","center");
&msgObj.style.background="white";
&msgObj.style.border="1px solid " +
&msgObj.style.position = "absolute";
&msgObj.style.left = "50%";
&msgObj.style.top = "50%";
&msgObj.style.font="12px/1.6em Verdana, Geneva,
Arial, Helvetica, sans-serif";
&msgObj.style.marginLeft = "-225px" ;
&msgObj.style.marginTop =
-75+document.documentElement.scrollTop+"px";
&msgObj.style.width = msgw + "px";
&msgObj.style.height =msgh + "px";
&msgObj.style.textAlign = "center";
&msgObj.style.lineHeight ="25px";
&msgObj.style.zIndex = "10001";
&var title=document_createElement_x_x("h4");
&title.setAttribute("id","msgTitle");
&title.setAttribute("align","right");
&title.style.margin="0";
&title.style.padding="3px";
&title.style.background=
&title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20,
startY=20, finishX=100,
finishY=100,style=1,opacity=75,finishOpacity=100);";
&title.style.opacity="0.75";
&title.style.border="1px solid " +
&title.style.height="18px";
&title.style.font="12px Verdana, Geneva, Arial,
Helvetica, sans-serif";
&title.style.color="white";
&title.style.cursor="pointer";
&title.title = "点击关闭";
&title.innerHTML="&table border='0'
width='100%'&&tr&&td
align='left'&&b&"+
+"&/b&&/td&&td&关闭&/td&&/tr&&/table&&/div&";
&title.onclick=function(){
&document.body.removeChild(bgObj);
&document.getElementByIdx_x_x("msgDiv").removeChild(title);
&document.body.removeChild(msgObj);
&document.body.a(msgObj);
&document.getElementByIdx_x_x("msgDiv").a(title);
&var txt=document_createElement_x_x("p");
&txt.style.margin="1em 0";
&txt.setAttribute("id","msgTxt");
&txt.innerHTML=strC
&document.getElementByIdx_x_x("msgDiv").a(txt);
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}