Menu
Woocommerce Menu

封装html的select标签的js操作实例,js实现广告漂浮效果的小例子

0 Comment

发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固定的网页位置就完事了,这是非常致命的方式。因为,我经常打开一个网页的时候,发现在网页加载到分享代码的时候,有时候花上几秒的时候来请求百度的服务器,最后展示分享按钮。

复制代码 代码如下:

复制代码 代码如下:

其实,像这样对网页来说不是非常重要的功能,我们大可以用JS来延迟加载,从而提高网页主要内容的快速加载显示。
这里分享下我的放置方式。
一、copy百度分享代码,如下:

function BindSelect(id,dataList,fieldtext,fieldValue) {
//绑定某一个数据源,fieldtext为需要绑定的文本字段,fieldValue为需要绑定的value字段
var select = $(“#” + id)[0];
for (var i = 0; i < dataList.length; i++) {
select.options.add(new Option(eval(“dataList[” + i + “].” +
fieldtext), eval(“dataList[” + i + “].” + fieldValue)));
}
}
function BindSelectOptions(id, OptionList) {
var select = $(“#” + id)[0];
for (var i = 0; i < OptionList.length; i++) {
select.options.add(new Option(OptionList[i].Text,
OptionList[i].Value));
}
}
function ClearAllItems(id) {//清空所有的选项
var select = $(“#” + id)[0];
select.options.length = 0;
}
function AddOneItem(id, text, value) {//添加一个选项
var select = $(“#” + id)[0];
select.options.add(new Option(text, value));
}
function selectOneOption(id, selectValue) {//根据值,选中一个选项
var select = $(“#” + id)[0];
var len = select.options.length;
for (var i = 0; i < len; i++) {
if (select.options[i].value == selectValue) {
select.options[i].selected = true;
break;
}
}
}
function selectOneOptionByIndex(id, index) {//<SPAN
style=”FONT-FAMILY: Arial, Helvetica,
sans-serif”>//根据下标,选中一个选项</SPAN>

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/>
<title></title>
<style type=”text/css”>
div{
position:absolute;
}
</style>
</head>
<body>
<div id=”floatdiv”>
<img src=”1.jpg” height=”100px” width=”200px”>

复制代码 代码如下:

var select = $(“#” + id)[0];
var len = select.options.length;
if (index >= 0 && index <= len) {
select.options[index].selected = true;
}
}

</div>
</body>
</html>
<script language=”javascript” type=”text/javascript”>
/*
利用window对象,实现浮动效果

<!– Baidu Button BEGIN –>
<div id=”bdshare” class=”bdshare_t bds_tools_32
get-codes-bdshare”>
<a class=”bds_tsina”></a>
<a class=”bds_qzone”></a>
<a class=”bds_tqq”></a>
<a class=”bds_renren”></a>
<a class=”bds_douban”></a>
<span class=”bds_more”></span>
<a class=”shareCount”></a>
</div>
<script type=”text/javascript” id=”bdshare_js”
data=”type=tools&uid=0″ ></script>
<script type=”text/javascript” id=”bdshell_js”></script>
<script type=”text/javascript”>
document.getElementById(“bdshell_js”).src =
“” +
Math.ceil(new Date()/3600000)
</script>
<!– Baidu Button END –>

您可能感兴趣的文章:

  • Jquery多选下拉列表插件jquery
    multiselect功能介绍及使用
  • 浅析jQuery对select操作小结(遍历option,操作option)
  • JSP页面中如何用select标签实现级联
  • 删除select中所有option选项jquery代码
  • JQuery中对Select的option项的添加、删除、取值
  • jQuery动态添加删除select项(实现代码)
  • js简单实现HTML标签Select联动带跳转
  • jquery模拟SELECT下拉框取值效果
  • jquery及原生js获取select下拉框选中的值示例
  • Js操作Select大全(取值、设置选中等等)
  • js获取select选中的option的text示例代码
  • js select option对象小结
  • jQuery结合CSS制作漂亮的select下拉菜单
  • jsp中select的onchange事件用法实例
  • javascript中select下拉框的用法总结
  • JS、jQuery中select的用法详解

 1、有一个div,就是我们要控制的,它的起始点坐标(0,0)
 2、设定横向和纵向的速度
 3、控制div移动
  1)div是否到达边界,设置图片速度反向移动
*/
//获取图片所在的div对象

二、放置代码 认真分析上面的分享代码,我们可以发现,其中有3个js脚本标签,这些都是有可能影响网页呈现速度的,最后发现,其实,只有最后一个<script>标签的作用是请求百度服务器,展示分享图片和链接。那么,这条JS我们大可放到最后加载。
下面是我做的一个demo:

var img=document.getElementById(“floatdiv”);
//设置div起始点坐标
var x=0,y=0;
//设置div行进速度
var xSpeed=2,ySpeed=1;
//设置图片移动
var w=document.body.clientWidth-200,h=document.body.clientHeight-100;
function floatdiv(){
 //比较图片是否到达边界,如查到达边界 改变方向;如未到达边界
 if(x>w||x<0) xSpeed= -xSpeed;
 if(y>h||y<0) ySpeed= -ySpeed;

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图