- 浏览: 245255 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
u010181690:
怎么我的不管事呢
JSEnhancements for vs2012 -
sunqing0316:
public static DateTime? GetData ...
详解System.Nullable<值类型> -
sunqing0316:
请问public static DateTime? GetDa ...
详解System.Nullable<值类型> -
3eirc3:
不错,下载下来试试,原来用vs2010时的那个工具和现在这个不 ...
JSEnhancements for vs2012 -
3eirc3:
[url][b][i][u]引用[list]
[*][img] ...
JSEnhancements for vs2012
<!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>仿土豆网的焦点轮换图片</title>
<style type="text/css">
/* Reset style */
* { margin:0; padding:0; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#039; text-decoration:none; }
a:hover { text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }
/* Focus_change style */
#focus_change { position:relative; width:450px; height:295px; overflow:hidden; margin:20px 0 1px 60px; }
#focus_change_list { position:absolute; width:1800px; height:295px; }
#focus_change_list li { float:left; }
#focus_change_list li img { width:450px; height:295px; }
.focus_change_opacity { position:absolute; width:450px; height:70px; top:225px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; }
#focus_change_btn { position:absolute; width:450px; height:65px; top:225px; left:0; }
#focus_change_btn ul { padding-left:5px; }
#focus_change_btn li { display:inline; float:left; margin:0 15px; padding-top:12px; }
#focus_change_btn li img { width:76px; height:50px; border:2px solid #888; }
#focus_change_btn .current { background:url(/uploadfile/200901/1/6C164133877.gif) no-repeat 37px 8px;}
#focus_change_btn .current img { border-color:#EEE; }
</style>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function moveElement(elementID,final_x,final_y,interval) {
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = "0px";
}
if (!elem.style.top) {
elem.style.top = "0px";
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if (xpos == final_x && ypos == final_y) {
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if (ypos > final_y) {
var dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}
function classNormal(){
var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
for(var i=0; i<focusBtnList.length; i++) {
focusBtnList[i].className='';
}
}
function focusChange() {
var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
focusBtnList[0].onmouseover = function() {
moveElement('focus_change_list',0,0,5);
classNormal()
focusBtnList[0].className='current'
}
focusBtnList[1].onmouseover = function() {
moveElement('focus_change_list',-450,0,5);
classNormal()
focusBtnList[1].className='current'
}
focusBtnList[2].onmouseover = function() {
moveElement('focus_change_list',-900,0,5);
classNormal()
focusBtnList[2].className='current'
}
focusBtnList[3].onmouseover = function() {
moveElement('focus_change_list',-1350,0,5);
classNormal()
focusBtnList[3].className='current'
}
}
setInterval('autoFocusChange()', 5000);
var atuokey = false;
function autoFocusChange() {
$('focus_change').onmouseover = function(){atuokey = true}
$('focus_change').onmouseout = function(){atuokey = false}
if(atuokey) return;
var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
for(var i=0; i<focusBtnList.length; i++) {
if (focusBtnList[i].className == 'current') {
var currentNum = i;
}
}
if (currentNum==0 ){
moveElement('focus_change_list',-450,0,5);
classNormal()
focusBtnList[1].className='current'
}
if (currentNum==1 ){
moveElement('focus_change_list',-900,0,5);
classNormal()
focusBtnList[2].className='current'
}
if (currentNum==2 ){
moveElement('focus_change_list',-1350,0,5);
classNormal()
focusBtnList[3].className='current'
}
if (currentNum==3 ){
moveElement('focus_change_list',0,0,5);
classNormal()
focusBtnList[0].className='current'
}
}
window.onload=function(){
focusChange();
}
</script>
</head>
<body>
<div id="focus_change">
<div id="focus_change_list" style="top:0; left:0;">
<ul>
<li><img src="/uploadfile/200901/1/74164133287.jpg" alt="" /></li>
<li><img src="/uploadfile/200901/1/B3164134719.jpg" alt="" /></li>
<li><img src="/uploadfile/200901/1/AC164135752.jpg" alt="" /></li>
<li><img src="/uploadfile/200901/1/73164136986.jpg" alt="" /></li>
</ul>
</div>
<div class="focus_change_opacity"></div>
<div id="focus_change_btn">
<ul>
<li class="current"><a href="#"><img src="/uploadfile/200901/1/5F164137217.jpg" alt="" /></a></li>
<li><a href="#"><img src="/uploadfile/200901/1/A4164137404.jpg" alt="" /></a></li>
<li><a href="#"><img src="/uploadfile/200901/1/2D164141182.jpg" alt="" /></a></li>
<li><a href="#"><img src="/uploadfile/200901/1/48164141437.jpg" alt="" /></a></li>
</ul>
</div>
</div><!--focus_change end-->
<div style="height:20px; background:#EEE;"></div>
</body>
</html>
- 仿土豆网的焦点轮换图片.rar (190.5 KB)
- 下载次数: 316
发表评论
-
WebApi+Post+实体参数
2015-08-28 11:55 9319回到目录 上一讲中介绍了使用HttpClient如何去调 ... -
jquery插件收集
2014-09-15 18:14 2611:video.js http://www.videojs. ... -
new Date(myDateString)在IE中输出NaN,在火狐和谷歌浏览器中正常
2014-04-01 11:18 918今天在工作中遇到这样一个问题:使用jquery ui的date ... -
日历查看课程(支持从指定日期开始显示日历)
2014-03-31 09:28 615日历查看课程(支持从指定日期开始显示日历),增强浏览器兼容性, ... -
Jqery:bind ,unbind
2014-03-27 16:07 673<%@ Page Language="C#&q ... -
javascript之数组操作
2014-03-18 14:49 2751、数组的创建 var arrayO ... -
身份证号验证
2013-08-08 17:32 874经典js身份证验证 /* 功能:验证身份证号码是 ... -
去验证邮箱功能
2013-08-08 15:43 728很多网站都有邮箱验证的功能,用户发送完验证邮件后,点击&quo ... -
javascript:回车事件
2013-08-01 17:15 622/* * 页面回车事件 */ function BindEnt ... -
封装的简单易用的返回顶部的代码
2013-05-15 12:12 729封装的简单易用的返回顶部的代码 -
Javascript阻止服务器控件执行服务器端代码的问题
2013-03-18 18:14 791Javascript阻止服务器控件执行服务器端代码的问题 ... -
js怎样判断价格
2013-03-18 15:30 1046var reg = /^(-?\d+)(\.\d{1,5})? ... -
一种比较好用的json格式及其解析方法
2013-03-14 11:06 838{"data":[ { &qu ... -
jquery:$.ajax() 复杂 完整例子
2013-03-14 10:58 3405var makingCount = 0; ... -
后台弹出脚本提示
2013-03-09 14:47 812ClientScript.RegisterStartupScr ... -
向上取整向下取整
2013-03-07 18:21 1287向上取整向下取整 . 分类: JavaScript2012 ... -
分页计算页数
2013-03-07 18:21 1075向上取整 pageCount = Math.ceil( ... -
Jquery解析Json格式数据
2013-03-06 17:34 709http://www.cnblogs.com/focusj/a ... -
jquery:$.post() 返回json,并解析json 示例
2013-03-06 09:38 1090注意返回时,json的格式最好是"key" ... -
js一些简单的写法(持续累积中)
2013-03-06 09:36 600//s.css("color", &quo ...
相关推荐
js实现的图片切换功能.
css实现超酷图片切换
jquery实现图片不同切换效果。eg:淡隐淡出,上下滚动等等
简单的Jquery实现图片切换,
js实现首页焦点图片切换效果,仿大麦网首页焦点图片切换效果
jQuery实现带左右按钮的图片切换,图片自动切换
jquery实现图片切换的功能.只需要引用相应的js文件就可以实现
用javascript中的节点实现的一个类似淘宝那种图片切换的小应用
C#用PictureBox控件实现选择图片切换(不是自动切换
viewpager实现图片切换
JavaScript实现图片切换,主要用到setInterval()函数和clearInterval()函数,前者功能是开启动画,后者功能则为清除动画(可理解为使动画停止),为了使动画停止,则需要定义全局变量作为标志,标志返回setInterval...
js实现的图片切换。非面向对象版。可用于jsp,html中
jQuery实现图片切换
纯CSS实现的图片切换 效果很不错 喜欢的可以多多学习
CSS实现网页图片切换轮播
基于ImageSwitcher实现图片左右切换,类似ViewFlipper,ViewPager的效果
利用js实现动态图片切换
纯CSS3实现的图片切换幻灯片代码是一款没用到JS跟jQuery实现的CSS3幻灯片特效。
这种切换效果,同时实现了自动播放及手动播放的功能,点击文字即可实现切换的效果,很不错哦
js实现随即图片切换效果所有代码都在里面