JS+CSS图片新闻效果

最新推荐文章于 2019-07-24 17:14:56 发布
转载 最新推荐文章于 2019-07-24 17:14:56 发布 · 1.6k 阅读 · 1
文章标签：

#css #float #border #div #function #button

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML lang=zh-CN xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>图片新闻效果</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="index, follow" name=robots>
<META content="index, follow" name=googlebot>
<STYLE type=text/css>BODY {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #000; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; TEXT-ALIGN: center
}
TABLE {
    FONT-SIZE: 12px
}
TD {
    FONT-SIZE: 12px
}
P {
    FONT-SIZE: 12px
}
SELECT {
    FONT-SIZE: 12px
}
INPUT {
    FONT-SIZE: 12px
}
DIV {
    FONT-SIZE: 12px
}
UL {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
FORM {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
A IMG {
    BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px
}
FORM {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
INPUT {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
SELECT {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
H6 {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
A:link {
    COLOR: #000; TEXT-DECORATION: none
}
A:visited {
    COLOR: #000; TEXT-DECORATION: none
}
A:active {
    COLOR: #000; TEXT-DECORATION: none
}
A:hover {
    COLOR: #ff0000; TEXT-DECORATION: none
}
.center {
    FLOAT: none; MARGIN: 0px auto; WIDTH: 1000px
}
.bgwhite {
    FLOAT: left; WIDTH: 1000px; BACKGROUND-COLOR: #ffffff
}
.width990 {
    FLOAT: none; MARGIN: 0px auto; WIDTH: 990px; HEIGHT: auto
}
.margin_t_5 {
    MARGIN-TOP: 5px
}
.margin_t_30 {
    MARGIN-TOP: 30px
}
.margin_l_5 {
    MARGIN-LEFT: 4px
}
.margin_l_7 {
    MARGIN-LEFT: 7px
}
.padding_l_30 {
    PADDING-LEFT: 30px
}
.padding_l_26 {
    PADDING-LEFT: 26px
}
.padding_l_560 {
    PADDING-LEFT: 530px
}
.ls2 {
    LETTER-SPACING: 2px
}
.lh22 {
    LINE-HEIGHT: 22px
}
.lh24 {
    LINE-HEIGHT: 24px
}
.lh30 {
    LINE-HEIGHT: 30px
}
.f12b {
    FONT-WEIGHT: bold; FONT-SIZE: 12px
}
.f14 {
    FONT-SIZE: 14px
}
.f14b {
    FONT-WEIGHT: bold; FONT-SIZE: 14px
}
.white {
    COLOR: #fff
}
.white A:link {
    COLOR: #fff
}
.white A:visited {
    COLOR: #fff
}
.white A:active {
    COLOR: #fff
}
.orange {
    COLOR: #ff6600
}
.orange A:link {
    COLOR: #ff6600
}
.orange A:visited {
    COLOR: #ff6600
}
.orange A:active {
    COLOR: #ff6600
}
.orange A:hover {
    COLOR: #ff6600
}
.head_menu {
    FILTER: dropshadow(color=#000000,offx=1,offy=1); COLOR: #ffffff
}
.pic_border {
    BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; BORDER-BOTTOM: #999 1px solid
}
.pic_border_black {
    BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
.red_link {
    COLOR: #ff0000
}
.red_link A:link {
    COLOR: #ff0000
}
.red_link A:visited {
    COLOR: #ff0000
}
.red_link A:active {
    COLOR: #ff0000
}
.red_link A:hover {
    COLOR: #ff6600
}
.blue_link {
    COLOR: #10326b
}
.blue_link A:link {
    COLOR: #10326b
}
.blue_link A:visited {
    COLOR: #10326b
}
.blue_link A:active {
    COLOR: #10326b
}
.blue_link A:hover {
    COLOR: #ff6600
}
.blue1_link {
    COLOR: #999999
}
.blue1_link A:link {
    COLOR: #3366cc
}
.blue1_link A:visited {
    COLOR: #3366cc
}
.blue1_link A:active {
    COLOR: #3366cc
}
.blue1_link A:hover {
    COLOR: #ff6600
}
.red_link1 {
    COLOR: #d90000
}
.red_link1 A:link {
    COLOR: #d90000
}
.red_link1 A:visited {
    COLOR: #d90000
}
.red_link1 A:active {
    COLOR: #d90000
}
.red_link1 A:hover {
    COLOR: #ff0000
}
.headborder {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px
}
.logo {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_01.gif); FLOAT: left; WIDTH: 226px; HEIGHT: 114px
}
.headright {
    FLOAT: left; WIDTH: 774px
}
.headright_part1 {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_02.gif); FLOAT: left; OVERFLOW: auto; WIDTH: 774px; HEIGHT: 28px
}
.headright_part1 LI {
    FLOAT: left; MARGIN: 0px 2px; LINE-HEIGHT: 28px
}
.headright_part1_img {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_04.gif) no-repeat center 50%; WIDTH: 17px; HEIGHT: 24px
}
.input {
    BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; MARGIN: 4px 0px; BORDER-LEFT: #999999 1px solid; WIDTH: 55px; BORDER-BOTTOM: #999999 1px solid; HEIGHT: 18px
}
.login {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/login.gif) no-repeat; FLOAT: left; MARGIN: 5px 0px; WIDTH: 51px; HEIGHT: 17px
}
.reg {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/reg.gif) no-repeat; FLOAT: left; MARGIN: 5px 0px; WIDTH: 51px; HEIGHT: 17px
}
.headright_part2 {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_05.gif); FLOAT: left; WIDTH: 774px; HEIGHT: 86px
}
.headmemu_left {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_06.gif) no-repeat; FLOAT: left; MARGIN: 12px 0px 9px; WIDTH: 17px; HEIGHT: 65px
}
.headmemu_center {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_07.gif) repeat-x; FLOAT: left; MARGIN: 12px 0px 9px; WIDTH: 730px; HEIGHT: 65px
}
.headmemu_right {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_08.gif) no-repeat; FLOAT: left; MARGIN: 12px 0px 9px; WIDTH: 15px; HEIGHT: 65px
}
.headmenu720a {
    FLOAT: left; MARGIN: 9px 0px 0px; WIDTH: 730px
}
.headmenu720a LI {
    DISPLAY: block; FLOAT: left; WIDTH: 91px; LINE-HEIGHT: 30px; LIST-STYLE-TYPE: none; TEXT-ALIGN: center
}
.headmenu720b {
    FLOAT: left; WIDTH: 730px; LINE-HEIGHT: 21px; TEXT-ALIGN: center
}
.top_pic {
    BORDER-RIGHT: #87a3d1 1px solid; BORDER-TOP: #87a3d1 1px solid; BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_21.gif) no-repeat center 50%; FLOAT: left; BORDER-LEFT: #87a3d1 1px solid; WIDTH: 335px; BORDER-BOTTOM: #87a3d1 1px solid; HEIGHT: 300px
}
.top_art {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_20.gif) repeat-x 50% top; FLOAT: left; WIDTH: 395px
}
.top_art_today {
    PADDING-RIGHT: 7px; PADDING-LEFT: 6px; BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_22.gif) no-repeat center 50%; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 395px; PADDING-TOP: 7px; HEIGHT: 63px
}
.top_art_all {
    FLOAT: left; OVERFLOW: auto; WIDTH: 395px; HEIGHT: 268px
}
.top_art_all LI {
    FLOAT: left
}
.top_art_all .left {
    PADDING-LEFT: 8px; FLOAT: left; WIDTH: 193px; TEXT-ALIGN: left
}
.top_art_all .line {
    FLOAT: left; WIDTH: 15px; TEXT-ALIGN: left
}
.top_art_all .right {
    FLOAT: left; WIDTH: 186px; TEXT-ALIGN: left
}
.top_art_bottom {
    BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 1px; FLOAT: left; PADDING-BOTTOM: 1px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 395px; PADDING-TOP: 1px; BORDER-BOTTOM: #cccccc 1px solid
}
.top_art_bottom UL {
    HEIGHT: 90px; BACKGROUND-COLOR: #f6f6ed
}
.top_art_bottom LI {
    FLOAT: left; BACKGROUND-COLOR: #f6f6ed
}
</STYLE>

<BODY>
 <DIV class=top_pic>
    <STYLE type=text/css>
#f_div {
    MARGIN: 6px auto 0px; OVERFLOW: hidden; WIDTH: 320px; HEIGHT: 250px
}
#f_imgDiv {
    OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 250px
}
#f_img {
    BORDER-RIGHT: 0px; BORDER-TOP: 0px; FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); BORDER-LEFT: 0px; BORDER-BOTTOM: 0px
}
#f_infoDiv {
    WIDTH: 100%; POSITION: relative; TOP: -22px
}
#f_buttonDiv {
    OVERFLOW: hidden; WIDTH: 100%; MARGIN-RIGHT: 1px; HEIGHT: 21px; TEXT-ALIGN: left
}
#f_line {
    BACKGROUND: #fff; FILTER: progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=50, finishY=100,style=1,opacity=0,finishOpacity=100); FLOAT: right; OVERFLOW: hidden; WIDTH: 40%; HEIGHT: 1px
}
#f_buttonDiv DIV {
    BACKGROUND: #fff; FLOAT: right; WIDTH: 1px; HEIGHT: 21px
}
#f_buttonDiv .bg {
    BACKGROUND: #fff; FILTER: Alpha(Opacity=40); FLOAT: right; WIDTH: 21px; HEIGHT: 21px
}
#f_buttonDiv A {
    DISPLAY: block; FONT-SIZE: 10px; FLOAT: right; OVERFLOW: hidden; WIDTH: 21px; COLOR: #fff; PADDING-TOP: 5px; FONT-FAMILY: Arial, Helvetica, sans-serif; POSITION: absolute; HEIGHT: 21px; TEXT-ALIGN: center; TEXT-DECORATION: none
}
#f_buttonDiv A:link {
    COLOR: #000
}
#f_buttonDiv A:visited {
    COLOR: #000
}
#f_buttonDiv A:active {
    COLOR: #000
}
#f_buttonDiv A:hover {
    BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:link {
    BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:visited {
    BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:active {
    BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:hover {
    BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:hover {
    BACKGROUND: #ff6600
}
#f_text {
    MARGIN-TOP: 8px; OVERFLOW: hidden; LINE-HEIGHT: 26px; HEIGHT: 26px; TEXT-ALIGN: center
}
#f_text A:link {
    COLOR: #000; TEXT-DECORATION: none
}
#f_text A:visited {
    COLOR: #000; TEXT-DECORATION: none
}
#f_text A:active {
    COLOR: #000; TEXT-DECORATION: none
}
#f_text A:hover {
    COLOR: #ff6600; TEXT-DECORATION: none
}
</STYLE>
    <DIV id=f_div>
      <!--图片区域-->
      <DIV id=f_imgDiv></DIV>
      <DIV id=f_infoDiv>
        <!--数字按钮区域-->
        <DIV id=f_buttonDiv></DIV>
      </DIV>
    </DIV>
    <!--焦点文字区域-->
    <DIV class=f12b id=f_text></DIV>
    <SCRIPT>
//可修改区域
var imgWidth=320;
var imgHeight=250;
var _timeOut_=5000;
var show_text = true; //是否显示焦点文字
var timeOut=_timeOut_;
var timeOut2=_timeOut_/2;//onmouseout img后需要切换的时间
var now=0;              //第一张图
var target="_blank";   //打开方式
var button_on ='on'; //当前焦点对应按钮的样式名
var button_off ='';//非当前焦点对应按钮的样式名
//不可修改区域
var imgUrl = new Array();
var imgText = new Array();
var imgLink = new Array();
var imgAlt= new Array();
//var menuList = new Array();//菜单menu
var ver=2; //兼容浏览器版本 默认2 为非ie
var firstTime=true;
var n =-1;
imgUrl[++n]='http://www.pcgames.com.cn/netgames/xwkx/gnww/images/picpath/pczhh0820002.jpg';
imgText[n]='<a href="http://www.pcgames.com.cn/netgames/xwkx/gnww/0708/933872.html" target="_blank" class=linkblack>史上最强 安全套做成游戏周边</a>';
imgLink[n]='http://www.pcgames.com.cn/netgames/xwkx/gnww/0708/933872.html';
imgAlt[n]='史上最强 安全套做成游戏周边';
imgUrl[++n]='http://www.pcgames.com.cn/games/tt/images/picpath/ccccccc15224154.jpg';
imgText[n]='<a href="http://www.pcgames.com.cn/netgames/netmm/" target="_blank" class=linkblack>前RF代言人范冰冰清凉比基尼释放激情写真</a>';
imgLink[n]='http://www.pcgames.com.cn/netgames/netmm/';
imgAlt[n]='前RF代言人范冰冰清凉比基尼释放激情写真';
imgUrl[++n]='http://www.pcgames.com.cn/games/tt/images/picpath/PCgames070817vanilogobig.jpg';
imgText[n]='<a href="http://fight.pcgames.com.cn/mm/" target="_blank" class=linkblack>PlayGirl魔兽血精灵MM左小娜性感内衣秀</a>';
imgLink[n]='http://fight.pcgames.com.cn/mm/';
imgAlt[n]='PlayGirl魔兽血精灵MM左小娜性感内衣秀';
imgUrl[++n]='http://www.pcgames.com.cn/cartoon/dl/wall/images/picpath/pcgames0818CP2_320.jpg';
imgText[n]='<a href="http://www.pcgames.com.cn/cartoon/bbs/c72" target="_blank" class=linkblack>C72预热之四：[和]激萌萝莉壁纸大赏</a>';
imgLink[n]='http://www.pcgames.com.cn/cartoon/bbs/c72';
imgAlt[n]='C72预热之四：[和]激萌萝莉壁纸大赏';
imgUrl[++n]='http://www.pcgames.com.cn/games/tt/images/picpath/pcgame0820jiaodian01.jpg';
imgText[n]='<a href="http://www.pcgames.com.cn/pcgames/pczq/xj4/index.html" target="_blank" class=linkblack>中日决战!云天河大战克劳德爆笑同人漫画(1)</a>';
imgLink[n]='http://www.pcgames.com.cn/pcgames/pczq/xj4/index.html';
imgAlt[n]='中日决战!云天河大战克劳德爆笑同人漫画(1)';
imgUrl[++n]='http://www.pcgames.com.cn/games/tt/images/picpath/pcgames0818crazytaxi320.jpg';
imgText[n]='<a href="http://www.pcgames.com.cn/tvgames" target="_blank" class=linkblack>极速!《疯狂出租车 车费战争》游戏下载</a>';
imgLink[n]='http://www.pcgames.com.cn/tvgames';
imgAlt[n]='极速!《疯狂出租车 车费战争》游戏下载';
var count=0;
for (i=0;i<imgUrl.length;i++) {
if( (imgUrl[i]!="") && (imgText[i]!="")&& (imgLink[i]!="")&& (imgAlt[i]!="")) {
count++;
} else {
break;
}
}
function p$(string){
document.write(string);
}
function $(id){
return document.getElementById(id);
}
//固定图片size
p$("<style> #f_img { width:"+imgWidth+"px;height:"+imgHeight+"px;</style>");
function change(){
if (ver==1){
with($('f_img').filters[0]){
Transition=1;
apply();
play(); 
}
}
if (firstTime){ firstTime=false;timeOut=_timeOut_/1000;}
else{     
$('f_img').src=imgUrl[now];
$('f_img').alt=imgAlt[now];
$('f_imgLink').href=imgLink[now];
if (show_text) $('f_text').innerHTML=imgText[now];        
for (var i=0;i<count;i++) {
$('b'+i).className="button";
//$('f_menu'+i).className="";
}
$('b'+now).className="on";    
//$('f_menu'+now).className="on";     
now=(now>=imgUrl.length-1)?0:now+1;
timeOut=_timeOut_;         
}
theTimer=setTimeout("change()", timeOut);
}
function b_change(num){
window.clearInterval(theTimer); 
now=num;
firstTime=false;
change();
}
//draw 渐变line （即css:f_line)
function draw_line(){
var div = document.createElement("div");    
div.id = 'f_line';
$('f_infoDiv').insertBefore(div,$('f_infoDiv').childNodes.item(0));            
}
//表现层 start        
//图片
var a = document.createElement("a");        
a.id="f_imgLink";
a.target=target;
a.href=imgLink[now];    
$('f_imgDiv').appendChild(a);
var img = document.createElement("img");    
img.id="f_img";
img.width=imgWidth;
img.height=imgHeight;
img.src=imgUrl[now];
img.alt=imgAlt[now];
a.appendChild(img);
//数字按钮
for (var i=count-1;i>=0;i--){
var div_bg = document.createElement("div");        
div_bg.id = 'div_bg'+i;
div_bg.className='bg';
$('f_buttonDiv').appendChild(div_bg);    
var a = document.createElement("a");        
a.id = 'b'+i;
a.className = (i==now+1)?"button_on":"button_off";        
a.title=imgAlt[i];
a.innerHTML=i+1;
a.href='javascript:b_change('+i+')';        
$('div_bg'+i).appendChild(a);    
var div= document.createElement("div");
$('f_buttonDiv').appendChild(div);            
}        
if (show_text) $('f_text').innerHTML = imgText[now];
//表现层 end
$('f_img').onmouseover=function(){window.clearInterval(theTimer);}
$('f_img').onmouseout=function(){theTimer=setTimeout("change()", timeOut2);}
try{  //滤镜版本
new ActiveXObject("DXImageTransform.Microsoft.Fade");
$('f_img').filters[0].play();      
ver=1;
draw_line(); 
}
catch (e){ver=2;}
var theTimer = setTimeout("change()", _timeOut_/1000);
</SCRIPT>
  </DIV>
</BODY></HTML>
 
163图片新闻切换效果
03-30
163图片新闻切换效果! 值得下载看看!资源免费,大家分享!!
新浪图片新闻特效
Jerry Chou's Space
06-11 1751
html>head>title>新浪的图片新闻效果title>meta http-equiv="Content-Type" content="text/html; charset=gb2312">head>body bgcolor="#FFFFFF" text="#000000">p> p>    p>     script language=javascript>...  //-------
腾讯宽频的图片新闻效果
anjichan4261的博客
10-30 127
腾讯宽频的图片新闻效果 <scriptlanguage=javascript> //-------定义图片路径等参数-------------// //定义大图的路径， varbigPic3="http://img1.qq.com/bb/pics/4700/4700089.jpg"; varbigPic2="http://img1.qq.com/bb/pics/4...
基于jQuery焦点图片新闻代码（JS+CSS）
GoodShot的专栏
11-22 1151
基于jQuery技术的实用用代码。 电信下载点 网通下载点
js 滚动图片新闻效果
ilrxx的专栏
06-15 385
&lt;script language="JavaScript1.2"&gt; &lt;!-- /*设置下面的参数。 设置scrollerwidth和scrollerheight参数，设置成滚动显示的图片中尺寸最大的。*/ var scrollerwidth=400 var scrollerheight=66 var scrollerbgcolor='white'...
html+js+css开发项目案例.pdf
最新发布
07-02
- 包含学校的Logo、导航栏（首页、关于学校、新闻动态、校园风光、联系我们等）、轮播图、主要新闻摘要、校园风光图片展示等。 #### 关于学校 - 介绍学校的历史、办学特色、师资力量、教学设施等内容，采用图文结合...
Javascript+CSS实现Flash动态新闻效果（pp原创）
10-30
### JavaScript+CSS 实现Flash动态新闻效果解析 #### 一、引言 随着Web技术的发展，用户对于网页的视觉体验有了更高的要求。传统的静态页面已经无法满足这种需求，因此动态效果成为了提升用户体验的重要手段之一。...
HTML+CSS+JS原神官网实现
05-11
在本项目中，“HTML+CSS+JS原神官网实现”是一个旨在通过JavaScript原生代码来复现《原神》官方网站的动态效果的学习实践。这个项目适合已经掌握基础HTML和CSS，正在进阶学习JavaScript的开发者，它能帮助你提升对这...
HTML+JS+CSS期末大作业合集
07-05
在这个"HTML+JS+CSS期末大作业合集"中，我们可以看到学生们如何综合运用这些技术来创建吸引人的网页项目。下面将详细介绍这三个领域的核心概念及其在实际项目中的应用。 **HTML (HyperText Markup Language)** 是...
仿腾讯图片新闻浏览效果
用智慧创新技术，用技术改变未来
03-14 4247
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">                     $(function () {             $("table tr td img[name=1]").click(function () {
js做的新闻图片切换效果
03-17
NULL 博文链接：https://yuxuguang.iteye.com/blog/565725
淘宝店图片新闻(Css+js)代码
10-08
朋友让帮忙整理一下淘宝店图片新闻展示的效果代码，所以整理了一份。此系统是利用CSS+Javascript来实现的图片展示系统。效果展示请查看：http://shop34929604.taobao.com/
JS多种新闻图片切换效果
12-13
JS多种新闻图片切换效果源码，已经封装好JS，只需简单调用即可。
图片集新闻HTML源码
01-08
收集更改过的新闻图片集新闻HTML源码，可左右滑屏翻页！
163图片新闻切换（html+js）
09-05
163图片新闻切换（html+js）163图片新闻切换（html+js）
图片新闻侧边栏两列显示 CSS
weixin_30872867的博客
07-07 279
li.line,li img{padding:0; margin:0;overflow:hidden;width:130px;}ul.picnew{ list-style:none; float:left; margin:3px 2px 3px; padding:0; width:140px; overflow:hidden;} li.line{ line-height:20px; f...
css 实现新闻列表鼠标悬浮时显示图片和内容简介
u013182438的博客
03-13 2128
1.css 代码 *{margin:0;padding:0;} .content{width:980px;margin:0 auto;} .content .ee .tx p{display:block;} .content .ee li p{overflow:auto;display:none;} .content img{display:block;float:left;width:120p
CSS实现每行新闻数量不等效果代码
lomo_2019的博客
07-24 262
本来还以为这块是由后台单独去做的，今天看到这种效果，居然是CSS实现的。现在将它放到这里与大家共享 <style> <!-- .title{ font-size:14px; font-weight:bold; color:#FF6600 } .t0{ margin:3px; padding:3px; list-style-type:none; line-he...
实现交互式图片轮播效果的JS+CSS技巧
- **JavaScript (JS)**：主要负责实现图片轮播的动态交互效果，包括监听鼠标和键盘事件、控制图片的播放和暂停、实现自动轮播和指示器等功能。JavaScript的使用让轮播图的交互更加灵活和高效。 #### 3. 关键技术点...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值