使用方法:
使用该跑马灯特效之前要先引入jQuery和marquee.js文件。
<scriptsrc="jquery-1.11.2.min.js"></script> <scriptsrc="marquee.js"></script>
HTML结构:
跑马灯中的文字使用无序列表来制作,外面使用一个<div>作为包裹容器。
123456789101112 <divclass="container"><divclass="marquee-sibling">BreakingNews</div><divclass="marquee"><ulclass="marquee-content-items"><li>Item1</li><li>Item2</li><li>Item3</li><li>Item4</li><li>Item5</li></ul></div></div>
CSS样式:
下面是该跑马灯特效的一些基本样式。
04142434445464748495051525354 .container{width:100%;background:#4FC2E5;float:left;display:inline-block;overflow:hidden;box-sizing:border-box;height:45px;position:relative;cursor:pointer;}.marquee-sibling{padding:0;background:#3BB0D6;width:20%;height:45px;line-height:42px;font-size:12px;font-weight:normal;color:#ffffff;text-align:center;float:left;left:0;z-index:2000;}.marquee,*[class^="marquee"]{display:inline-block;white-space:nowrap;position:absolute;}.marquee{margin-left:25%;}.marquee-content-items{display:inline-block;padding:5px;margin:0;height:45px;position:relative;}.marquee-content-itemsli{display:inline-block;line-height:35px;color:#fff;}.marquee-content-itemsli:after{content:"|";margin:01em;}
初始化插件:
123 $(function(){createMarquee();});
在页面加载完毕之后,可以通过下面的方法来初始化该跑马灯插件。
配置参数:
下面是该跑马灯特效的可用配置参数。
$(function(){createMarquee({//:30000,//:20,//-//'scontent.//_class:'.example-marquee',//.container_class:'.example-container',//-//.sibling_class:'.example-sibling',//.hover:false});});
② javaScript 一行代码太长了,但直接分行会自动在后面加分号,怎么解决呀
打开编辑器的自动换行功能啊。
③ 网页的一个js问题。如何点一个按钮。出现一行代码,这一行代码包括select input好几个
使用jQuery,首先为需要显示的内容添加hide属性,然后为按钮绑定一个事件,去除hide属性即可。jQuery的一些插件还可以实现弹出动画等效果。
④ js判断上一行代码执行完毕,然后再执行下一行代码
var city_val = jq.trim(jq("#consignee_city"+address_id).html());
jq("#selCities").attr("value",city_val);
var re = document.getElementById("selCities").onchange();
if(re){
var city_val = jq.trim(jq("#consignee_district"+address_id).html());
jq("#selDistricts").attr("value",city_val);
}
这样行不行
⑤ 如何使用一行JavaScript代码对网页的输入框进行输入
比如说:(为了方便,其它标签略去内了)容
<html>
<input id="box" name="Input Box"/>
<script>
document.getElementById("box").value = "Content";
</script>
</html>
⑥ JS 正则表达式解释(就一行代码)
/^\w{1,15}(?:@(?!-))(?:(?:[a-z0-9-]*)(?:[a-z0-9](?!-))(?:\.(?!-)))+[a-z]{2,4}$/
字母数字下划线1至15个,后接@紧接后面不能是符号-,然后紧接一种字符串,这种字符串将出现至少1次,特征是:
【接至少1个小写字母数字中线-(但不能是-结尾 ),后接1个小数点.,然后不能是是符号-】
后接小写字母2-4个
这大概就是[email protected]这种吧,要求在@后面紧接位置和之后的小数点.前后也就是那些“x”的位置不能是中线-
就是1个验证邮箱的正则不过还是有疏漏,比如[email protected] 也被认为是合法邮箱。
⑦ 这种代码怎么改成一行js语句
请先把代码复制下,然后粘出来,我帮你改
⑧ js代码不可以写在一行吗
除了极个别情况,绝大部分代码都是可以写在一行的,用分号;隔开即可。
⑨ 如果我想把 JS 写在一行里, 那每段代码间如何分隔
你可以用“;”不过是半角的哦!
我建议你还是不要把它写在一行里的好。因为那样显的代码不够整洁。
⑩ 求每一行代码的作用。javascript
var g_aLis = []; //全局变量 存储在ID为'show1'的标签对象中所有的<li>标签对象
var g_aBtns = []; //全局变量 存储在ID为'show1'的标签对象中所有的<span>标签对象
var g_oTimer = null; //全局变量 用于存储定时器,便于任何地方调用清除
var g_minWidth = 22; //全局变量 作者标示<li>标签最小的宽度
window.onload = function () {//网页文档加载完成后执行
var a = document.getElementById('show1'); //获取ID为'show1'的标签对象
var i = 0;
g_aLis = a.getElementsByTagName('li'); //在ID为'show1'的标签对象中,查找所有的<li>标签对象
g_aBtns = a.getElementsByTagName('span'); //在ID为'show1'的标签对象中,查找所有的<span>标签对象
for (i = 0; i < g_aBtns.length; i++) {//遍历ID为'show1'的标签下的<span>标签元素
g_aBtns[i].index = i; //为每个<span>标签元素定义一个自定义属性index,值为i,即元素顺序下标
g_aBtns[i].onmouseover = function () {//为<span>标签元素添加onmouseover(鼠标移动至元素可见部分)事件
gotoImg(this.index)//触发事件后,将自定义值(即i)作为参数,传至函数gotoImg,执行
}
}
};
function gotoImg(a) {
if (g_oTimer) {//如果g_oTimer对象不为空,则执行
clearInterval(g_oTimer)//停止定时器 g_oTimer
}
//每隔35毫秒,执行changeWidthInner函数,参数为当前<span>元素下标,并将该定时器赋值到g_oTimer
g_oTimer = setInterval("changeWidthInner(" + a + ")", 35)
}
function changeWidthInner(a) {
var b = document.getElementById('show1'); //获取ID为'show1'的标签对象
var c = 660; //代表整个滚动区域的宽度
var w = 0;
var d = true; //表示是否有<li>标签元素的宽度需要修改
var i = 0;
for (i = 0; i < g_aLis.length; i++) {//遍历ID为'show1'的标签下的<li>标签元素
if (i == a) {//如果<li>标签的下标 和 鼠标所在的<span>标签的下标相同时
continue//不执行以下语句,进入下一次循环
}
if (g_minWidth == g_aLis[i].offsetWidth) {//如果当前<li>标签的显示宽度为22
c -= g_aLis[i].offsetWidth; //c = c - 22 计算滚动区域剩余可以分配的宽度
continue
}
//当<li>标签中含有宽度不为 22 时,便执行以下语句(除<li>标签的下标 和 鼠标所在的<span>标签的下标相同时)
d = false;
//↓ Math.ceil 返回大于或者等于表达式的最小整数,表达式为<li>标签宽度超过22的部分除以10
speed = Math.ceil((g_aLis[i].offsetWidth - g_minWidth) / 10);
w = g_aLis[i].offsetWidth - speed; //将当前<li>标签的宽度,减去以上表达式的结果,赋值到临时变量
if (w <= g_minWidth) {//当这个临时变量小于作者定义的最小宽度时,执行
w = g_minWidth//即<li>标签的元素只能大于等于作者定义的最小宽度
}
g_aLis[i].style.width = w + 'px'; //将当前<li>标签的元素宽度改为临时变量的值
c -= w// 计算滚动区域剩余可以分配的宽度
}
g_aLis[a].style.width = c + 'px'; //将鼠标当前的<li>标签,定义为剩余的宽度,使其满足整个区域宽度保持660
if (d) {//当鼠标所在的<span>标签下标 和 相同的<li>标签,达到最大宽度时,即其他<li>标签宽度都为22时,执行
clearInterval(g_oTimer); //停止定时器,即不在定时执行该函数(changeWidthInner)
g_oTimer = null//并把定时器赋值为空
}
}
该js代码的效果是,一个id为show1的标签中(一般来说是div)里面有许多并列的<li>标签
<span>标签的数量和<li>标签数量相同,并且一一对应
1.<span>标签在<li>标签中
看到的效果为,鼠标所在的<li>标签慢慢变大,宽度大于22的<li>标签慢慢变小
增减的像素,由大至小,不改变时,定时器停止
2.<span>标签在<li>标签外,一般独立一列,或者一行,效果和一些flash广告切换那样
看到的效果为,鼠标所在的<span>标签对应下标的<li>标签慢慢变大,
宽度大于22的<li>标签慢慢变小
增减的像素,由大至小,不改变时,定时器停止