【JS】常用效果总结

ul中的li宽度超过一行显示更多按钮

//更多按钮默认先隐藏，先计算每个li的个数，再计算每个li的宽度（动态获取），最后计算每个li的宽度+右边距30的总宽度，总宽度加起来大于ul的默认宽度就显示更多按钮（宽度超过了一行），写在绑定数据的里面
$(function () {var lileng = gyslist.length; //1.获取li的总个数，共20个livar gyswidth = $("#supplier").width(); //获取默认的ul宽度是1128pxvar gyslist = $("#supplier li") //2.获取li的宽度之和var sumWidth =0; for(i = 0; i < gyslist.length; i++){//3.计算宽度之和以后每个li都再加30的右边距，除了最后一个不用加30//如果是最后一个li就不加30的宽：最后一个i，是长度-1，i是0-19总共20个，i等于19的时候就不要加30，else里面不是最后一个li所以要加30if( i === ( gyslist.length - 1) ) {sumWidth += gyslist.eq(i).outerWidth() ;}else{sumWidth += gyslist.eq(i).outerWidth() + 30;}}console.log( sumWidth ) //每个li的宽度加右边距之和是1494//4.每个li的宽度和右边距之和大于ul的宽度就显示更多按钮if( sumWidth > gyswidth ){$(".dxCon .sl-ext-gd").show();}else{$(".dxCon .sl-ext-gd").hide();}
})

给每一个li后面添加顿号、最后一个li不加顿号
多选勾选不能超过3个，超出禁止勾选弹出提示

$('.company li').click(function(){$(this).toggleClass('current');var num = $(this).parent().children('li.current').length;if(num > 3){$(this).toggleClass('current');alert("超出限制")}
})

鼠标滑过控制div宽度伸缩

$('.left_menu').hover(function(){$(this).stop().animate({width:'345'},"slow");
}, function() {$(this).stop().animate({width:'225'},"slow");
})

按字符截字

<p style="width:200px;" class="description">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
<style>
p { word-break: break-all; }
</style>

// 简单计算字节长度
String.getBlength = function (str) {for (var i = str.length, n = 0; i--; ) {n += str.charCodeAt(i) > 255 ? 2 : 1;}return n;
}
// 按指定字节截取字符串
String.cutByte = function (str, len, endstr) {var len = +len,endstr = typeof(endstr) == 'undefined' ? "..." : endstr.toString(),endstrBl = this.getBlength(endstr);//用于二分法查找function n2(a) {var n = a / 2 | 0; return (n > 0 ? n : 1)}if (!(str + "").length || !len || len <= 0) {return "";}if(len<endstrBl){endstr = "";endstrBl = 0;}var lenS = len - endstrBl,_lenS = 0,_strl = 0;while (_strl <= lenS) {var _lenS1 = n2(lenS - _strl),addn = this.getBlength(str.substr(_lenS, _lenS1));if (addn == 0) {return str;}_strl += addn_lenS += _lenS1}if(str.length - _lenS > endstrBl || this.getBlength(str.substring(_lenS-1))>endstrBl){return str.substr(0, _lenS - 1) + endstr}else{return str;}
}
function wordlimit(cname, wordlength) {var cname = document.getElementsByClassName(cname);for (var i = 0; i < cname.length; i++) {　var text = cname[i].innerHTML;// alert(text);// 判断字符串字节数是否小于等于wordlength，小于等于就不用截取，直接显示，大于wordlength就截取if (String.getBlength(text) <= wordlength) {cname[i].innerHTML = text;} else {// 截取指定长度的字符串var result = String.cutByte(text, wordlength, '');// alert(result);cname[i].innerHTML = result + '...';}}　　　　　
}
wordlimit('description', 20) //显示10个字

点击按钮展开内容，再次点击按钮收起内容（按钮样式也同时改变）

<div class="all"><div class="title"><span class="open-icon"></span></div><div class="con">我是内容</div>
</div>
<style>
*{ margin:0; padding:0;}
.all { margin:20px;}
.all .open-icon { background: url(open.png) no-repeat center; width: 19px; height: 20px; -webkit-transition: -webkit-transform .5s linear; transition: -webkit-transform .5s linear; transition: transform .5s linear; transition: transform .5s linear, -webkit-transform .5s linear; -webkit-transform: rotate(0deg); transform: rotate(0deg); cursor: pointer;display: inline-block; vertical-align: middle;margin-top: -3px; margin-left:4px;}
.all .put-icon { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function() {$('.title span').click(function() {if($('.title span').hasClass('put-icon')){$(this).removeClass('put-icon');}else{$(this).addClass('put-icon');}$(this).parents('.all').find('.con').slideToggle();});
});
</script>

部分超链接在新窗口打开

$(document).ready(function() {   $("div a").attr("target","_blank");
})

点击按钮时，清除元素绑定的事件

$(function(){$('.btn').click(function(event) {clearTimeout(timer);   //点击按钮清除定时$('.touming,.Content').show();});$('.close').click(function(event) {$('.touming,.Content').hide();});//5秒弹窗var timer;timer = setTimeout(function(){$('.touming,.Content').show();},5000)
});

【JS】常用效果总结相关推荐

js常用效果代码封装
我们在工作中经常需要写很多效果或方法,但是有些效果和方法我们都已经写过无数次了,因此我们会把这些代码给封闭起来,以便以后使用,以下就是我个人在工作中整理出的一些常用代码,以后会不定期更新. 1.时间格 ...
JS常用脚本+html代码大全+对联广告代码效果大全
JS常用脚本 1. on_contextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border on_co ...
js常用插件(九)之移动端翻书效果turn.js
js常用插件之turn.js-modernizr翻书效果欢迎点击: 个人官网博客首先引入必要的三个文件 <link rel="stylesheet" href=" ...
prototype.js常用函数及其用法
prototype.js常用函数: 函数名解释举例 Element.toggle 交替隐藏或显示 Element.toggle(''div1'',''div2'') Element.h ...
Bootstrap警告框、弹出提示层、模态框的js插件效果总结
Bootstrap警告框js插件经常会在bootstrap项目中遇到警告框.弹出提示层.弹出模态框组件等等场景应用. 使用前准备: 插件使用之前,请先导入如下文件: jquery.min.js bo ...
js常用插件(七)之conversion压缩图片(不改变图片尺寸大小)
js常用插件之conversion压缩图片(重点:不改变尺寸大小) 欢迎点击: 个人官网博客图片压缩只是他的一种功能,更多可以查看官方文档重点:压缩体积并且图片尺寸大小是不变的用法很简单: &l ...
Three.js材质效果
Three.js材质效果本文是Three.js电子书的1.5节前面案例中几何体对应网格模型材质只是设置了一个颜色,实际渲染的时候往往会设置其他的参数,比如实现玻璃效果要设置材质透明度,一些光亮的表 ...
js常用的400个特效
JavaScript实现可以完全自由拖拽的效果,带三个范例 http://www.sharejs.com/showdetails-501.aspx javascript实现可以自由拖动的树形列 ...
js常用插件(二)之移动端手势利器hammer单双指操作
js常用插件之hammer单双指操作欢迎点击: 个人官网博客移动端手势利器: 先引用cdn或自己下载下来 <script src="https://cdn.bootcdn.net/ ...
js动画与html动画效果,九种原生js动画效果
在做页面中,多数情况下都会遇到页面上做动画效果,我们大部分做动画的时候都是使用框架来做(比如jquery),这里我介绍下如何让通过原生的js来实现像框架一样的动画效果! 1.匀速动画效果说明:匀速动画 ...

【JS】常用效果总结

【JS】常用效果总结相关推荐

最新文章

热门文章