社区
CSS
帖子详情
怎么让图片(很多张)向左滚动,然后鼠标悬浮图片放大
pxxpypw
2013-04-22 09:07:36
怎么让图片(很多张)向左滚动,然后鼠标悬浮图片放大
...全文
245
6
打赏
收藏
怎么让图片(很多张)向左滚动,然后鼠标悬浮图片放大
怎么让图片(很多张)向左滚动,然后鼠标悬浮图片放大
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
6 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
SQL数据库
2014-12-14
打赏
举报
回复
有用,值得借鉴
留校_察看
2013-06-16
打赏
举报
回复
何必那么麻烦,直接用A标签背景图加定位方式实现。里面要加个空格代码,不然是不会显示出来的,然后就是伪类了。
w4961034_
2013-06-10
打赏
举报
回复
w4961034_
2013-06-10
打赏
举报
回复
我也没试过,不知marquee+css能否实现
当然感
2013-06-06
打赏
举报
回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>slideimg</title> <style type="text/css"> *{margin:0;padding:0;} ul{list-style:none;} .imgbox{width:430px; height:80px; padding:10px; position:relative; border:1px solid #eaeaea; overflow:hidden; margin:100px auto; zoom:1;} .imgbox ul{position:absolute;left:10px;} .imgbox ul li{float:left; width:100px; height:80px; padding-right:10px;} .imgbox ul li a{display:block; float:left; width:100px; height:80px; position:relative;} .imgbox ul li img{width:100px; height:80px;} #bigbox{position:absolute; left:0; top:0; z-index:2; display:none; width:200px; height:200px;} </style> <script type="text/javascript"> window.onload=function(){ var oParent = document.getElementById('imgbox'); var oUl = oParent.getElementsByTagName('ul')[0]; var oLi = oUl.getElementsByTagName('li'); var oA = oUl.getElementsByTagName('a'); var oImg = document.getElementById('bigbox'); var timer = null; //var liw = oLi[0].offsetWidth; oUl.innerHTML+=oUl.innerHTML; oUl.style.width = oLi[0].offsetWidth*oLi.length+'px'; function slideimg(){ if(oUl.offsetLeft<-oUl.offsetWidth/2){ oUl.style.left = '10px'; } oUl.style.left = oUl.offsetLeft-1+'px'; } timer = setInterval(slideimg,30); for(var i=0;i<oA.length;i++){ var div = document.createElement('div'); div.className = 'bigbox'; oA[i].onmouseover=function(e){ var oEvent = e || event; clearInterval(timer); var src = this.href; oImg.src = src; //document.title=oEvent.clientX; oImg.style.display='block'; oImg.style.left=oEvent.clientX-100+'px'; oImg.style.top=oEvent.clientY-130+'px'; } oImg.onmouseout=oA[i].onmouseout=function(){ timer = setInterval(slideimg,30); oImg.style.display='none'; } oImg.onmouseover=function(){ clearInterval(timer); this.style.display='block'; } } } </script> </head> <body> <div class="imgbox" id="imgbox"> <ul> <li><a href="images/1.jpg"><img src="images/1.jpg" /></a></li> <li><a href="images/2.jpg"><img src="images/2.jpg" /></a></li> <li><a href="images/3.jpg"><img src="images/3.jpg" /></a></li> <li><a href="images/4.jpg"><img src="images/4.jpg" /></a></li> </ul> </div> <img src="images/1.jpg" id="bigbox" /> </body> </html>
KK3K2005
2013-04-22
打赏
举报
回复
搜索 图片展示的js代码 或者jquery插件
MAPGIS地质制图工具
← 向
左
移动选择图元 ↓ 向下移动选择图元 Y 捕捉点图元 U 捕捉节点及端点 I(i) 捕捉交叉点 O 捕捉垂点 P 捕捉最近点 [ 捕捉中点
鼠标
中键 按住可以移动图形
鼠标
滚轮
放大
缩小功能 双击
鼠标
中键 复原窗口...
vue 实现
图片
以
鼠标
为中心
放大
,并可以随意在div内拖动
vue 实现
图片
以
鼠标
为中心
放大
,并可以随意在div内拖动
Unity3D游戏开发UGUI-3D
滚动
UI
介绍一个UGUI,NGUI是UGUI的前身,Unity开发团队将NGUI的开发团队收到自己... UGUI的特点: 灵活 快速 可视化 对于开发者来说有
很多
的优点,比如说: 效率高 实现效果好 易于使用和拓展 与Unity编辑器的兼容性高
jquery插件整理篇(三)
图片
展示插件
imgAreaSelect这个jQuery插件能够选取一
张
图片
中一个矩形区域。imgAreaSelect (2)Easy Slide EasySlide 是以jQuery为基础开发的一个图库展示插件,EasySlide可以将任何一个网页容器(Container)内的图形自动将其...
超强1000个jquery极品插件
它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框。 Farbtastic jQuery Color Picker 一个简单的颜色选择控件。操作方式与Adobe Photoshop中颜色选择操作置。 ...
CSS
61,112
社区成员
60,730
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章