扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
index.html文件是下载的效果页面,js和css文件为修饰文件,你要使用素材,需要将js和css文件,分别放置到你的网页中对应的位置,在你的也面中引入,对应修改引用地址。index.html文件里,有效果的原代码,也需要相应复制到你的页面中。然后,通过调整css,把素材你变成你需要的样子~
我们提供的服务有:成都网站设计、成都网站制作、微信公众号开发、网站优化、网站认证、朝天ssl等。为上千余家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的朝天网站制作公司
在代码中找到你要修改的部分 要是没有a标签 加个a标签 添加href =“你的链接” 就可以了,你要不会可以把代码发给我,我给你改
jquery获取元素索引值index()方法:
jquery的index()方法
搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
如果不给
.index()
方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。
复制代码代码如下:
foo
bar
baz
$('li').index(document.getElementById('bar'));
//1,传递一个DOM对象,返回这个对象在原先集合中的索引位置
$('li').index($('#bar'));
//1,传递一个jQuery对象
$('li').index($('li:gt(0)'));
//1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置
$('#bar').index('li');
//1,传递一个选择器,返回#bar在所有li中的做引位置
$('#bar').index();
//1,不传递参数,返回这个元素在同辈中的索引位置。
jquery获取元素索引值index()示例
复制代码代码如下:
//用于二级或者三级联动
建站素材
jquery特效
懒人主机
前端路上
$("#nav
a").click(function(){
//四个经典的用法
var
index1
=
$("#nav
a").index(this);
var
index2
=
$("#nav
a").index($(this));
var
index3
=
$(this).index()
var
index3
=
$(this).index("a")
alert(index3);
return
false;
});
reset.css、index.css、jquery-1.7.2.min.js这些都是外部链接样式,后缀名不变,名字自定义,一般下载了之后根据你想要的结果可以加以修改,不过js样式改的比较少,大部分是改css样式,!----这个符号是注释的意思,写在这个里面的任何东西都会不起作用,这样备注了之后不会因为代码太多而找不到特效的代码,具体的你可以查看w3c规则或者是网上教程
这是你现在的结构;建议星星图标可以用作背景图片;
!doctype html
html
head
meta charset="utf-8"
title无标题文档/title
script type="text/javascript" src=""/script
/head
body
style
*{ margin:0; padding:0;}
ul.stars{ display:block; margin:100px 100px 30px; overflow:hidden;}
ul.stars li{ display:block; float:left; padding:0 4px; cursor:pointer;}
ul.stars li img{ display:block; width:30px; height:30px;}
ul.stars li img.full{ display:none;}
ul.stars li.on img.empty{ display:none;}
ul.stars li.on img.full{ display:block;}
/style
script
$(document).ready(function(e) {
$("ul.stars li").click(function(){
$(this).toggleClass("on");
var stars = $("ul.stars").find("li.on").size();
$("input#stars").val(stars);
});
});
/script
form method="get"
ul class="stars"
li
img class="empty" src=";fm=26gp=0.jpg" /
img class="full" src="" /
/li
li
img class="empty" src=";fm=26gp=0.jpg" /
img class="full" src="" /
/li
li
img class="empty" src=";fm=26gp=0.jpg" /
img class="full" src="" /
/li
li
img class="empty" src=";fm=26gp=0.jpg" /
img class="full" src="" /
/li
li
img class="empty" src=";fm=26gp=0.jpg" /
img class="full" src="" /
/li
/ul
input type="hidden" id="stars" name="stars" /
input type="submit" value="提交" style="margin:0 100px;"
/form
/body
/html
最好的方式是把图片处理一下作为ul的背景图,通过点击li获取索引值来改变ul的背景图片位置;不能上传附件了。。还是上代码吧。。
!DOCTYPE HTML
html
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /
meta name="keywords" content="" /
meta name="description" content="" /
title评价/title
script type="text/javascript" src=""/script
script
$(document).ready(function(){
//星级评分
$("form p span.radio label.radio").click(function(){
$(this).parent("span.radio").css("background-position-y",-($(this).index()*19)+"px");
});
});
/script
style
*{ margin:0; padding:0;}
form p{ display:block; overflow:hidden; padding:10px 20px;}
form p label{ display:block; height:36px; line-height:36px; color:#444; font-size:14px; float:left;}
form p span.radio{ display:block; width:150px; height:19px; background:url(stars.png) left 0px no-repeat; float:left; margin:8px 0 0;}
form p input.radio{ display:none;}
form p label.radio{ width:20%; height:100%; margin:0; cursor:pointer;}
form input.btn{ display:block; width:210px; height:36px; line-height:36px; *line-height:normal; color:#fff; font-size:15px; background:#ffb81f; border:0; border-radius:6px; cursor:pointer; float:left; margin-top:10px;}
/style
body
form
p
label服务态度:/label
span class="radio"
input class="radio" type="radio" name="star1" value="0" checked /
label class="radio" for="star11"/label
label class="radio" for="star12"/label
label class="radio" for="star13"/label
label class="radio" for="star14"/label
label class="radio" for="star15"/label
input id="star11" class="radio" type="radio" name="star1" value="1" /
input id="star12" class="radio" type="radio" name="star1" value="2" /
input id="star13" class="radio" type="radio" name="star1" value="3" /
input id="star14" class="radio" type="radio" name="star1" value="4" /
input id="star15" class="radio" type="radio" name="star1" value="5" /
/span
/p
p
label运输速度:/label
span class="radio"
input class="radio" type="radio" name="star2" value="0" checked /
label class="radio" for="star21"/label
label class="radio" for="star22"/label
label class="radio" for="star23"/label
label class="radio" for="star24"/label
label class="radio" for="star25"/label
input id="star21" class="radio" type="radio" name="star2" value="1" /
input id="star22" class="radio" type="radio" name="star2" value="2" /
input id="star23" class="radio" type="radio" name="star2" value="3" /
input id="star24" class="radio" type="radio" name="star2" value="4" /
input id="star25" class="radio" type="radio" name="star2" value="5" /
/span
/p
p
label货款发放:/label
span class="radio"
input class="radio" type="radio" name="star3" value="0" checked /
label class="radio" for="star31"/label
label class="radio" for="star32"/label
label class="radio" for="star33"/label
label class="radio" for="star34"/label
label class="radio" for="star35"/label
input id="star31" class="radio" type="radio" name="star3" value="1" /
input id="star32" class="radio" type="radio" name="star3" value="2" /
input id="star33" class="radio" type="radio" name="star3" value="3" /
input id="star34" class="radio" type="radio" name="star3" value="4" /
input id="star35" class="radio" type="radio" name="star3" value="5" /
/span
/p
p
input class="btn" type="submit" value="提交" /
/p
/form
/body
/html
附上图片素材
1、打开jquery。
2、导入素材。
3、将电影素材排列到主页。
4、点击编辑后台按钮。
5、在弹出的界面里输入代码就可以了。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流