一、根据后端动态字段，如何把驻点输出在页面上？
1、可以提前写好css，设置li的宽度，在页面中通过模板引擎语法动态加载不同的className。
2、可以根据驻点个数和位置，用jquery去动态计算赋值。
var paths = $('.detail-path');
$.each(paths, function(){
var points = $(this).children(),
pointsLen = points.length;
$.each(points, function(){
var $this = $(this),
middleNum = 100 / (pointsLen + 1),
halfSelfWidth = $this.width() / 2,
leftPercent = $this.attr('data-left') * middleNum;
$this.css({'left': leftPercent + '%', 'margin-left': -halfSelfWidth + 'px'}).show();
});
});
二、信息滚动
1、单行信息滚动
setInterval(this.marquee,3000);
marquee: function(){
var prizeul=$('#prizeul');//定义滚动区域
var fli=prizeul.find('li:first');
var flih=fli.height();//每次滚动高度
fli.animate({
marginTop:-flih+'px'
},600,function(){//通过取负margin值,隐藏第一行
fli.css('marginTop',0).appendTo(prizeul);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
},
2、鼠标移进停止滚动，移出继续滚动
var vid = setInterval(marquee,3000);
$('.J-scroll').mouseenter(function(){
clearInterval(vid);
}).mouseleave(function(){
vid = setInterval(marquee,3000);
});
三、回到顶部
//页面滚动时，是否显示回到顶部
$(window).scroll(function(){
if($(window).scrollTop() > 1500){
$('.returntop').show();
}else{
$('.returntop').hide();
}
}); //回到顶部的点击事件
$('.returntop').click(function(){
var timer = null;
timer = setInterval(function(){
var top = document.documentElement.scrollTop || document.body.scrollTop;
var speed = Math.ceil(top/6);//高度小于6时可以一直递减到0
document.documentElement.scrollTop = top - speed;//缓慢增加
document.body.scrollTop = top - speed;
if(!top){
clearInterval(timer);
}
},50);
});
四、懒加载
<script type="text/javascript" src="/js/lazyload/jquery.js"></script>
<script>
$(document).ready(function(){
// 获取页面视口高度
var viewportHeight = $(window).height();
var lazyload = function() {
// 获取窗口滚动条距离
var scrollTop = $(window).scrollTop();
$('img').each(function(){
// 判断视口高度+滚动条距离与图片元素距离文档原点的高度
var x = scrollTop + viewportHeight - $(this).position().top;
// 如果大于0即该元素能被浏览者看到，则将暂存于自定义属性loadpic的值赋值给真正的src
if (x > 0){
$(this).attr('src',$(this).attr('loadpic'));
}
});
}
// 创建定时器 “实时”计算每个元素的src是否应该被赋值
setInterval(lazyload,100);
});
</script>
五、获取文本框的焦点时，如何使光标停留在文字后面？
var t = $("#J_input").val();
$("#J_input").val("").focus().val(t);
先获取内容，将其置空，然后获取焦点，最后填充内容，即可实现光标出现在文字后面的功能。
六、表单复选框，全选，取消子选项
<input name='selectall' type='checkbox' id="J_select_all_btn"> 全选
<input name='jsframe' type='checkbox'>es5
<input name='jsframe' type='checkbox'>es6
<input name='jsframe' type='checkbox'>reactjs
<input name='jsframe' type='checkbox'>vuejs
<input name='jsframe' type='checkbox'>angularjs
<input name='jsframe' type='checkbox'>jquery
//给全选按钮绑定事件
$("#J_select_all_btn").click(function() {
$('input[name="jsframe"]').attr("checked", this.checked);
});
var $jsframe = $("input[name='jsframe']");
//给每个checkbox绑定事件
$jsframe.click(function() {
$("#J_select_all_btn").attr("checked", $jsframe.length == $("input[name='jsframe']:checked").length ? true: false);
});