87,910
社区成员
发帖
与我相关
我的任务
分享请发表友善的回复…
发表回复
fzfei2 2013-09-26
- 打赏
- 举报
通过缩略图掠过事件改变 主图 显示相对就的图,动画用JQ实现
页面排版CSS直接考他的
yaganblw 2013-09-26
- 打赏
- 举报
一天要饭生活又开始啦 2013-09-26
- 打赏
- 举报
非常感谢
fzfei2 2013-09-26
- 打赏
- 举报
(function () {
/*-------------------------编辑数据修改-------------------------------*/
var data = [
{img1: 'http://img1.gtimg.com/news/pics/hv1/93/163/1426/92767308.jpg', title: '夏俊峰之子哭泣怀念父亲', slink: 'http://news.qq.com/a/20130926/004177.htm#p=1'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/190/161/1426/92766895.jpg', title: '活着：谁为我负责', slink: 'http://news.qq.com/zt2012/living/yimiao.htm'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/189/161/1426/92766894.jpg', title: '大黄鸭吻别园博湖 移居颐和园', slink: 'http://news.qq.com/a/20130926/003865.htm#p=1'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/191/161/1426/92766896.jpg', title: '【影像记忆】辽沈晚报精选：母婴盗窃团', slink: 'http://news.qq.com/zt2012/Memory2012/liaoshenwanbao.htm'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/88/176/1426/92770618.jpg', title: '世界小姐时装秀 群芳争艳超养眼', slink: 'http://news.qq.com/a/20130926/003596.htm'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/36/66/1426/92742516.jpg', title: '独家：夏俊峰被执行死刑之后', slink: 'http://news.qq.com/a/20130925/014734.htm#p=1'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/213/196/1424/92645793.jpg', title: '影像记录曼哈顿街头的女神梦露', slink: 'http://news.qq.com/a/20130923/012719.htm#p=1'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/55/68/1426/92743045.jpg', title: '夏健强绘画作品饱含对父亲夏俊峰思念之情', slink: 'http://news.qq.com/a/20130925/012023.htm#p=1'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/133/194/1425/92710228.jpg', title: '巴基斯坦7.7级强震 海上冒出小岛', slink: 'http://news.qq.com/a/20130925/005598.htm#p=1'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/122/202/1425/92712257.jpg', title: '海南三亚“摩的”当校车 一车拉5人', slink: 'http://news.qq.com/a/20130925/004403.htm#p=1'}
]
/*-------------------------编辑数据修改-------------------------------*/
var aImg = $('focus_view').getElementsByTagName('li');
var aTxt = $('focus_text').getElementsByTagName('li');
var aSmg = $('focus_slider').getElementsByTagName('li');
var aaImg = $('focus_view').getElementsByTagName('img');
var aaSmg = $('focus_slider').getElementsByTagName('img');
var aa0 = $('focus_text').getElementsByTagName('a');
var aa1 = $('focus_slider').getElementsByTagName('a');
var aa2 = $('focus_view').getElementsByTagName('a');
var oUl = $('focus_slider').getElementsByTagName('ul')[0];
var oNum = $('num');
var oPrev = $('prev');
var oNext = $('next');
for (var i = 0; i < aSmg.length; i++) {
aSmg[i].index = i; //当前添加索引
aImg[i].index = i;
aa0[i].href = aa1[i].href = aa2[i].href = data[i].slink;
aa0[i].innerHTML = data[i].title;
aaImg[i].src = aaSmg[i].src = data[i].img1;
aSmg[i].onmouseover = function () {
for (var i = 0; i < aSmg.length; i++) {
aSmg[i].className = '';
aTxt[i].className = '';
startMove(aImg[i], 'opacity', 0);
aImg[i].style.zIndex = 1;
}
aSmg[this.index].className = 'current';
aTxt[this.index].className = 'show';
oNum.innerHTML = this.index + 1 + '/10';
startMove(aImg[this.index], 'opacity', 100);
aImg[this.index].style.zIndex = 2;
}
oNext.onclick = oPrev.onclick = function () {
if (parseInt(oUl.style.marginLeft) < 0) {
startMove(oUl, 'marginLeft', 0);
for (var i = 0; i < aSmg.length; i++) {
aTxt[i].className = '';
startMove(aImg[i], 'opacity', 0);
aSmg[i].className = '';
aImg[i].style.zIndex = 1;
}
startMove(aImg[0], 'opacity', 100);
aSmg[0].className = 'current';
aTxt[0].className = 'show';
oNum.innerHTML = 1 + '/10';
aImg[0].style.zIndex = 2;
} else {
startMove(oUl, 'marginLeft', -oUl.offsetWidth / 2);
for (var i = 0; i < aSmg.length; i++) {
aTxt[i].className = '';
startMove(aImg[i], 'opacity', 0);
aSmg[i].className = '';
aImg[i].style.zIndex = 1;
}
startMove(aImg[aSmg.length / 2], 'opacity', 100);
aSmg[aSmg.length / 2].className = 'current';
aTxt[aSmg.length / 2].className = 'show';
oNum.innerHTML = (aSmg.length * 0.5 + 1) + '/10';
aImg[aSmg.length / 2].style.zIndex = 2;
}
}
}
})();
function $(id) {
return document.getElementById(id)
}
;
function startMove(obj, attr, iTarget) { //轮换动画
clearInterval(obj.timer);
obj.timer = setInterval(function () {
doMove(obj, attr, iTarget);
}, 15);
}
function doMove(obj, attr, iTarget) {
var iCur = 0;
if (attr == 'opacity') {
iCur = parseInt(100 * getStyle(obj, attr)) || 0;
} else {
iCur = parseInt(getStyle(obj, attr)) || 0;
}
var iSpeed = (iTarget - iCur) / 8;
iSpeed = (iSpeed > 0) ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur == iTarget) {
clearInterval(obj.timer);
} else if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
obj.style.opacity = (iCur + iSpeed) / 100;
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
function getStyle(obj, attr) { //取样式
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
</script>
</body>
</html>
fzfei2 2013-09-26
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<link href="http://news.qq.com/css/2012/pcss20130106.css" media="screen" rel="stylesheet" type="text/css" />
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, button, textarea, p, th, td {
margin: 0;
padding: 0;
}
#focus {
height: 419px;
left: 7px;
overflow: hidden;
position: relative;
top: 5px;
width: 625px;
}
#focus .focus_view {
height: 349px;
overflow: hidden;
width: 625px;
}
#focus .focus_view ul {
height: 349px;
position: relative;
width: 625px;
}
#focus .focus_view li {
height: 349px;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 625px;
}
#focus .focus_view img {
float: left;
height: 350px;
width: 625px;
}
#focus .focus_text {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
left: 0;
padding: 0 15px;
position: absolute;
top: 310px;
width: 595px;
z-index: 3;
}
#focus .focus_text h3 {
height: 40px;
line-height: 40px;
overflow: hidden;
padding-right: 40px;
}
#focus .focus_text h3 a {
color: #FFFFFF;
font-family: "微软雅黑","黑体",Arial,sans-serif;
font-size: 18px;
font-weight: normal;
text-decoration: none;
}
#focus .focus_text li {
display: none;
}
#focus .focus_text li.show {
display: block;
}
#focus .focus_slider {
height: 64px;
margin: 0 auto;
padding-top: 6px;
width: 625px;
}
#focus .focus_slider .mask {
display: inline;
float: left;
height: 64px;
margin-left: 6px;
overflow: hidden;
width: 590px;
}
#focus .focus_slider ul {
margin-left: 0;
width: 1180px;
}
#focus .focus_slider li {
display: inline;
float: left;
height: 64px;
overflow: hidden;
width: 118px;
}
#focus .focus_slider li img {
height: 64px;
opacity: 0.6;
width: 115px;
}
#focus .focus_slider li a {
background: none repeat scroll 0 0 #000000;
display: block;
height: 64px;
overflow: hidden;
width: 115px;
}
#focus span.prev, #focus span.next {
background-image: url("http://mat1.gtimg.com/news/wangchuang/theme_ui.png");
background-repeat: no-repeat;
cursor: pointer;
float: left;
height: 64px;
margin: 0;
width: 13px;
}
#focus span.prev {
background-position: -710px -124px;
}
#focus span.next {
background-position: -736px -124px;
float: right;
}
#focus li.current img {
opacity: 1;
}
#focus #num {
color: #FFFFFF;
font-size: 14px;
position: absolute;
right: 10px;
top: 10px;
}
html,body{ height:100%;width:100%;margin:0;padding:0 }
</style>
</head>
<body>
<div id="focus">
<div class="focus_view" id="focus_view"> <!--大图-->
<ul>
<li style="opacity: 1; z-index: 2;"><a bosszone="focuspic1" target="_blank" href="http://news.qq.com/a/20130925/014734.htm#p=1"><img src="http://img1.gtimg.com/news/pics/hv1/36/66/1426/92742516.jpg" id="bigimg_1"></a></li>
<li style="z-index: 1; opacity: 0;"><a bosszone="focuspic2" target="_blank" href="http://news.qq.com/a/20130925/012023.htm#p=1"><img src="http://img1.gtimg.com/news/pics/hv1/55/68/1426/92743045.jpg"></a></li>
<li style="z-index: 1; opacity: 0;"><a bosszone="focuspic3" target="_blank" href="http://news.qq.com/a/20130925/005598.htm#p=1"><img src="http://img1.gtimg.com/news/pics/hv1/133/194/1425/92710228.jpg"></a></li>
<li style="z-index: 1; opacity: 0;"><a bosszone="focuspic4" target="_blank" href="http://news.qq.com/a/20130925/004403.htm#p=1"><img src="http://img1.gtimg.com/news/pics/hv1/122/202/1425/92712257.jpg"></a></li>
<li style="z-index: 1;"><a bosszone="focuspic5" target="_blank" href="http://news.qq.com/zt2012/Memory2012/zhanjiangribao.htm"><img src="http://img1.gtimg.com/news/pics/hv1/53/177/1425/92705813.jpg"></a></li>
<li style="z-index: 1;"><a bosszone="focuspic6" target="_blank" href="http://news.qq.com/a/20130924/006208.htm"><img src="http://img1.gtimg.com/news/pics/hv1/7/193/1424/92644822.jpg"></a></li>
<li style="z-index: 1;"><a bosszone="focuspic7" target="_blank" href="http://news.qq.com/a/20130924/011372.htm#p=1"><img src="http://img1.gtimg.com/news/pics/hv1/200/21/1425/92666180.jpg"></a></li>
<li style="z-index: 1;"><a bosszone="focuspic8" target="_blank" href="http://news.qq.com/a/20130924/004466.htm#p=1"><img src="http://img1.gtimg.com/news/pics/hv1/103/226/1424/92653333.jpg"></a></li>
<li style="z-index: 1;"><a bosszone="focuspic9" target="_blank" href="http://news.qq.com/zt2012/Memory2012/dongyajingmaoxinwen.htm"><img src="http://img1.gtimg.com/news/pics/hv1/236/194/1424/92645306.jpg"></a></li>
<li style="z-index: 1;"><a bosszone="focuspic10" target="_blank" href="http://news.qq.com/a/20130923/012719.htm#p=1"><img src="http://img1.gtimg.com/news/pics/hv1/213/196/1424/92645793.jpg"></a></li>
</ul>
</div>
<div class="focus_text" id="focus_text"> <!--标题-->
<ul>
<li class="show"><h3><a target="_blank" href="http://news.qq.com/a/20130925/014734.htm#p=1">独家：夏俊峰被执行死刑之后</a></h3></li>
<li class=""><h3><a target="_blank" href="http://news.qq.com/a/20130925/012023.htm#p=1">夏健强绘画作品饱含对父亲夏俊峰思念之情</a></h3></li>
<li class=""><h3><a target="_blank" href="http://news.qq.com/a/20130925/005598.htm#p=1">巴基斯坦7.7级强震 海上冒出小岛</a></h3></li>
<li class=""><h3><a target="_blank" href="http://news.qq.com/a/20130925/004403.htm#p=1">海南三亚“摩的”当校车 一车拉5人</a></h3></li>
<li class=""><h3><a target="_blank" href="http://news.qq.com/zt2012/Memory2012/zhanjiangribao.htm">【影像记忆】湛江日报精选：浪中捕鱼</a></h3></li>
<li class=""><h3><a target="_blank" href="http://news.qq.com/a/20130924/006208.htm">山东烟台富士康发生集体斗殴事件 致11人受伤</a></h3></li>
<li class=""><h3><a target="_blank" href="http://news.qq.com/a/20130924/011372.htm#p=1">太原男子跳桥轻生 路人“拉钩”劝解营救</a></h3></li>
<li class=""><h3><a target="_blank" href="http://news.qq.com/a/20130924/004466.htm#p=1">汕头海水倒灌 动物园河马“越狱”出逃</a></h3></li>
<li class=""><h3><a target="_blank" href="http://news.qq.com/zt2012/Memory2012/dongyajingmaoxinwen.htm">【影像记忆】东亚经贸新闻精选：环卫老男孩集体过七夕</a></h3></li>
<li class=""><h3><a target="_blank" href="http://news.qq.com/a/20130923/012719.htm#p=1">影像记录曼哈顿街头的女神梦露</a></h3></li>
</ul>
<div id="num">1/10</div>
</div>
<div class="focus_slider" id="focus_slider"> <!--缩略图-->
<div onclick=" "><span class="prev" id="prev"></span></div>
<div class="mask">
<ul bosszone="focuspicslt">
<li class="current"><a target="_blank" href="http://news.qq.com/a/20130925/014734.htm#p=1"><img src="http://img1.gtimg.com/news/pics/hv1/36/66/1426/92742516.jpg"> </a></li>
<li class=""><a target="_blank" href="http://news.qq.com/a/20130925/012023.htm#p=1"><img src="http://img1.gtimg.com/news/pics/hv1/55/68/1426/92743045.jpg"> </a></li>
<li class=""><a target="_blank" href="http://news.qq.com/a/20130925/005598.htm#p=1"><img src="http://img1.gtimg.com/news/pics/hv1/133/194/1425/92710228.jpg"> </a></li>
<li class=""><a target="_blank" href="http://news.qq.com/a/20130925/004403.htm#p=1"><img src="http://img1.gtimg.com/news/pics/hv1/122/202/1425/92712257.jpg"> </a></li>
<li class=""><a target="_blank" href="http://news.qq.com/zt2012/Memory2012/zhanjiangribao.htm"><img src="http://img1.gtimg.com/news/pics/hv1/53/177/1425/92705813.jpg"> </a></li>
<li class=""><a target="_blank" href="http://news.qq.com/a/20130924/006208.htm"><img src="http://img1.gtimg.com/news/pics/hv1/7/193/1424/92644822.jpg"> </a></li>
<li class=""><a target="_blank" href="http://news.qq.com/a/20130924/011372.htm#p=1"><img src="http://img1.gtimg.com/news/pics/hv1/200/21/1425/92666180.jpg"> </a></li>
<li class=""><a target="_blank" href="http://news.qq.com/a/20130924/004466.htm#p=1"><img src="http://img1.gtimg.com/news/pics/hv1/103/226/1424/92653333.jpg"> </a></li>
<li class=""><a target="_blank" href="http://news.qq.com/zt2012/Memory2012/dongyajingmaoxinwen.htm"><img src="http://img1.gtimg.com/news/pics/hv1/236/194/1424/92645306.jpg"> </a></li>
<li class=""><a target="_blank" href="http://news.qq.com/a/20130923/012719.htm#p=1"><img src="http://img1.gtimg.com/news/pics/hv1/213/196/1424/92645793.jpg"> </a></li>
</ul>
</div>
<div onclick=" "><span class="next" id="next"></span></div>
</div>
</div>
<script>
一天要饭生活又开始啦 2013-09-26
- 打赏
- 举报
有没有html css啊，运行起来看看效果
豪情 2013-09-26
- 打赏
- 举报
代码就写在页面上。
(function () {
/*-------------------------编辑数据修改-------------------------------*/
var data = [
{img1: 'http://img1.gtimg.com/news/pics/hv1/93/163/1426/92767308.jpg', title: '夏俊峰之子哭泣怀念父亲', slink: 'http://news.qq.com/a/20130926/004177.htm#p=1'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/190/161/1426/92766895.jpg', title: '活着：谁为我负责', slink: 'http://news.qq.com/zt2012/living/yimiao.htm'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/189/161/1426/92766894.jpg', title: '大黄鸭吻别园博湖 移居颐和园', slink: 'http://news.qq.com/a/20130926/003865.htm#p=1'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/191/161/1426/92766896.jpg', title: '【影像记忆】辽沈晚报精选：母婴盗窃团', slink: 'http://news.qq.com/zt2012/Memory2012/liaoshenwanbao.htm'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/88/176/1426/92770618.jpg', title: '世界小姐时装秀 群芳争艳超养眼', slink: 'http://news.qq.com/a/20130926/003596.htm'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/36/66/1426/92742516.jpg', title: '独家：夏俊峰被执行死刑之后', slink: 'http://news.qq.com/a/20130925/014734.htm#p=1'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/213/196/1424/92645793.jpg', title: '影像记录曼哈顿街头的女神梦露', slink: 'http://news.qq.com/a/20130923/012719.htm#p=1'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/55/68/1426/92743045.jpg', title: '夏健强绘画作品饱含对父亲夏俊峰思念之情', slink: 'http://news.qq.com/a/20130925/012023.htm#p=1'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/133/194/1425/92710228.jpg', title: '巴基斯坦7.7级强震 海上冒出小岛', slink: 'http://news.qq.com/a/20130925/005598.htm#p=1'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/122/202/1425/92712257.jpg', title: '海南三亚“摩的”当校车 一车拉5人', slink: 'http://news.qq.com/a/20130925/004403.htm#p=1'}
]
/*-------------------------编辑数据修改-------------------------------*/
var aImg = $('focus_view').getElementsByTagName('li');
var aTxt = $('focus_text').getElementsByTagName('li');
var aSmg = $('focus_slider').getElementsByTagName('li');
var aaImg = $('focus_view').getElementsByTagName('img');
var aaSmg = $('focus_slider').getElementsByTagName('img');
var aa0 = $('focus_text').getElementsByTagName('a');
var aa1 = $('focus_slider').getElementsByTagName('a');
var aa2 = $('focus_view').getElementsByTagName('a');
var oUl = $('focus_slider').getElementsByTagName('ul')[0];
var oNum = $('num');
var oPrev = $('prev');
var oNext = $('next');
for (var i = 0; i < aSmg.length; i++) {
aSmg[i].index = i; //当前添加索引
aImg[i].index = i;
aa0[i].href = aa1[i].href = aa2[i].href = data[i].slink;
aa0[i].innerHTML = data[i].title;
aaImg[i].src = aaSmg[i].src = data[i].img1;
aSmg[i].onmouseover = function () {
for (var i = 0; i < aSmg.length; i++) {
aSmg[i].className = '';
aTxt[i].className = '';
startMove(aImg[i], 'opacity', 0);
aImg[i].style.zIndex = 1;
}
aSmg[this.index].className = 'current';
aTxt[this.index].className = 'show';
oNum.innerHTML = this.index + 1 + '/10';
startMove(aImg[this.index], 'opacity', 100);
aImg[this.index].style.zIndex = 2;
}
oNext.onclick = oPrev.onclick = function () {
if (parseInt(oUl.style.marginLeft) < 0) {
startMove(oUl, 'marginLeft', 0);
for (var i = 0; i < aSmg.length; i++) {
aTxt[i].className = '';
startMove(aImg[i], 'opacity', 0);
aSmg[i].className = '';
aImg[i].style.zIndex = 1;
}
startMove(aImg[0], 'opacity', 100);
aSmg[0].className = 'current';
aTxt[0].className = 'show';
oNum.innerHTML = 1 + '/10';
aImg[0].style.zIndex = 2;
} else {
startMove(oUl, 'marginLeft', -oUl.offsetWidth / 2);
for (var i = 0; i < aSmg.length; i++) {
aTxt[i].className = '';
startMove(aImg[i], 'opacity', 0);
aSmg[i].className = '';
aImg[i].style.zIndex = 1;
}
startMove(aImg[aSmg.length / 2], 'opacity', 100);
aSmg[aSmg.length / 2].className = 'current';
aTxt[aSmg.length / 2].className = 'show';
oNum.innerHTML = (aSmg.length * 0.5 + 1) + '/10';
aImg[aSmg.length / 2].style.zIndex = 2;
}
}
}
})();
function $(id) {
return document.getElementById(id)
}
;
function startMove(obj, attr, iTarget) { //轮换动画
clearInterval(obj.timer);
obj.timer = setInterval(function () {
doMove(obj, attr, iTarget);
}, 15);
}
function doMove(obj, attr, iTarget) {
var iCur = 0;
if (attr == 'opacity') {
iCur = parseInt(100 * getStyle(obj, attr)) || 0;
} else {
iCur = parseInt(getStyle(obj, attr)) || 0;
}
var iSpeed = (iTarget - iCur) / 8;
iSpeed = (iSpeed > 0) ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur == iTarget) {
clearInterval(obj.timer);
} else if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
obj.style.opacity = (iCur + iSpeed) / 100;
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
function getStyle(obj, attr) { //取样式
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
一天要饭生活又开始啦 2013-09-26
- 打赏
- 举报
看了看html结构，是复制一份，jquery具体不好写
