本篇文章给大家谈谈淘宝jquerycdn,以及淘宝客服对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
- 1、网页在淘宝怎么做出鼠标移动切换图片的效果?
- 2、jquery在线文件链接
- 3、国内有哪些靠谱的 Javascript 库 CDN可用
- 4、从CDN引入jquery操作自己网站的对象,为什么没有跨域问题
网页在淘宝怎么做出鼠标移动切换图片的效果?
切换图片效果:html代码:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
title布丁移动官网jQuery焦点图/title
link href="styles/zzsc.css" rel="stylesheet" type="text/css" /
/head
body
br
div id="focus"
div id="slides"
style type="text/css"
ul.pagination{width:55px !important;}
/style
div class="slides_container"
a href="i_weiche.html" title="微车" rel="external"
img src="images/focus/weiche_banner.png" alt="微车" //a
a href="i_ticket.html" title="布丁电影票" rel="external"
img src="images/focus/ticket_banner.png" alt="布丁电影票" //a
a href="i_coupon.html" title="布丁优惠券" rel="external"
img src="images/focus/coupon.jpg" alt="布丁优惠券" //a
/div
/div
/div
script src="scripts/jquery.min_v1.0.js" type="text/javascript"/script
script src="scripts/slides.min.jquery_v1.0.js" type="text/javascript"/script
script type="text/javascript"
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'images/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
fadeSpeed: 350,
effect: 'fade'
});
});
/script
div style="text-align:center;clear:both"
/div
/body
/html
css代码:
@charset "utf-8";
/*通用样式*/
html, body, div, img, ul, ol, li, dl, dt, dd, a, span, h1, h2, h3, h4, h5, h6, p, span {
margin: 0;
padding: 0;
}
*html{
background-image: url(about:blank);
background-attachment: fixed;
}
body {
background: url(../images/body_bg.jpg);
font: 14px "微软雅黑", "宋体", "黑体";
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
border: 0 none!important;
}
ul, li {
list-style: none;
}
#wrap {
background: url(../images/wrap_bg.jpg);
border-bottom: 1px solid #c3c3c3;
box-shadow: 0 3px 20px #d2d2d2;
position: relative;
width: 100%;
display: table;
}
/*焦点图切换*/
#focus {
width: 1000px;
height: 466px;
margin: 0 auto;
background: url(../images/loading.png) no-repeat 48% 37%;
}
#slides {
position: absolute;
z-index: 1;
}
.slides_container {
width: 1000px;
overflow: hidden;
position: relative;
display: none;
}
.slides_container a {
width: 1000px;
height: 466px;
display: block;
}
.pagination {
position: absolute;
bottom: -8px;
z-index: 999;
padding: 0 10px;
padding-top: 3px;
margin-left: 47%;
background: rgba(255,255,255,0.5);
box-shadow: 0 0 10px #ccc inset;
border-radius: 10px;
width: 72px;
height: 14px;
}
.pagination li {
float: left;
margin: 0 4px;
}
.pagination li a {
display: block;
width: 10px;
height: 0;
padding-top: 10px;
background: url(../images/pagination_1.png) 0 0;
float: left;
overflow: hidden;
}
.pagination li.current a {
background-position: 0 -10px;
_background-position: 0 -9px;
}
/*内容*/
#column_ab_a {
width: 100%;
overflow: hidden;
float: left;
padding: 60px 30px 20px;
}
#column_ab_b {
width: 300px;
overflow: hidden;
float: right;
}
/*#column_ab_a*/
#column_ab_a div {
width: 250px;
float: left;
overflow: hidden;
color: #a1a1a1;
margin: 0 30px;
display: inline;
}
#column_ab_a div h2 {
font-size: 16px;
color: #4d4d4d;
padding-left: 50px;
height: 40px;
}
#column_ab_a div#coupon h2 {
background: url(../images/coupon_h2.jpg) no-repeat left center;
}
#column_ab_a div#ticket h2 {
background: url(../images/ticket_h2.jpg) no-repeat left center;
}
#column_ab_a div h2 span {
font-size: 14px;
font-weight: normal;
color: #a1a1a1;
display: block;
background: none;
}
#column_ab_a div p {
font-size: 14px;
margin-top: 20px;
margin-bottom: 20px;
line-height: 24px;
text-indent: 2em;
}
#column_ab_a div p a {
color: #ee4017;
background: url(../images/more.png) no-repeat right center;
padding-right: 10px;
margin-left: 10px;
}
#column_ab_a div p a:hover {
text-decoration: underline;
}
#column_ab_a div h3,
#column_ab_a div h4 {
text-align: right;
}
#column_ab_a div h3 {
margin-top: 5px;
}
/*#column_ab_b*/
#column_ab_b div {
width: 219px;
overflow: hidden;
color: #a1a1a1;
border-left: 1px solid #cecece;
margin-top: 60px;
padding: 0 40px;
}
#column_ab_b div h2 {
font-size: 16px;
color: #4d4d4d;
background: url(../images/system_h2.jpg) no-repeat left center;
padding-left: 50px;
height: 40px;
}
#column_ab_b div h2 span {
font-size: 14px;
font-weight: normal;
color: #a1a1a1;
display: block;
background: none;
}
#column_ab_b div dl {
margin-top: 20px;
line-height: 24px;
}
#column_ab_b div dt {
color: #4d4d4d;
font-weight: bold;
background: url(../images/dot1.png) no-repeat left center;
padding-left: 15px;
}
#column_ab_b div dd {
padding-left: 15px;
margin-bottom: 10px;
}
#column_ab_b div a {
display: block;
width: 161px;
height: 44px;
background: url(../images/tosystem.jpg);
text-indent: -9999px;
margin: 20px auto;
}
#sbuding {
display: block;
width: 161px;
height: 44px;
background: url(../images/tosystem.jpg);
text-indent: -9999px;
margin-left:60px;
}
切换图片无论在淘宝网页上还是一般的网站上都是非常的常见的一个效果。实现的方法也有多种。只要灵活运用就行。不难。
jquery在线文件链接
有的啊,到jquery官方网站上找啊,google和微软以及jquery官方网站都有提供的,
百度知道很lj,不让写网址
你或者直接搜索 jQuery CDN
国内有哪些靠谱的 Javascript 库 CDN可用
★新浪CDN,感觉很快,用的人很多,推荐使用!
script src=""/script
其它版本可以在这里找地址
★百度CDN
script src=""/script
其它版本之间修改代码中的版本号就行了
★360的CDN
script src=""/script
其它版本也是直接修改版本号就可以了
如果担心CDN地址加载失败,可以这样载入本地jquery
script type="text/javascript"
!window.jQuery document.write('script src="js/jquery.min.js"\/script');
/script
从CDN引入jquery操作自己网站的对象,为什么没有跨域问题
因为cdn与ajax无关。引入jquery是html把对应文件拿到,这里面没有涉及js的ajax请求。而且html中的引用更类似于正常访问页面而不是发送ajax请求。而跨域问题只跟ajax有关,是为了防止对其它网站的恶意访问的。
淘宝jquerycdn的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于淘宝客服、淘宝jquerycdn的信息别忘了在本站进行查找喔。